Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Embeddable Components

Drop-in Web3 building blocks for any website.

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 <head>, 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.11.0

What's included

Element
What 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 <head>)

window.tlConfig is optional — every field has a sensible default — but setting appName and a walletConnectProjectId is recommended for a polished wallet flow.

<head>
  <script>
    window.tlConfig = {
      mode: "light",                          // "light" or "dark"
      appName: "My Cool App",                 // shown in the wallet connect dialog
      appDescription: "My cool app's description",
      walletConnectProjectId: "wallet-connect-id",
      testnet: false,                         // set true to use test networks (Sepolia, etc.)

      // Optional: override the default RPC URL per chain. Any you leave out use
      // the public default shown below. Testnet keys are only used when testnet: true.
      rpcUrls: {
        // Mainnets
        ethereum: "",       // defaults to https://ethereum-rpc.publicnode.com
        shape: "",          // defaults to https://mainnet.shape.network
        base: "",           // defaults to https://base-rpc.publicnode.com
        arbitrum: "",       // defaults to https://arbitrum-one-rpc.publicnode.com
        robinhood: "",      // defaults to https://robinhood-rpc.publicnode.com
        // Testnets (used when testnet: true)
        sepolia: "",        // defaults to https://ethereum-sepolia-rpc.publicnode.com
        shapeSepolia: "",   // defaults to https://sepolia.shape.network
        baseSepolia: "",    // defaults to https://base-sepolia-rpc.publicnode.com
        arbitrumSepolia: "", // defaults to https://arbitrum-sepolia-rpc.publicnode.com
        robinhoodTestnet: "" // defaults to https://robinhood-sepolia-rpc.publicnode.com
      }
    }
  </script>
  <script type="module" src="https://cdn.transientlabs.xyz/embeds/v1.9.0/index.js"></script>
  <link rel="stylesheet" href="https://cdn.transientlabs.xyz/embeds/v1.9.0/index.css">
</head>

2. Add the elements you want (in the <body>)

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.

Component Inputs

Use kebab-case attributes in HTML. For example, the React prop chainId is the HTML attribute chain-id, and contractAddress is contract-address.

Boolean attributes should be set explicitly, for example view-on-transient="false". Number inputs are parsed from their attribute values.

<tl-connect-button>

Attribute
Type
Required
Default
Description

variant

string

No

default

Button style variant: default, destructive, outline, secondary, ghost, or link.

<tl-siwe-button>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID to use for the SIWE message and signature flow.

site-name

string

Yes

-

Site name shown in the SIWE message.

terms-url

string

Yes

-

Terms URL included in the SIWE message.

nonce-source

string

No

block hash nonce

Set to transient to fetch a nonce from the Transient API. Otherwise the nonce is derived locally from the latest block and wallet address.

<tl-auction>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID where the auction contracts live.

contract-address

address

Yes

-

NFT contract address.

token-id

number

Yes

-

Token ID being auctioned.

auction-house-address

address

Yes

-

Auction house contract address.

refresh-interval

number

Yes

-

Polling interval in milliseconds.

view-on-transient

boolean

No

true

Whether to show the "View on Transient" link.

<tl-mint-page-721>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID where the mint contracts live.

contract-address

address

Yes

-

ERC-721 collection contract address.

mint-contract-address

address

Yes

-

Mint contract address.

allowlist-url

string

Yes

-

URL for allowlist data used during presale checks.

slug

string

Yes

-

Transient collection or drop slug used for external links.

refresh-interval

number

Yes

-

Polling interval in milliseconds.

view-on-transient

boolean

No

true

Whether to show the "View on Transient" link.

<tl-mint-page-1155>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID where the mint contracts live.

contract-address

address

Yes

-

ERC-1155 collection contract address.

token-id

number

Yes

-

ERC-1155 token ID to mint.

mint-contract-address

address

Yes

-

Mint contract address.

allowlist-url

string

Yes

-

URL for allowlist data used during presale checks.

slug

string

Yes

-

Transient collection or drop slug used for external links.

refresh-interval

number

Yes

-

Polling interval in milliseconds.

view-on-transient

boolean

No

true

Whether to show the "View on Transient" link.

Cross-chain minting

