Embedding collections on your site

Once you've deployed a collection on Highlight, you can integrate and distribute the token on your site. Both mints and auctions are embeddable.

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"

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.

A mint card is smaller, taking up a fraction portion of the page.

3. Copy the code of the preferred format and paste it into the website editor.

4. The mint card of the page should now appear on your custom site.

Customizing your mint card

Mint card background color, text color, and text font family can be customized based. A web preview will display on the right-hand side to show how your project will be displayed. /

Additional embed options 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 [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)

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 Series. 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: { trail_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.