search

Embeddable Components

Latest Version: 1.2.1

hashtag
Usage

Use in any webpage!

hashtag
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/v1.2.1/index.js"></script>
<link rel="stylesheet" crossorigin href="https://cdn.transientlabs.xyz/embeds/v1.2.1/index.css">

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): https://www.alchemy.com/overviews/private-rpc-endpointarrow-up-right

You can register for a wallet connect project id here: https://cloud.reown.com/arrow-up-right

hashtag
In the body add...

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

Custom Class Overrides:

hashtag
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

PreviousOnchain ArtNextSupported Blockchains

Last updated