Instance Methods
Use the global glow object to interact with the library via its methods.
This library uses the "named arguments" pattern, that is each method takes a single argument which is an object of key/value pairs representing the real arguments. This keeps the code highly readable and allows arguments to be passed in any order.
Something not working? Always check your browser's JavaScript console for informative error messages provided by GLOW.
Methods
Reference
glow.initialize({ retailerId, themeColor? })
initialize
To use the library, you first must initialize it with a valid retailer ID. This ensures the correct logo is displayed everywhere, and that the correct product details are fetched. If you don't have a retailer ID yet, please contact us.
Example:
glow.initialize({ retailerId: 'your_retailer_id' });
Optionally, you may provide a custom "theme color" to style the application - this will commonly be one of your brand colors. If you don't pass a custom theme color, the default is a vibrant blue.
Most CSS color formats are accepted. For the rgb(), hsl(), etc. formats, you must use commas to separate the values (modern syntax with just spaces currently won't work). If you provide a color with alpha, the alpha channel will be ignored. If you're passing a custom theme color and you're still seeing the default blue, check the browser console - there may be an error with your color format.
Note that your specified theme color might not be used exactly as given - it may be automatically adjusted slightly for improved contrast in certain areas. This is especially true of very dark colors approaching black. The goal is that any given color will look good everywhere it is used, and a themed GLOW application will match your website much better than a non-themed version.
Example with Theme Color
// Apply a bright purple theme color
glow.initialize({ retailerId: 'your_retailer_id', themeColor: '#b83dd7' });
If you call any of the following functions before calling glow.initialize, an error will be thrown.
glow.previewProduct({ brandId, productId })
previewProduct
Opens a modal player on the current page, displaying a 3D simulation preview of the specified product. The modal includes built-in controls for the user to close it. Ensure you design and style a button within your website to trigger this preview. When the button is clicked, call this function to open the product preview.
Example:
glow.previewProduct({ brandId: 'brand_id', productId: 'product_id' });
glow.previewShow({ showId })
previewShow
Opens a modal player on the current page, displaying a 3D preview of one of your official shows. This function integrates seamlessly into your shopping experience, allowing users to view complete show designs without leaving the page. The modal includes built-in controls for the user to close it. Ensure you design and style a button within your website to trigger this preview. When the button is clicked, call this function to open the show preview.
Example:
glow.previewShow({ showId: '2ZH232T' });
glow.closePreview()
closePreview
Typically, manually closing previews is not necessary.
Closes any active modal previews, including product and show previews. It's safe to call this function even if no preview is open – doing so has no effect. While users generally close their own previews, in single-page applications (SPAs) where navigation does not trigger a page reload, it's best to invoke this function during route transitions. This ensures that previews do not follow users as they navigate different parts of your site.
glow.addProductToShow({ brandId, productId })
addProductToShow
Adds a product to a user's show. It is expected that you create and style the button to perform this action, and simply call this function on a click event.
This function is asynchronous and returns a promise that resolves when the product has been successfully added. It's possible this can fail and the promise will reject, for example due to storage permission issues. GLOW will automatically display an error message on screen, so all you need to do is ensure your UI displays the correct in-show status.
Example:
// TODO: Optimistically update the product UI to display as "in show",
// before calling the function below. This makes the UI feel snappy.
glow.addProductToShow({ brandId: 'brand_id', productId: 'product_id' })
.catch((reason) => {
// TODO: Undo the optimistic update, indicating the item is not in the show.
});
glow.createShowBuilder({ catalogUrl })
createShowBuilder
Creates a full-page iframe displaying the Show Builder. It is expected that you call this on a dedicated, and otherwise empty page.
catalogUrl is expected to be a URL string that points to a page on your site with the list of items available to the Show Builder. This URL is used by the Show Builder to provide links back to that page.
Example:
glow.createShowBuilder({ catalogUrl: 'https://yourdomain.com/show-builder-catalog' });
Note that calling this method has some additional side effects:
- Sets the page's background color to black. This is done because some browsers pick up on the background color for theming purposes, and/or feature rubber-band scrolling that can allow the background color to be visible around the edges of the Show Builder. This is least jarring to the user if the background color is black.
- Ensures that your page contains the following viewport meta tag, modifying the existing one if needed, to make sure the Show Builder application works well on mobile devices.
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
For single-page-app style websites where navigations don't result in page reloads, it can be necessary to "teardown" the Show Builder and revert the document back to its original state when navigating away from the Show Builder page. To accommodate this, glow.createShowBuilder() returns a unique teardown function that you can call to remove the Show Builder application from the document, and revert everything back to the state it was in before calling glow.createShowBuilder(). Calling this teardown function more than once simply does nothing.
glow.isProductInShow({ brandId, productId })
isProductInShow
Consider using glow.subscribe.isProductInShow which performs this same function and also sets up a subscription for live updates. Use this function only if you truly don't need a subscription, which is rare.
This function returns a promise that resolves to a boolean:
trueif the specified item is in the user's show.falseif not in the user's show.
You can use this for one-off routines where you just need to check the current status of an item.
Example:
glow.isProductInShow({ brandId: 'brand_id', productId: 'product_id' })
.then((inShow) => {
if (inShow) {
// update UI, e.g. mark the product as added to the show.
}
});
This check may fail, causing the promise to reject – for example, due to strict browser storage settings. Unlike other functions, no error is displayed, as the user likely hasn't interacted with the UI directly and may not need to be notified. If you need to handle this error yourself, see Error Handling for an example.
glow.play()
play
Typically programmatic play/pause functionality is not needed.
Triggers the Show Builder to begin/resume playing. This can be useful for highly custom use cases. This command only makes sense after calling glow.createShowBuilder(). If the Show Builder isn't yet ready to play, the command will be queued and the Show Builder will play as soon as it is ready.
glow.pause()
pause
Typically programmatic play/pause functionality is not needed.
Triggers the Show Builder to pause playback. This can be useful for highly custom use cases. This command only makes sense after calling glow.createShowBuilder(). Similar to glow.play(), the pause command will be queued if the Show Builder isn't fully initialized at the time it is called.