> ## 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>
```