> For the complete documentation index, see [llms.txt](https://mazingxr.gitbook.io/mazing-world/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mazingxr.gitbook.io/mazing-world/de/integration-types/button-integration.md). # Button Integration ## **Übersicht** Du kannst deine Produkte mit einem **3D-Button** (führt zur 3D-Ansicht) und einem **AR-Button** (öffnet die AR-Ansicht – per QR-Code auf Desktop oder direkt über die Kamera auf Smartphone/Tablet) integrieren. Wir empfehlen, die **3D- & AR-Buttons** entweder **unterhalb der Produktgalerie** oder **oben rechts auf dem Produktbild** zu platzieren, um die beste **User Experience** zu erzielen. Lade einfach alle deine Produkte in die **Mazing.World** hoch und integriere anschließend unser **Skript** an einer Stelle in deinem Webshop oder auf deiner Website.\ Das Skript versucht automatisch, eine **SKU** mit dem aktuell angezeigten Produkt abzugleichen und rendert daraufhin die **3D- und AR-Buttons**.

A succesful script integration

## **Integrationsbeispiel** ### **Schritt 1 – SKU-Struktur prüfen und SKUs notieren** Überprüfe die **SKU-Struktur** deines Webshops anhand einer deiner Produkt-URLs, zum Beispiel: ``` webshop.com/product/xyz123abc ``` In diesem Beispiel wäre die **SKU** als **`xyz123abc`** definiert – also nach dem letzten Vorkommen von **`/`** in der Produkt-URL des Shops. Es können jedoch auch verschiedene andere Formate verwendet werden. ``` webshop.com/p/xyz123abc webshop.com/p/xyz123abc/abc webshop.com/xyz123abc ``` ### **Schritt 2 – Produkte hochladen** Lade deine Produkte entsprechend ihrer **SKU-Namen** in die **Mazing.World** hoch. In diesem Beispiel laden wir das Produkt **`xyz123abc`** hoch – exakt so benannt, wie wir es zuvor aus dem **URL-Parameter** unseres Webshops entnommen haben.

Upload the project with matching SKU name

### **Schritt 3 – Skript integrieren** Füge das **Mazing-Skript** im **``-Bereich** deines Webshops oder deiner Homepage ein. ``` ... ``` ### **Schritt 4 – Eigene Implementierung integrieren** Füge das folgende **Script-Tag-Template** am Ende des **``-Bereichs** deiner Seite ein. 
<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>
### **Schritt 5 – Skript-Felder definieren** Sieh dir unten die vollständige Übersicht aller möglichen Werte an. Die wichtigsten Felder sind **`customerName`**, **`placementSelector`** und **`getSKU()`**. **customerName** Angenommen, du betreibst einen Online-Shop mit dem **`customerName`** „flowershop“.\ Diesen Wert findest du in der **Mazing.World** unterhalb deiner Produkte.

customerName in the Mazing.World below product

***customerName: 'flowershop'*** *** #### getSKU() Die **SKU-Namen** sind in der URL deines Shops enthalten, zum Beispiel:\ `https://flowershop.com/product/xyz123abc` In diesem Fall ist die **SKU** der letzte Parameter in der URL.\ Daraus ergibt sich folgende mögliche Implementierung für **`getSKU()`**: 
 getSKU: () => {
      const url = window.location.href;
      const parts = url.split("/");
      const sku = parts.pop();
      return sku;
 }
Diese Methode nimmt den **letzten URL-Parameter**, getrennt durch **`/`**, und gibt ihn als **SKU** zurück. *** #### placementSelector Das letzte Feld, das du bestimmen musst, ist der **`placementSelector`**. Nach einer **DOM-Analyse** deiner Shop-Elemente möchtest du die **Mazing-Buttons** unterhalb deiner **Produktgalerie** platzieren. Beim Überprüfen des Codes stellst du fest, dass die Produktgalerie eindeutig entweder durch die **ID `product-gallery`** oder die **Klasse `prod-gall`** definiert ist. ``` .... ... ``` Wir entscheiden uns dafür, die **ID `#product-gallery`** zu verwenden.\ \ \&#xNAN;***placementSelector: '#product-gallery'***\ \&#xNAN;*or*\ ***placementSelector: '.prod-gall'*** *** ### **Finaler Demo-Code** Jetzt kannst du dir den vollständig integrierten Code ansehen und sehen, wie er aussehen könnte: ``` ... ``` *** ### API Details **threedBtn**\ Hier kannst du festlegen, ob der **3D-Button** angezeigt wird und einen **individuellen Text** definieren. Außerdem kannst du das **mitgelieferte Icon aktivieren oder deaktivieren**.\ \ **arBtn**\ Hier kannst du festlegen, ob der **AR-Button** angezeigt wird und einen **individuellen Text** definieren. Außerdem kannst du das **mitgelieferte Icon aktivieren oder deaktivieren**. **customStyle**:\ Du kannst alle **CSS-Styles und Klassen** überschreiben oder erweitern, die in dieser Datei definiert sind:\ **Beispiel, wie das aussehen könnte:** ``` 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**\ Kann entweder **`.class`-** oder **`#id`-Selektoren** enthalten. Der **Mazing-Button-Container** wird diesem Element als **Child-Element** hinzugefügt.\ \ **customerName**\ Dein zugewiesener **Customer Name** in der **Mazing.World**.\ Du findest ihn unterhalb deiner Produkte in der Mazing.World.

The yellow marked text is your customer name.

\ **getSKU Callback**\ Hier kannst du festlegen, wie deine **eindeutige Produkt-ID** ermittelt wird. Du kannst entweder den **Google Tag Manager** verwenden, um **`{{TAG_ID}}`** zurückzugeben, oder eigenen **Custom Code** schreiben, um beispielsweise deine Shop-URL zu parsen und daraus **SKUs** zu extrahieren. ``` 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 Um den **mazing.link** so zu ändern, dass er auf ein anderes Projekt verweist, kannst du die Funktion **`mazingRefreshSKU()`** verwenden. Erweitere dafür einfach dein **Integrationsskript**, wie im folgenden Beispiel gezeigt. ``` 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) }); }); } ```