Sell on your own site using embeds

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.

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

  • Without art: add “Connect Wallet” and mint details, and handle art display separately

  • Art only: display your art without either “Connect Wallet” or mint details

  • Compact: a minimal display featuring everything

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 gm@highlight.xyz.

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)

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;
};

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
	});
  })

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

Last updated