Quick Start

Step 1

<script lang="application/javascript" src="cz.drrv.co/demo/customize-widget.js"></script>

On your target website, determine a page where you would like to show the customization experience. Load the customization widget using a script tag or a dynamic method.

Step 2

<div id="customize__placeholder"></div>

Provide an empty placeholder DIV element that will contain the customization experience.

Step 3

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function InitializeWidget() {
        CustomizeWidget.default.createWidget({
            product: 'WATCH360',
            apiKey: '62SH6h0VIbRh4kHuEkjbHiErBBQGwOmZfYfYd6miqbiABsWrgi4AhfCStHnbNUawwV8wQ2q2foWHVtaHXd5vYFIno0nxN0cT',
            container: document.querySelector('#customize__placeholder'),

            on: {
                addToCart: function (recipe) {
                    alert('Recipe saved as ' + recipe.id + ' at ' + recipe.location);
                },
            },
        });
    });
</script>

TIP

Note: the example uses a demo API key. Replace it with the one created within the Customizer administration website Account area.

Initialize the widget by providing the target product ID and authorization API key.

TIP

Take a peek at the addToCart helper that was provided in the widget initialization code. In real life, this is where the product and its associated recipe would be stored in the cart so they could be sent along to the backend system for the eventual fulfillment.

Done!

Test out customizer experience within your site.

What's going on here?

The customize-widget.js JavaScript file that we loaded in the example is the Single-Page-Application (SPA) that contains the Customizer Reference Implementation code. The code for this application can be in the Git repository above. The app contains all the necessary pieces to talk to the Customizer platform and load the product blueprint, create the front end user experience by analyzing the blueprint and extracting available customization options, and provides a method for generating configured product recipes.