# Button Integration ## Overview You can integrate your products with a 3D Button (leading to the 3D View) and an AR Button (leading to the AR View via QR code on desktop or open camera on a smartphone/tablet). We recommend placing the 3D & AR Button underneath the product gallery or on the top right corner of the product image for the best user experience. Simply upload all of your products into the Mazing.World. Then integrate our script at one position on your webshop or website. The script automatically tries to match an SKU with the current shown product of the shop and renders the 3D/AR buttons.

## Integration Example ### Step 1 - Check SKU structure and remember SKUs Check the SKU structure of your webshop in one of your product URLs, as an example: ``` webshop.com/product/xyz123abc ``` In this example, the SKU would be specified as **xyz123abc** after the last occurrence of **'/'** in the product URL of the shop. There can also be various other formats. ``` webshop.com/p/xyz123abc webshop.com/p/xyz123abc/abc webshop.com/xyz123abc ``` ### Step 2 - Upload your products Upload your products according to your SKU names to the **Mazing.World**. In this example, we upload the product **xyz123abc,** named exactly like we found in the URL parameter of our webshop.

Upload the project with matching SKU name

### Step 3 - Integrate Script Add the mazing script in the head part of your webshop or homepage. ``` ... ``` ### Step 4 - Integrate Custom Implementation Add the following script tag template to the end of your page body.

<body>

...
    <script>
        mazing(
            {
                customerName: 'TODO',
                buttonConfiguration: {
                    customStyle: `
                        .placeholder{}
                    ` ,
                    placementSelector: '.TODOCLASS',
                    threedBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in 3D'
                    },
                    arBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in AR'
                    }
                },
                getSKU: () => {
                    return 'TODO LOGIC TO GET SKU, from URL, Code or GTM';
                }
            }
        )
    
    </script>
</body>

### Step 5 - Find your script fields See [#api-details](#api-details "mention") below for a full reference of all possible values. The most important values to be found are customerName, placementSelector, and getSKU(). #### customerName Assume you have an online shop that is specified by the **customerName** as "**flowershop**". You can find this in the Mazing.World below your products.

customerName in the Mazing.World below product

***customerName: 'flowershop'*** *** #### getSKU() The SKU names are specified inside your shop url like: So the SKU is the last parameter in the URL. This would lead to a code for getSKU like:

 getSKU: () => {
      const url = window.location.href;
      const parts = url.split("/");
      const sku = parts.pop();
      return sku;
 }

This takes the last URL parameter split by **'/'** and returns it as SKU. *** #### placementSelector The last field you will need to find is the placementSelector. After a DOM check of all our shop elements, we want to place the Mazing buttons below our product gallery. We check the code and see that the product gallery is either specified by the id **product-gallery** or the class **prod-gall** uniquely. ``` ....

... ``` Wechoose to use the id # product-gallery.\ \ \&#xNAN;***placementSelector: '#product-gallery'***\ \&#xNAN;*or*\ ***placementSelector: '.prod-gall'*** *** #### Final Demonstration Code Now you can have a look at the full integrated code and how it could look like: ``` ... ``` *** ### API Details **threedBtn**\ You can specify if the 3D button is shown and add a custom text. Also you can enable and disable the shipped icon.\ \ **arBtn**\ You can specify if the 3D button is shown and add a custom text. Also you can enable and disable the shipped icon. **customStyle**:\ You can override or extend all CSS styles and classes you can see in this class:\ Here is an example how this could look like ``` buttonConfiguration: { customStyle: ` .mazing-threed-btn-text { color: #167f77; } .mazing-ar-btn-text { color: #167f77; } .mazing-button-container { justify-content: center; } @media only screen and (min-width: 500px) { .mazing-button-container { justify-content: start !important; } } ` , ``` **placementSelector**\ Can include either .class or #id selectors. The Mazing button container will be appended as a child to this element.\ \ **customerName**\ Your assigned customer name in the **Mazing.World.** You can find it below your Mazing.World products.

The yellow marked text is your customer name.

\ **getSKU Callback**\ Here you can specify how your unique identified product ID is found. Either you can use Google Tag Manager to return "{{TAG\_ID}}" or you can make your own custom code and parse your shop URL to extract SKUs, etc. ``` getSKU: () => { const url = window.location.href; let product = 'none'; const pattern = /\/(\d+)\//; const match = url.match(pattern); if(match){ product = match[1]; } return product; } ``` ## Refresh SKU To change the `mazing.link` so that it leads to a different project, you can use the `mazingRefreshSKU()` function. Simply extend your integration script as shown in the example below. ``` function attachVariantClickListeners(variantContainer) { // Find all variant option labels inside the container const variants= variantContainer.querySelectorAll('label'); // Go through each variant option variants.forEach(label => { // When a variant is clicked... label.addEventListener('click', () => { // Wait a short moment, then update the 3D view with the new product setTimeout(() => mazingRefreshSKU(yourNewSKU, yourWorldCustomerNamer), 100) }); }); } ```