---
description: With this script, you can integrate all your Mazing.World products in bulks.
---

# 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).&#x20;

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.



<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FqxSI1mpM5WTgU5kFLgPS%2FIntegration-best-practice%20Kopie.png?alt=media&#x26;token=43b1722a-35a2-4e88-92c2-c7ca5294a2c6" alt=""><figcaption><p>A succesful script integration</p></figcaption></figure>

## 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.

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FgzBNES5Wia2y6KqfBqq2%2FScreenshot%202023-11-17%20141806.png?alt=media&#x26;token=41872a66-4258-481c-a042-c374b25cd928" alt=""><figcaption><p>Upload the project with matching SKU name</p></figcaption></figure>

### Step 3 - Integrate Script

Add the mazing script in the head part of your webshop or homepage.

```
<head> 
 ... 
<script type="text/javascript" src="https://cdn.mazing.link/mzg-in.js"></script>
</head>
```

### Step 4 - Integrate Custom Implementation

Add the following script tag template to the end of your page body.

<pre><code>&#x3C;body>

...
    &#x3C;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';
                }
            }
        )
<strong>    
</strong>    &#x3C;/script>
<strong>&#x3C;/body>
</strong></code></pre>

### 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().&#x20;

#### 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.

<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2FGxaKUXjDGgBOnQa4IrNz%2FScreenshot%202023-11-17%20144158.png?alt=media&#x26;token=011f0a3a-945a-428f-95e4-9b30e315fa8b" alt=""><figcaption><p>customerName in the Mazing.World below product</p></figcaption></figure>

_<mark style="color:purple;">**customerName: 'flowershop'**</mark>_

***

#### getSKU()

The SKU names are specified inside your shop url like: https://flowershop.com/product/**xyz123abc**\
So the SKU is the last parameter in the URL. This would lead to a code for getSKU like:

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

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.&#x20;

```
<html>
....
    <div id="product-gallery" class="prod-gall">
        <img src="img1">
        <img src="img1">
    </div>
...
</html>
```

Wechoose to use the id # product-gallery.\
\
&#xNAN;_<mark style="color:purple;">**placementSelector: '#product-gallery'**</mark>_\
&#xNAN;_&#x6F;r_\
_<mark style="color:purple;">**placementSelector: '.prod-gall'**</mark>_

***

#### Final Demonstration Code

Now you can have a look at the full integrated code and how it could look like:

```
<body>

...
    <script>
        mazing(
            {
                customerName: 'flowershop',
                buttonConfiguration: {
                    customStyle: `
                        .placeholder{}
                    ` ,
                    placementSelector: '#product-gallery',
                    threedBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in 3D'
                    },
                    arBtn: {
                        enabled: true,
                        icon: true,
                        customText: 'View in AR'
                    }
                },
                 getSKU: () => {
                      const url = window.location.href;
                      const parts = url.split("/");
                      const sku = parts.pop();
                      return sku;
                 }
            }
        )
    
    </script>
</body>
```

***

### API Details

<mark style="color:purple;">**threedBtn**</mark>\
You can specify if the 3D button is shown and add a custom text. Also you can enable and disable the shipped icon.\
\
<mark style="color:purple;">**arBtn**</mark>\
You can specify if the 3D button is shown and add a custom text. Also you can enable and disable the shipped icon.

<mark style="color:purple;">**customStyle**</mark>:\
You can override or extend all CSS styles and classes you can see in this class:\
[https://cdn.mazing.link/mzg-in.css](https://cdn.mazing.link/mzg-in.css)

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;
            }
        }
` ,
```

<mark style="color:purple;">**placementSelector**</mark>\
Can include either .class or #id selectors. The Mazing button container will be appended as a child to this element.\
\
<mark style="color:purple;">**customerName**</mark>\
Your assigned customer name in the **Mazing.World.** You can find it below your Mazing.World products.&#x20;



<figure><img src="https://3497237590-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWzFDCBJYsAI1jsAj4WvF%2Fuploads%2F8YCyHv0UUlXDAunyElOC%2FScreenshot%202023-11-17%20143133.png?alt=media&#x26;token=5498619b-c741-4f1b-ba52-98e3e6a4e91d" alt=""><figcaption><p>The yellow marked text is your customer name.</p></figcaption></figure>

\
<mark style="color:purple;">**getSKU Callback**</mark>\
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;
}
```
