Overview
Want to embed a Transient auction onto your website? Whether you use Webflow, Squarespace, Wix, WordPress, or something else, this guide will walk you through exactly what to copy, where to paste it, and how to customize it, even if you’re not a developer.
There are two parts to the embed:
Head Code – this goes in your website’s <head> (typically in your site settings).
Body Code – this goes in your page’s body, wherever you want the auction to appear.
✅ What to Copy
1. Code for the <head> of your website
This goes into your website settings or “custom code” section under the head tag:
<script>
window.tlConfig = {
mode: "light", // or "dark"
appName: "My Cool App",
appDescription: "My cool app's description",
walletConnectProjectId: "your-wallet-connect-id",
rpcUrls: {
ethereum: "",
shape: "",
base: "",
arbitrum: ""
}
}
</script>
<script type="module" crossorigin src="https://cdn.transientlabs.xyz/embeds/1.1.4/index.js"></script>
<link rel="stylesheet" crossorigin href="https://cdn.transientlabs.xyz/embeds/1.1.4/index.css">
🛠 Things You Can Customize in the Head Code:
mode – Set the app to "light" or "dark" mode depending on your site’s style.
appName – The name that shows up in the wallet connection prompt (this helps build trust with users).
appDescription – A short description of your app, shown alongside the app name when a wallet is connecting.
🔐 WalletConnect Project ID: This is like a unique connection key that lets people connect their crypto wallets safely. You can get one free at cloud.reown.com.
⚡ RPC URLs: These are how your app talks to different blockchains (Ethereum, Base, etc.). You don’t need to change them unless your site has high traffic, in that case, we recommend setting up private endpoints through Alchemy for better speed and reliability.
2. Code for the <body> of your page
Paste this wherever you want the auction and wallet connect button to appear (you can usually use a code block or embed widget):
<style>
/* Optional: add your own custom styles or override variables below */
</style>
<tl-connect-button variant="outline"></tl-connect-button>
<tl-auction
chain-id="8453"
contract-address="0x2b4b2d47c8db371b006e3df14245c12193a185dc"
token-id="1"
auction-house-address="0x6f66b95a0c512f3497fb46660e0bc3b94b989f8d">
</tl-auction>
🔁 What You’ll Need to Replace:
token-id – Replace 1 with the actual token ID of the piece you’re auctioning.
contract-address – Replace with the address of your NFT contract.
chain-id – Use the ID that matches the chain your NFT was minted on (see below).
🧭 Chain ID Reference:
Chain | Chain ID |
Ethereum | 1 |
Shape | 360 |
Base | 8453 |
Arbitrum | 42161 |
🎨 How to Customize Your Auction App
Option 1: Easy Mode (CSS Variables)
Copy and paste the following into the <style> section in the body (right above the buttons) to change things like fonts, colors, and spacing. You can tweak these values or leave them as-is.
:root {
--radius: 0.5rem;
--title-font: "Inter";
--background: #ffffff;
--foreground: #111111;
--primary: #5c6ac4;
--border: #dddddd;
}
[Full list of CSS variables here]
[Full list of CSS variables here]
: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);
}
Option 2: Advanced Mode (Custom Class Overrides)
If you’re comfortable with CSS, you can target specific parts of the auction app using the following class names:
Examples:
.tl-connect-button {
background-color: #000;
color: #fff;
font-weight: bold;
}
.tl-auction-submit-bid-button {
border-radius: 12px;
}
[Full list of class overrides here]
[Full list of class overrides here]
.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-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-auction-tx-title
.tl-auction-tx-dialog-root
.tl-auction-tx-spinner
.tl-auction-tx-text
.tl-auction-countdown-root
.tl-auction-countdown-text-group
.tl-auction-countdown-label
.tl-auction-countdown-time
🛠 Where to Paste Everything (Platform Guide)
🧱 Webflow
Head Code: Go to Site Settings → Custom Code → Head and paste it there.
Body Code: Use an Embed block on your page. Paste the <style>, <tl-connect-button>, and <tl-auction> inside.
✅ This has been tested and works beautifully in Webflow.
🔳 Squarespace
Head Code: Go to Settings → Advanced → Code Injection → Header.
Body Code: Use a Code Block in the section where you want the auction. Paste everything from the <style> to the custom elements.
⚠️ Squarespace may sanitize some tags in certain templates. If something doesn’t show, try using a different block or ask support to enable custom scripts.
🧩 Wix
Head Code: Use the Tracking & Analytics section to inject custom code into the head.
Body Code: Use the Embed a Widget element, or enable Dev Mode (Velo) for more control.
🔒 Some Wix plans restrict full custom JS/CSS — check your plan if the auction doesn’t show.
📝 WordPress
Head Code: Use a plugin like Insert Headers and Footers or add to your theme’s header.php.
Body Code: Use the Custom HTML Block in your page or post editor. Paste the full body snippet including <style>.
✅ Recommended plugin: Insert Headers and Footers
🧩 Optional: Listen for Custom Events
If you want to add more custom behavior (like triggering animations or tracking events), the embed fires these:
tl-wallet-connect
tl-wallet-disconnect
tl-auction-bid
tl-buy-now
tl-auction-settle
Ask your developer (or Transient) for help with using these events if you’re not familiar with JavaScript.
🔚 That’s It!
With just a few copy-pastes, you can drop a fully functional auction directly into your site. If you’re using another platform not listed above or need help, feel free to hit us up in our Intercom Support Center!