Script Tag

The script tag integration is the simplest way to add depositOS to any website. It requires no build tools, no package manager, and no framework — just a single <script> tag and a few lines of JavaScript.

This approach bundles React internally, so your page does not need React as a dependency.

Basic Setup

Include the embed script on your page and call DepositOS.mount() to render the widget into a container element.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My App</title>
</head>
<body>
  <h1>Complete Your Deposit</h1>
  <div id="deposit-widget"></div>

  <script src="https://cdn.depositos.io/depositos.embed.js"></script>
  <script>
    var widget = DepositOS.mount("#deposit-widget", {
      apiKey: "dos_live_…",
      destChain: 42161,
      destToken: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
      destAddress: "0xYourTreasuryAddress",
      enableWallet: true,
      enablePrivateMode: true,
      depositOSTheme: {
        mode: "dark",
      },
    });
  </script>
</body>
</html>

API Reference

The script exposes a global DepositOS object with two methods.

DepositOS.mount(target, config, options?)

Renders the widget inline inside an existing DOM element.

| Parameter | Type | Description | |---|---|---| | target | string \| HTMLElement | A CSS selector or DOM element to mount into | | config | DepositOSConfig | The widget configuration object | | options | object | Optional callbacks (see below) |

Options:

| Property | Type | Description | |---|---|---| | onClose | () => void | Called when the user clicks the widget's close button | | onSuccess | (txHash?: string) => void | Called when a deposit completes |

Returns an EmbedInstance (see below).

DepositOS.open(config, options?)

Opens the widget as a centered floating modal overlay with a backdrop. The user can close it by clicking the backdrop or pressing Escape.

| Parameter | Type | Description | |---|---|---| | config | DepositOSConfig | The widget configuration object | | options | object | Optional callbacks (onClose, onSuccess) |

Returns an EmbedInstance.

EmbedInstance

Both mount() and open() return an instance with these methods:

| Method | Description | |---|---| | update(config) | Partially update the widget config without remounting. Accepts a Partial<DepositOSConfig>. | | destroy() | Unmount the widget and clean up. For open(), this also removes the modal overlay. |

Inline Mount Example

Mount the widget directly into a page section:

<div id="payment-section" style="max-width: 420px; margin: 2rem auto;"></div>

<script src="https://cdn.depositos.io/depositos.embed.js"></script>
<script>
  var widget = DepositOS.mount("#payment-section", {
    apiKey: "dos_live_…",
    destChain: 42161,
    destToken: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
    destAddress: "0xYourTreasuryAddress",
    enableWallet: true,
  }, {
    onSuccess: function (txHash) {
      alert("Deposit complete! TX: " + txHash);
    },
    onClose: function () {
      console.log("Widget closed");
    },
  });
</script>

Modal Overlay Example

Open the widget as a floating modal triggered by a button:

<button id="pay-btn">Pay with Crypto</button>

<script src="https://cdn.depositos.io/depositos.embed.js"></script>
<script>
  document.getElementById("pay-btn").addEventListener("click", function () {
    var modal = DepositOS.open({
      apiKey: "dos_live_…",
      destChain: 42161,
      destToken: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
      destAddress: "0xYourTreasuryAddress",
      enableWallet: true,
      enablePrivateMode: true,
      depositOSTheme: {
        mode: "dark",
        colors: { accent: "#7C3AED" },
      },
    }, {
      onSuccess: function (txHash) {
        console.log("Deposit complete:", txHash);
        modal.destroy();
      },
    });
  });
</script>

Updating Config Dynamically

Use the update() method to change configuration without remounting the widget:

// Switch to light mode
widget.update({
  depositOSTheme: { mode: "light" },
});

// Change the order reference
widget.update({
  orderRef: "order-12345",
});

Cleaning Up

Call destroy() to unmount the widget and remove it from the DOM:

widget.destroy();

For modal overlays created with DepositOS.open(), destroy() also removes the backdrop and restores page scrolling.

Theming

Pass a depositOSTheme object in the config to customize the widget's appearance:

DepositOS.mount("#widget", {
  apiKey: "dos_live_…",
  destChain: 42161,
  destToken: "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
  destAddress: "0xYourTreasuryAddress",
  depositOSTheme: {
    mode: "dark",
    colors: {
      background: "#1a1a2e",
      accent: "#10b981",
      card: "#16213e",
      textPrimary: "#ffffff",
      textSecondary: "#a0a0b0",
    },
    fontFamily: "Inter, system-ui, sans-serif",
    borderRadius: "1rem",
  },
});

Notes

  • The embed script bundles React internally. If your page already uses React, consider the React Component or React Hook integration instead to avoid loading React twice.
  • The script injects its own styles into the page. These are scoped to the widget container and should not interfere with your existing styles.
  • Your apiKey (dos_live_…) identifies your app. Upstream provider keys never reach the browser — all traffic is proxied through the depositOS API.
Previous← Iframe EmbedNextConfiguration →