👩‍💻Use embeds to build custom mint sites

Learn how to embed a Highlight sale into your own website

Once you've deployed a collection on Highlight, you can embed the sales card into your own website simply by copying and pasting a few lines of code from the collection management page. You can either use it as-is out of the box, or you can modify and customize the embed to create a completely novel minting experience.

Embed a mint card

1. From the tools dashboard, click on the collection you would like to embed. This will take you to the collection management dashboard.

2. On the management module, select "Embed mint page" at the top of the screen.

There are two options for embedding your project: mint card or mint page.

A mint page is a more oversized style, taking over the full page of your website. This will require less work on your end, but also may be less customizable than you'd like in terms of formatting. It looks like the following:

A mint card is smaller, taking up just a portion of the page, and has multiple different options within it (ranging from super compact to full). You can select from among these in the UI, and preview what they'll look like as you do.

1. Copy the code of the preferred format and paste it into the website editor. If you chose the mint card format, you can decide where in your HTML you'd like it positioned.

2. The mint module for your specific collection should now appear on your custom site.

Customizing your mint card

The background color, text color, accent color and font family can be customized to match the design of your site. A web preview will display on the right-hand side to show how your project will be displayed.

Additional embed options for the mint card include:

• Default: full embed card with artwork, “Connect Wallet,” and mint details (data-widget="highlight-mint-card")

• Without art: add “Connect Wallet” and mint details, and handle art display separately (data-widget="highlight-mint-card" and data-template="no-art")

• Art only: display your art without either “Connect Wallet” or mint details (data-widget="highlight-mint-card" and data-template="art-only")

• Compact: a minimal display featuring everything (data-widget="highlight-mint-card" and data-template="compact")

• Button only: display just a single mint button, with no surrounding detail. Use this to build completely custom pages. (data-widget="highlight-mint-card" and data-template="button-only")

• Connect button only: show only the sign in/connect button. Use this to post a separate login button on the site, and listen for sign in events described below (data-widget="highlight-connect-wallet")

How do I manage embeds?

You can update embeds by editing the mint directly from the tools dashboard. The embed code will remain the same and automatically update on your site.

If you have any questions, reach out to us at [e-mail].

Additional customization options

Styling with data-styles

For more control over the appearance of your widgets, the data-styles attribute allows you to inject custom CSS directly. This attribute expects a JSON string that defines styles for specific parts of the widget. Currently, you can only customize the root element, which represents the outermost container of your widget.

<div data-widget="highlight-mint-card"
	data-mint-collection-id="..."
	data-styles="{ root: { maxWidth: '100%', '@media (min-width: 800px)': { maxWidth: 600 } } }"
></div>

Note: Ensure that your JSON string is properly formatted and escaped.

The JSON structure for data-styles resembles typical JavaScript object notation used for styles in Emotion (a popular CSS-in-JS library)

Build your own reveal screen

To customize your project even further, you can hide the default reveal screen displayed by the embed using the data-hide-success-modal="true" attribute. From there, you can use the events described below to listen for updates and details about the status of a mint and implement your own reveal experience.

Dark mode

You can also opt for a dark mode version of the widget but using the data-dark-mode="true" attribute.

Implementing a Custom Loader

Provide a smoother user experience with a custom loading indicator using the data-use-content-as-loading="true" attribute. This ensures that the loader is displayed while the widget data is loading, even before the widget's own scripts and styles are fully loaded.

  <style>
  .card-loader {
   /* Add your loader styles here */
  }
  </style>
  ....
  <div data-widget="highlight-mint-card"
	data-mint-collection-id="..."
	data-use-content-as-loading="true"
>
	<div class="card-loader">loading</div>
  </div>

Events

The embed widget emits custom events that can be used to enhance the user experience by responding to specific actions, such as token minting and metadata reveal for Series and Generative collections. Below are the details of the events and how to listen to them in your code.

Custom Events Emitted by Embed

• highlight:minted: This event is emitted when a token is minted.

interface MintEvent extends CustomEvent {
  detail: {
    collectionId: string;
    contractAddress: string;
    chainId: number;
    txHash: string;
    tokenIds: string[];
  };
}

• highlight:token-revealed: For Series and Generative Series, this event is emitted with the metadata details of the image upon reveal.

interface TokenRevealEvent extends CustomEvent {
  detail: {
    collectionId: string;
    contractAddress: string;
    chainId: number;
    tokenId: string;

    metadata: Metadata;
  };
}

type Metadata = {
  image: string;
  animation_url: string;
  attributes: { trait_type: string; value: string }[];
  name?: string;
  description?: string;
};

• highlight:sign-in: This event will be emitted whenever users use an embed to connect their wallet or sign in. Listening for this will allow you to update parts of your own site that should respond to the users' authentication state.

interface SignInEvent extends CustomEvent {
  detail: {
    walletAddress: string;
    ensName: string | null;
  };
}

• highlight:sign-out: This event will be emitted whenever users disconnect their wallet or log out.

interface SignOutEvent extends CustomEvent {
  detail: null;
}

Listening to Events

You can listen to these events directly on the window object to perform actions. Here's an example of how to set up listeners for both highlight:minted and highlight:token-revealed events:

  window.addEventListener("highlight:minted", event => {
	console.log("mint event", {
	  event
	});
  })
  window.addEventListener("highlight:token-revealed", event => {
	console.log("reveal event", {
	  event
	});
  })

Emitting events

You may want to build your own UI for selecting mint quantities, and even for selecting a generative seed (imagine, for example, a project where you want collectors to use your site to design their own NFT and mint it). With the Highlight embed, you can do that. Once you've built the experience you want, you can update the embed to reflect your users' choices by emitting an event indicating the new selected mint quantity or seed.

interface UpdateMintStateEvent extends CustomEvent {
  detail: {
    collectionId: string;
    quantity: number;
    seed: string;
  };
}

Simply emit these events on your page, and the embed will listen. When users press the mint button, the transaction details will be reflected properly.

window.dispatchEvent(new CustomEvent(
  `highlight:update-mint-state`,
  {
    detail: {
      collectionId: mintHighlightId,
      quantity: totalMints,
      seed: exampleSeed,
    },
  }
));

Note that the seed value should be encoded into bytes data. You can use the AbiCoder package from ethers.js to encode it, for example by calling abiCoder.encode("my custom data"). Then, from hl-gen.js, that value will be made available to you in your environment as hl.tx.customMintData, where you can simply decode it back from the encoded version and use it as an input into your generative script.

---

For a practical demonstration, refer to the interactive demo that showcases how these events can be integrated and utilized in a web page.