Transient Labs Developer Docs
  • 👋Welcome!
  • 📑TL Creator Contracts
    • Creator Contracts Overview
    • Implementation Contracts
      • v3.x.x
      • v2.x.x
      • v1.x.x
    • Smart Contract Documentation
    • Common Features
      • Access Control
      • Royalties
      • Story Inscriptions
      • NFT Delegation
      • BlockList
    • ERC721TL
    • ERC1155TL
    • Shatter
    • ERC7160TL
    • Doppelganger
    • Collector's Choice
  • ⛔BlockList
    • BlockList Overview
    • Implementation Contracts
    • Deployments
    • Smart Contract Documentation
  • 🔖Story Inscriptions
    • Story Inscriptions Overview
    • Story Inscription Format
    • Smart Contract Documentation
  • 🖼️T.R.A.C.E.
    • T.R.A.C.E. Overview
    • Record Schema
    • Implementation
    • Smart Contract Documentation
      • TRACE
      • TRACERSRegistry
  • 🥞Stacks
    • Stacks Overview
    • Deployments
    • Smart Contract Documentation
  • 🎨Dynamic Art
    • Dynamic Art Overview
    • How to Create
    • How to Display
  • 🔗Integrations
    • Deploying TL Contracts
    • NFT Delegation
    • Integrating with Marketplaces
    • Metadata Structure
    • Inheriting TL Contracts
    • Onchain Art
    • Embeddable Components
  • ❔Miscellaneous
    • Supported Blockchains
    • tl-sol-tools
    • Licensing
    • Batch Upload Secret JSON
Powered by GitBook
On this page
  • Usage
  • In the head, add...
  • In the body add...
  • Style Overrides
  • Custom Events
  1. Integrations

Embeddable Components

Latest Version: 1.1.4

Usage

Use in any webpage!

In the head, add...

<script>
  window.tlConfig = {
    mode: "light", // or "dark"
    appName: "My Cool App",
    appDescription: "My cool app's description",
    walletConnectProjectId: "wallet-connect-id",
    rpcUrls: {
      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
    }
  }
</script>
<script type="module" crossorigin src="https://cdn.transientlabs.xyz/embeds/v[version]/index.js"></script>
<link rel="stylesheet" crossorigin href="https://cdn.transientlabs.xyz/embeds/v[version]/index.css">

In the body add...

<style>
  /* add any style overrides here*/
</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>

Style Overrides

You need to add the style overrides in the body You'll override css variables for main colors and style. There are also classes that you can override for more control (advanced).

CSS Variables:

: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:

.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

Custom Events

You can listen to custom events that get fired by the apps in order to make custom logic. Each event has custom data passed in the detail field

tl-wallet-connect
tl-wallet-disconnect
tl-auction-bid
tl-buy-now
tl-auction-settle
PreviousOnchain ArtNextSupported Blockchains

Last updated 13 days ago

For a high-traffic app, you'll want to use dedicated rpc urls. We suggest using Alchemy. Here's a guide on how to get started (just follow up to the end of step 2):

You can register for a wallet connect project id here:

🔗
https://www.alchemy.com/overviews/private-rpc-endpoint
https://cloud.reown.com/