# Embedding the VU Customizer

## Adding the VU Customizer to your Site

The below code must be added to all pages that will be personalized through VU Custom. In the subsequent instructions, this code will be referred to as the JS Snippet. 

<pre><code><strong>Unset 
</strong><strong>&#x3C;script 
</strong>id=“customizer” 
src=“https://vu-customizer.s3.amazonaws.com/production/main.js” 
data-variant=“{VARIANT}” 
>&#x3C;/script> 
</code></pre>

The JS snippet calls VU OS to fetch the corresponding product configutation (template). It determines which configuration to load based on the variant ID passed through as {VARIANT}. The snippet should be placed on the product display page for all products that require customization, and can additionally be placed elsewhere for other entry/access points to the customizer.

The typical method for implementing this JS snippet involves using a ruleset in the Shopify code to determine when to include the snippet. This ruleset checks for a tag, metafield, or other identifiers from the product setup page in the Shopify admin.

For example, you could tag every personalized product with the tag “VU CUSTOM”, and then inside the product display page, write a method that checks for this tag and inserts the JS snippet if the **VU CUSTOM** tag is true.&#x20;

This implementation methodology enables scalability as future products are added to the program and simplifies the process of toggling the widget for an existing product. To disable the widget, remove the **VU CUSTOM** tag from the product.

#### **Making Product Selections prior to entering the Customizer**

It is common for selections to be made outside of the customizer prior to loading the product within it. Typical use-cases can include the selection of color or size outside of the customizer, especially if a change in selection correlates to a different Variant being customized and purchased. Brands may do this for different reasons as part of their site-strategy. VU recommends discussing overall strategy around customizer access on the site in the Discovery phase of your brand's implementation, as the strategy may lead to different template configuration outcomes.&#x20;

Should the variant change as selection are made prior to entering the customizer, it is important to re-initialize the customizer so it can load with the right product context as many variants can be associated with the same product template. Doing so helps ensure as a customer switches from a product to red, the customizer loads with the product showing as red.

To achieve a re-initialization of the customizer, brands can refer to the below guidelines around the `changeVariant` method :

**Method Definition**\
`changeVariant(variantID, preCallback = null, postCallback = null)`\
\
**Description**\
This method updates the current variant to a new variant. It also provides hooks to execute optional logic before and after the variant change using callback functions.\
\
**Calling**\
`customizer.changeVariant(variantID);`\
\
**Parameters**\
• `variantID` The value representing the variant to which the system should switch. This is the primary input required for the method and is applied during execution.\
• **preCallback (optional)**\
&#x20;A function that is executed before the variant is changed. If not provided, it defaults to `null` and is skipped.\
• **postCallback (optional)**\
&#x20;A function that is executed after the variant has been updated. It is typically used for follow-up actions such as updating the UI, triggering events, or performing additional processing. If not provided, it defaults to `null` and is skipped.

{% hint style="info" %}
The widget will not appear immediately after adding the .JS snippet, as VU Custom developers must also complete some setup in VU Admin.
{% endhint %}

<br>