Skip to main content

Quick Start Guide

This guide provides a quick way to integrate the GLOW JavaScript Library into your website, typically in under an hour. You'll quickly enable your users to view stunning 3D fireworks simulations and design custom shows using GLOW's interactive Show Builder.

tip

This setup allows for a fast and simple implementation, but for the best customer experience, we highly recommend our advanced integration. Embedding GLOW features directly into your product listings and detail pages creates a more immersive shopping experience and helps drive more sales.

Improvements coming soon!

We plan to merge the catalog browsing experience directly into the Show Builder application for a seamless experience. This means soon there will only be one page to set up. If you plan to implement this approach now, be aware the catalog page you create will need to be removed in the near future.

Troubleshooting

Something not working? Always check your browser's JavaScript console for informative error messages provided by GLOW.

Step 1: Create the Pages​

You'll need two new pages on your website:

  1. Catalog Page – Displays a list of fireworks with preview buttons.

    • Example URL: yourdomain.com/show-builder-catalog
    • Can include your existing header/footer and page styles.

  2. Show Builder Page – Dedicated page for users to build custom fireworks shows.

    • Example URL: yourdomain.com/show-builder
    • Should be a blank page, as the Show Builder application automatically fills the entire page for the best user experience.

Step 2: Set Up the Catalog Page​

On the new catalog page, paste the following code where you want the catalog to appear (somewhere in the <body>). This code creates a container element for the product listing, then uses the GLOW library to register your retailer ID and generates the catalog.

note

By default, the style option applies a blue theme, providing a nice starting point for customization. To better match your site's design, you can adjust the styling as needed. We provide two example themes: one optimized for dark-themed websites and another suited for light-themed layouts.

Important

The code contains a placeholder retailer ID, and a URL pointing to the Show Builder page. These must be replaced with correct values. The affected lines are highlighted.

show-builder-catalog.html
<div class="glow-catalog"></div>

<script src="https://glowfireworks.com/sdk/js/v1"></script>
<script>
  glow.initialize({
    retailerId: 'your_retailer_id', // TODO: Replace with your retailer ID
    themeColor: '#0082e6'           // TODO: Adjust to match your brand color
  });
  // Includes dark-themed styling
  glow.buildCatalogUI({
    container: '.glow-catalog',
    // TODO: Update the "showBuilderUrl" value with the correct URL.
    showBuilderUrl: 'https://your-domain.com/show-builder',
    includeDurations: true,
    // TODO: Customize styles to match your website design.
    style: {
      primaryButtonBgColor: '#0077d3',
      primaryButtonBgColorHover: '#348ef0',
      primaryButtonTextColor: '#ffffff',

      productBgColor: '#000000',
      productTextColor: '#ffffff',
      productBorderColor: 'transparent',
      productButtonBgColor: 'transparent',
      productButtonBgColorHover: 'rgba(255, 255, 255, 0.15)',
      productButtonTextColor: '#ffffff',
      productButtonBorderColor: '#ffffff',

      instructionsBgColor: '#000000',
      instructionsTextColor: '#ffffff',
      instructionsBorderColor: '#ffffff',

      footerBgColor: '#1c1f21'
    }
  });
</script>

Step 3: Set Up the Show Builder Page​

On the new Show Builder page, paste the following code in the <body>. This code uses the GLOW library to register the retailer ID and generate the Show Builder application.

Important

The code contains a placeholder retailer ID, and a URL pointing to the catalog page. These must be replaced with correct values. The affected lines are highlighted.

show-builder.html
<script src="https://glowfireworks.com/sdk/js/v1"></script>
<script>
  glow.initialize({
    retailerId: 'your_retailer_id', // TODO: Replace with your retailer ID
    themeColor: '#0082e6'           // TODO: Adjust to match your brand color
  });
  // TODO: Update the `catalogUrl` value with the correct URL.
  glow.createShowBuilder({ catalogUrl: 'https://your-domain.com/show-builder-catalog' });
</script>

When users visit this page, they'll see the full-page interactive Show Builder application.

Final Checklist​

  • Ensure the GLOW <script> tag is included, and glow.initialize() is called with your retailer ID.
  • Confirm the URLs linking the pages together have been updated.
  • Test both pages to confirm:
    • Expected fireworks appear on the catalog page.
    • Preview and add-to-show buttons work correctly.
    • After adding fireworks, a footer link appears that navigates to the Show Builder application.
    • Confirm Show Builder correctly displays the added products.
    • In the Show Builder application, clicking your logo takes you back to the catalog page.

Promoting the 3D Show Builder​

To maximize engagement, it's essential to make the 3D Show Builder easy to discover. We recommend the following promotional strategies:

  • Add a main navigation link: Include a direct link to the 3D Show Builder in your website's main navigation. In most cases, the catalog page serves as the best entry point.
  • Homepage callout: Feature a high-visibility banner or other callout on your homepage to introduce customers to the 3D Show Builder.
  • Leverage marketing channels: Promote the experience across social media, email campaigns, and print materials to drive traffic and awareness.

Troubleshooting​

Something not working? Always check your browser's JavaScript console for informative error messages provided by GLOW.