> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fluz.app/llms.txt
> Use this file to discover all available pages before exploring further.

# 将 JS 小部件添加到您的页面

要安装该小部件，只需将以下代码放到您的站点中。

确保 [已生成 patToken](/developers/setting-up-your-server) 并在您的页面中可用

```javascript theme={null}
<script>
  (function() {
    var script = document.createElement('script');
    script.src = "https://storage.googleapis.com/fluz-fluz-file-uploads-prod-ricuyxowbwlfprel/widgets/fluz-embedded-payment-widget.js?v1.1.1";
    script.async = true;

    script.onload = function() {
      if (typeof FluzEmbedded !== "undefined") {
        FluzEmbedded.init({
          apiKey: "" // Your api_key,
          transaction_type: "", // DEPOSIT or WITHDRAW
          amount: 0, // Pass in the amount here
          onOpen: () => console.log("Modal opened"),
          onClose: () => console.log("Modal closed"),
          patToken: "", // Pass in your generatedToken
        });
      } else {
        console.warn("FluzEmbedded not available yet.");
      }
    };

    document.head.appendChild(script);
  })();
  </script>
```

此代码片段将从我们的远程存储桶加载脚本并将其添加到您的页面，然后初始化小部件。

## 向页面上现有的容器添加一个按钮。

```javascript theme={null}
<script>
  window.addEventListener("DOMContentLoaded", () => {
    const el = document.getElementById("btn-container"); // replace "btn-container" with your preferred selector
    FluzEmbedded.renderButton(el);
  });

  setInterval(() => {
    console.log("Is modal open?", FluzEmbedded.isOpen());
  }, 3000);
  </script>
```

## 将小部件绑定到页面上现有的按钮。

```javascript theme={null}
 <script>
  document.addEventListener("DOMContentLoaded", () => {
    const button = document.getElementById("existing-button"); // replace "existing-button" with your preferred selector
    if (button) {
      button.addEventListener("click", () => {
        FluzEmbedded.openModal();
      });
    }
  });

  setInterval(() => {
    console.log("Is modal open?", FluzEmbedded.isOpen());
  }, 3000);
  </script>
```