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

## **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) }); }); } ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://mazingxr.gitbook.io/mazing-world/de/integration-types/button-integration.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.