Add embedded elements to your online storefront

  • Updated

When creating an online storefront, generate embedded elements to add directly to your website. Embeds can help you maintain more control over your individual product pages while still connecting customers to booking and cart functionality.

Note: Embed generation is only available for published storefronts. Publish your storefront to enable embed generation.

Overview

You can generate embed codes for the following storefront elements:

  • Script
  • Cart button
  • Individual product cards
    • Booking widget
    • Product card

Add scripts once to any page where you want to use embeds.

Add the embed script

To add the embed script to your website:

  1. Navigate to Manage > Online Storefronts.
  2. Click Edit storefront for the storefront you want to update.
  3. Click the Embeds tab.
  4. In the Add script section, copy the script tag.
  5. Add the script tag once to any page where you want to use embeds.

Create an embedded cart button

To create a cart button embed:

  1. Navigate to Manage > Online Storefronts.
  2. Click Edit storefront for the storefront you want to update.
  3. Click the Embeds tab.
  4. In the Embed cart button section, click the Create cart button button.
  5. In the modal overlay, select your preferred settings from the Style, Size, and Display dropdowns.
  6. Copy the generated code.
  7. Paste the code into your website’s HTML.

Create an embedded product

To create a product embed:

  1. Navigate to Manage > Online Storefronts.
  2. Click Edit storefront for the storefront you want to update.
  3. Click the Embeds tab.
  4. In the Embed products section, click the Create embed button for the product you want to embed.
  5. In the modal overlay, select the type of embed you want to use:
    • Booking widget: Embeds a booking widget directly on your product page. Customers complete the booking steps directly on the page.
    • Product card: Embeds a product card with a Book button. Customers complete booking configuration in the Lightframe overlay.
  6. Copy the generated code.
  7. Add the code to your website.