🖲️Button Integration

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

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.

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.

<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 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: 'flowershop'

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:

 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.

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

Wechoose to use the id # product-gallery. placementSelector: '#product-gallery' or placementSelector: '.prod-gall'

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

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

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.

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)
        });
    });

}

PreviousBadges Integration NextGallery Integration

Last updated 5 months ago

hashtagOverview

hashtagIntegration Example

hashtagStep 1 - Check SKU structure and remember SKUs

hashtagStep 2 - Upload your products

hashtagStep 3 - Integrate Script

hashtagStep 4 - Integrate Custom Implementation

hashtagStep 5 - Find your script fields

hashtagcustomerName

hashtaggetSKU()

hashtagplacementSelector

hashtagFinal Demonstration Code

hashtagAPI Details

hashtagRefresh SKU