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>