Embed & Go Live

Once you've configured branding, contracts, and docs, embedding the widget takes about 2 minutes. The Embed & Go Live page provides the code snippet and a one-click toggle to publish.

The embed snippet

Add a single script tag with your publishable key in the data-key attribute - the loader injects the floating widget for you:

<script
  id="txid-widget-script"
  src="https://app.txid.support/widget.js"
  data-key="YOUR_PUBLISHABLE_KEY"
  async>
</script>

Paste it before the closing </body> tag in your HTML. Your publishable key is shown on the Embed & Go Live page. It's safe to include in client-side code.

Next.js / React

For Next.js App Router, add the script to your root layout:

// app/layout.tsx
import Script from "next/script"

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          id="txid-widget-script"
          src="https://app.txid.support/widget.js"
          data-key="YOUR_PUBLISHABLE_KEY"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

Host page API (window.txid)

The loader exposes a small API on window.txid so your own code can drive the widget. Calls made before the widget finishes loading are queued and replayed automatically, so you never need to check readiness.

Pass the connected wallet through

If your site already knows the user's wallet, pass it through and your users never connect twice. Combined with Branding > Wallet > Hidden, the widget shows no wallet UI at all but still supports the user by address, and every bug report they file carries their wallet for per-user tracking.

// After your own wallet connect resolves (and again on account change):
window.txid.identify({
  wallet: userAddress,   // the FULL 0x address, not a shortened display form
  chainId: "0x38"        // the chain your users are on
});

The address is an identifier supplied by your site, never proof of ownership: no signature is requested, and features that sign transactions stay disabled for host-supplied wallets. Malformed values are ignored safely. There is no de-identify call: on account change, just call identify() again.

Open and close from your code

window.txid.open();                    // open the panel
window.txid.open({ mode: "bug" });      // straight into a bug report
window.txid.open({ mode: "feedback" }); // straight into feedback
window.txid.close();

The bug and feedback modes require the matching switches on your Beta page; a mode your project does not run is ignored. A popular pattern is calling open({ mode: "bug" }) from your transaction-failure handler, so the report starts at the moment of failure with the page and wallet already attached.

Follow your site's light/dark toggle

window.txid.setTheme("dark");   // your site switched to dark
window.txid.setTheme("light");  // back to light
window.txid.setTheme("auto");   // follow the visitor's system setting

Requires a dark theme designed on your Branding page with the mode set to Match the visitor. You can also set the starting theme on the script tag itself with data-theme="dark", so the first paint already matches.

Going live

After adding the snippet, return to the Embed & Go Live page and click the Live toggle. The widget becomes visible to all users of your app immediately. There's no code change or redeploy needed to go live or to pause.

Pausing

Click the Live toggle again to pause the widget. It disappears from your app instantly. Use this during incidents, planned maintenance, or when you want to make significant configuration changes before re-publishing.