Both mint pages let collectors pay with ETH from any supported chain (Ethereum, Base, Arbitrum, Shape, Robinhoodm or their testnets in testnet mode) using Relay. No extra attributes or API keys are needed.

  • Pay on selector. Collectors pick the chain they want to pay from. The list shows their ETH balance on each chain, and a check mark appears when the drop's own chain is selected. Only chains Relay currently accepts deposits on are listed; the drop's chain is always available.

  • Bridge fee quote. When a different chain is selected, a live Relay quote is fetched and the bridge fee is shown under the selector. The Mint button stays disabled until a valid quote is available.

  • Execution. Relay bridges the ETH and runs the mint on the drop's chain in one flow. The collector only signs on the chain they pay from.

  • Pending payments. If the payment is sent but the mint can't be confirmed yet, the page shows a notice with a link to track it on Relay, and minting is paused until it settles. A toast then reports whether the mint completed or the ETH was refunded.

  • USD estimate. The price shows an approximate USD value next to the ETH amount.

Cross-chain payment only applies to paid, ETH-priced drops in the upcoming, presale, or public sale phase. Free drops and drops priced in an ERC-20 are minted on the drop's chain only. Relay uses the same rpcUrls from window.tlConfig, and uses Relay's testnet API when testnet: true.

Delegate or gift

Both mint pages include an optional "Delegate or gift" section. Expanding it shows an address input. When a valid address is entered, the mint goes to that address instead of the connected wallet, and the allowlist and allowance checks use the recipient's address.

<tl-snr-erc1155tl-raffle>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID where the raffle contract lives.

raffle-contract-address

address

Yes

-

Send-and-receive raffle contract address.

refresh-interval

number

Yes

-

Polling interval in milliseconds.

<tl-snr-erc1155tl>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID where the redemption contract lives.

contract-address

address

Yes

-

Send-and-receive redemption contract address.

input-contract-address

address

Yes

-

ERC-1155 token contract users send in.

input-token-id

number

Yes

-

ERC-1155 token ID users send in.

refresh-interval

number

Yes

-

Polling interval in milliseconds.

<tl-snr-erc721tl>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID where the redemption contract lives.

contract-address

address

Yes

-

Send-and-receive redemption contract address.

input-contract-address

address

Yes

-

ERC-721 token contract users send in.

input-token-id

number

Yes

-

ERC-721 token ID users send in.

refresh-interval

number

Yes

-

Polling interval in milliseconds.

<tl-snr-currency>

Attribute
Type
Required
Default
Description

chain-id

number

Yes

-

Chain ID where the redemption contract lives.

contract-address

address

Yes

-

Send-and-receive currency redemption contract address.

refresh-interval

number

Yes

-

Polling interval in milliseconds.

Lazy Loading

Embeds lazy-mount by default. Each element first renders a lightweight placeholder, then mounts the full React/Web3 component when it enters the viewport. Blockchain reads and polling do not start until that mount happens.

After an embed mounts once, it stays mounted even if the user scrolls away. This keeps wallet state, open dialogs, form input, and cached query data stable. It also means polling continues for embeds that have already been viewed.

The bundled stylesheet sets all <tl-...> custom elements to display: block so they behave like normal page sections and reserve predictable layout space. Keep the stylesheet loaded, or add equivalent host-page CSS if you are replacing the default styles.

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:

Custom Class Overrides:

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:

Wallet status is also exposed as a global snapshot for synchronous checks, including after page refresh/reconnect flows:

window.tlWallet is updated from the shared Wagmi account state whenever an embed with Web3 support mounts and whenever the wallet status, address, or chain changes. It is a snapshot, so read it again when you need the latest value.

The snapshot shape is:

For refresh-safe integrations, read the current snapshot once and then listen for future changes:

The legacy tl-wallet-connect and tl-wallet-disconnect events are still emitted for compatibility. Prefer window.tlWallet plus tl-wallet-status-change when your page needs to know the current wallet state after a refresh, reconnect, account switch, or chain switch.

Event

Fired when

event.detail contains

tl-wallet-connect

A wallet connects

address

tl-wallet-disconnect

A wallet disconnects

(none)

tl-wallet-status-change

Wallet status, address, or chain changes

status, isConnected, address?, chainId?

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

For cross-chain mints, chainId in tl-mint-721 and tl-mint-1155 is the drop's chain, not the chain the collector paid on, and logs in tl-mint-721 come from the mint transaction on the drop's chain. If a cross-chain payment is still pending when the mint flow ends, the mint event fires later, once Relay reports the mint completed; sender is still the wallet that paid. A mint that was refunded or failed does not fire an event. logs is an empty array if the mint transaction's receipt can't be fetched, so don't rely on it being non-empty.

PreviousOnchain Art
NextSupported Blockchains

Last updated