> For the complete documentation index, see [llms.txt](https://docs.transientlabs.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.transientlabs.xyz/integrations/embeddable-components.md). # Embeddable Components These are small, ready-made HTML elements (web components) that add blockchain features — connecting a wallet, running an auction, minting an NFT, redeeming tokens — to any web page. You add two lines to your page's ``, then place the elements you want in the page like regular HTML tags. No React or build step required: they work in plain HTML and inside any framework (React, Vue, Svelte, WordPress, Webflow, etc.). **Latest Version: 1.8.0** ### What's Included
ElementWhat it does
<tl-connect-button>A "Connect Wallet" button.
<tl-siwe-button>"Sign in with Ethereum" — proves a user owns their wallet.
<tl-auction>A live NFT auction (bid, buy now, settle).
<tl-mint-page-721>A mint page for a 1-of-1 / ERC-721 NFT collection.
<tl-mint-page-1155>A mint page for an edition / ERC-1155 token.
<tl-snr-erc1155tl-raffle>"Send and receive" raffle: send tokens in, get a raffle entry.
<tl-snr-erc1155tl>Send tokens in, receive a fixed ERC-1155 token back.
<tl-snr-erc721tl>Send tokens in, receive a freshly minted ERC-721 NFT back (with a reveal).
<tl-snr-currency>Send currency in, redeem according to the contract's rules.
## Usage Use in any webpage! #### 1. Configure and load (in the ``) `window.tlConfig` is optional — every field has a sensible default — but setting `appName` and a `walletConnectProjectId` is recommended for a polished wallet flow. ```html ``` #### 2. Add the elements you want (in the ``) Each element is configured with HTML attributes (`chain-id`, `contract-address`, etc.). Use only the elements you need — you don't have to include all of them. ```html ``` ## Style Overrides You need to add the style overrides in the body The components are built with tailwindcss v4 and Shadcn/ui. You'll override css variables for main colors and style. There are also classes that you can override for more control (advanced). CSS Variables: ```css :root { --radius: 0.5rem; --title-font: "Inter"; --body-font: "Inter"; --mono-font: "Roboto Mono"; --border-width: 2px; --background: oklch(1 0 0); --foreground: oklch(0.141 0.005 285.823); --card: oklch(1 0 0); --card-foreground: oklch(0.141 0.005 285.823); --popover: oklch(1 0 0); --popover-foreground: oklch(0.141 0.005 285.823); --primary: oklch(0.21 0.006 285.885); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.001 286.375); --muted-foreground: oklch(0.552 0.016 285.938); --accent: oklch(0.967 0.001 286.375); --accent-foreground: oklch(0.21 0.006 285.885); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.21 0.006 285.885); --input: oklch(0.92 0.004 286.32); --dialog: oklch(0.21 0.006 285.885); --ring: oklch(0.705 0.015 286.067); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.141 0.005 285.823); --sidebar-primary: oklch(0.21 0.006 285.885); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.967 0.001 286.375); --sidebar-accent-foreground: oklch(0.21 0.006 285.885); --sidebar-border: oklch(0.92 0.004 286.32); --sidebar-ring: oklch(0.705 0.015 286.067); } .dark { --background: oklch(0.141 0.005 285.823); --foreground: oklch(0.985 0 0); --card: oklch(0.21 0.006 285.885); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.21 0.006 285.885); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.92 0.004 286.32); --primary-foreground: oklch(0.21 0.006 285.885); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.274 0.006 286.033); --muted-foreground: oklch(0.705 0.015 286.067); --accent: oklch(0.274 0.006 286.033); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(0.985 0 0); --input: oklch(1 0 0 / 15%); --dialog: oklch(0.985 0 0); --ring: oklch(0.552 0.016 285.938); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.21 0.006 285.885); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.274 0.006 286.033); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.552 0.016 285.938); } ``` Custom Class Overrides: ```css .tl-root .tl-address-display .tl-dialog-overlay .tl-dialog-content .tl-dialog-header .tl-dialog-footer .tl-dialog-title .tl-dialog-description .tl-dialog-action .tl-dialog-cancel .tl-dialog-close .tl-input .tl-title-3 .tl-title-4 .tl-paragraph .tl-caption .tl-button-default .tl-button-destructive .tl-button-outline .tl-button-secondary .tl-button-ghost .tl-button-link .tl-button-size-default .tl-button-size-sm .tl-button-size-lg .tl-button-size-icon .tl-toaster .tl-countdown-root .tl-countdown-text-group .tl-countdown-label .tl-countdown-time .tl-tx-dialog-title .tl-tx-dialog-root .tl-tx-dialog-spinner .tl-tx-dialog-text .tl-wrapper .tl-connect-button .tl-siwe-button .tl-siwe-connect-button .tl-auction-root .tl-auction-top-section .tl-auction-price-label .tl-auction-price-display .tl-auction-highest-bidder-section .tl-auction-highest-bidder-display .tl-auction-button-group .tl-auction-submit-bid-button .tl-auction-buy-now-button .tl-auction-settle-button .tl-auction-connect-button .tl-auction-duration-caption .tl-auction-bottom-text-section .tl-auction-view-on-transient-text .tl-auction-bids-caption .tl-auction-history-title .tl-auction-history-group .tl-auction-history-bid .tl-auction-history-list-entry .tl-auction-history-cancel-entry .tl-auction-history-bid-entry .tl-auction-history-settle-entry .tl-auction-history-buy-now-entry .tl-auction-empty-state-container .tl-auction-bid-title .tl-auction-bid-root .tl-auction-bid-input-group .tl-auction-bid-input .tl-auction-bid-button .tl-auction-min-bid .tl-mint-root .tl-mint-top-section .tl-mint-phase .tl-mint-supply .tl-mint-middle-section .tl-mint-middle-left-section .tl-mint-allowance-caption .tl-mint-price-caption .tl-mint-price .tl-mint-protocol-fee-caption .tl-mint-middle-right-section .tl-mint-bottom-section .tl-mint-button .tl-mint-connect-button .tl-mint-recipient-section .tl-mint-recipient-display .tl-mint-to-other-button .tl-mint-disabled-text .tl-mint-recipient-dialog .tl-mint-recipient-input .tl-mint-save-recipient .tl-mint-success-dialog-root .tl-mint-recipient-dialog .tl-mint-success-token-root .tl-mint-success-token-image .tl-mint-success-token-text .tl-mint-success-token-title .tl-mint-success-view-on-opensea-text .tl-mint-success-loading-text .tl-mint-view-on-transient-text .tl-snr-root .tl-snr-redemption-data-container .tl-snr-user-data-container .tl-snr-connect-button .tl-snr-section-title .tl-snr-data-span .tl-snr-link .tl-snr-counter-container .tl-snr-actions-container .tl-snr-redemption-disabled-text .tl-snr-action-button .tl-snr-success-dialog-root .tl-snr-success-dialog .tl-snr-success-token-root .tl-snr-success-token-image .tl-snr-success-token-text .tl-snr-success-token-title .tl-snr-success-view-on-opensea-text .tl-snr-success-loading-text ``` ## Custom Events The components dispatch events on `document` so you can hook in your own logic (analytics, confirmations, redirects, etc.). Each event carries its data on the standard `event.detail` field: ```javascript document.addEventListener("tl-mint-721", (event) => { console.log("Minted!", event.detail); // e.g. { sender, chainId, contractAddress, logs } }); ``` | Event | Fired when | `event.detail` contains | | ------------------------------- | ------------------------------- | -------------------------------------------------------- | | `tl-wallet-connect` | A wallet connects | `address` | | `tl-wallet-disconnect` | A wallet disconnects | *(none)* | | `tl-auction-bid` | A bid is placed | `sender, chainId, contractAddress, tokenId, listing?` | | `tl-buy-now` | An item is bought now | `sender, chainId, contractAddress, tokenId, listing?` | | `tl-auction-settle` | An auction is settled | `sender, chainId, contractAddress, tokenId, listing?` | | `tl-mint-721` | An ERC-721 is minted | `sender, chainId, contractAddress, logs` | | `tl-mint-1155` | An ERC-1155 is minted | `sender, chainId, contractAddress, tokenId` | | `tl-siwe` | A user signs in with Ethereum | `message, signature` | | `tl-snr-erc1155tl-raffle-entry` | A raffle entry is submitted | `sender, chainId, raffleContractAddress` | | `tl-snr-erc1155tl-raffle-claim` | A raffle prize is claimed | `sender, chainId, raffleContractAddress, isWinner` | | `tl-snr-currency-redemption` | A currency redemption succeeds | `sender, chainId, contractAddress, numRedemptions` | | `tl-snr-erc1155tl-redemption` | An ERC-1155 redemption succeeds | `sender, chainId, contractAddress, numRedemptions` | | `tl-snr-erc721tl-redemption` | An ERC-721 redemption succeeds | `sender, chainId, contractAddress, numRedemptions, logs` | --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.transientlabs.xyz/integrations/embeddable-components.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.