KI-Shopping-Assistent in Shopify oder WooCommerce einbinden

Einen KI-Shopping-Assistenten bringen Sie an einem Nachmittag in Ihren Shopify- oder WooCommerce-Shop. Der Großteil ist Kopieren und Einfügen. Der einzige Schritt, der etwas Code erfordert, ist die Verbindung des „In den Warenkorb“-Buttons im Chat mit Ihrem echten Warenkorb, und dafür genügen ein paar Zeilen, die Sie aus dieser Anleitung kopieren können. Die Anleitung folgt der Dokumentation von AskMerra und gilt ebenso für Magento 2 und individuell entwickelte Shops.

Bevor Sie beginnen

Sie brauchen vier Dinge:

• Ein AskMerra-Konto und einen Shop. Beim Anlegen des Shops geben Sie die Domain Ihrer Website an, denn das Widget läuft nur dort.
• Ihre Produktdaten als Exportdatei oder Feed-URL.
• Zugriff auf Ihre Theme-Dateien, ein Header-/Footer-Plugin oder den Google Tag Manager.
• Ihren öffentlichen Website-Schlüssel (er beginnt mit pk_live_), zu finden unter Dashboard → Installation.

Schritt 1: Katalog importieren

AskMerra empfiehlt nur Produkte, die in Ihrem Katalog enthalten sind. Ein vollständiger und aktueller Katalog ist daher die wichtigste Grundlage. Derzeit gibt es drei Wege, Produkte zu übernehmen:

• Datei-Upload (CSV, JSON oder XML): der schnellste Einstieg. Dateien dürfen bis zu 25 MB groß sein, CSV-Trennzeichen und Zeichenkodierungen werden automatisch erkannt.
• Feed-URL: Wenn Sie bereits einen Produkt-Feed veröffentlichen, zum Beispiel für Google Shopping, synchronisiert AskMerra ihn je nach Paket automatisch alle 1 bis 6 Stunden. Ein XML-Feed aus dem Google Merchant Center funktioniert unverändert.
• Push-API: für individuelle Plattformen und ERP-Systeme, die Bestände und Preise in Echtzeit übertragen müssen.

Woher die Daten auf jeder Plattform kommen

Bei Shopify installieren Sie eine App für Google-Shopping-Feeds und hinterlegen deren Feed-URL, oder Sie laden einen CSV-Export hoch. Bei WooCommerce nutzen Sie ein Produkt-Feed-Plugin oder einen CSV-Export. Bei Magento 2 verwenden Sie eine Feed-Erweiterung oder die Push-API. Native Apps für Shopify und Magento mit automatischer Synchronisierung sind geplant. Bis sie verfügbar sind, decken der Feed und die APIs denselben Bedarf ab.

Zuordnung und Anreicherung

Nach dem Upload schlägt AskMerra vor, wie Ihre Spalten den eigenen Feldern zugeordnet werden (ID, Name, Preis, Angebotspreis, Verfügbarkeit, Kategorien, Marke und so weiter). Prüfen Sie die Zuordnung vor dem Import. Spalten, die Sie attribute:<name> zuordnen, etwa attribute:skin_type, werden zu durchsuchbaren Produktattributen.

Anschließend wird jedes Produkt angereichert: Die KI erfasst Anwendungen, Haut- oder Haartypen, Anliegen, Schlüsselinhaltsstoffe oder technische Daten sowie Schritte in der Pflegeroutine und indexiert das Ergebnis für die semantische Suche. Spätere Preis- und Bestandsänderungen gelten sofort und lösen keine erneute Anreicherung aus. Produkte, die bei einer neuen vollständigen Synchronisierung fehlen, werden deaktiviert, nie gelöscht.

Produkte aus Ihrem Backend senden

Wenn Sie aus Ihrem eigenen System synchronisieren, senden Sie Batches mit bis zu 500 Produkten, authentifiziert mit Ihrem geheimen Schlüssel:

curl -X POST "https://api.askmerra.com/v1/catalog/products:batchUpsert" \
  -H "Authorization: Bearer $ASKMERRA_SECRET_KEY" \
  -H "Content-Type: application/json" \
  -d '{"products":[{"external_id":"LUM-SE-01","name":"Hydra Glow Serum 30 ml","price":39,"in_stock":true}]}'

Senden Sie immer das vollständige Produkt: Ein Upsert ersetzt die gespeicherten Daten, Felder, die Sie weglassen, werden also geleert.

Schritt 2: Ein Script-Tag einfügen

Kopieren Sie Ihr Snippet unter Dashboard → Installation und fügen Sie es direkt vor dem schließenden </body>-Tag auf jeder Seite ein, auf der der Assistent erscheinen soll:

<script src="https://cdn.askmerra.com/v1/widget.js" data-site-key="pk_live_…" async></script>

Das Skript ist gzip-komprimiert etwa 27 KB groß. Es wartet, bis Ihre Seite geladen ist und der Browser nichts mehr zu tun hat, und rendert dann nur den Chat-Button. Der Chat selbst wird in einem Shadow DOM dargestellt, sodass das CSS Ihres Themes ihn nicht beschädigen kann und sein CSS nicht in Ihr Theme durchsickert.

Shopify

Gehen Sie zu Onlineshop → Themes → Code bearbeiten (in der englischen Oberfläche Online Store → Themes → Edit code), öffnen Sie layout/theme.liquid und fügen Sie das Snippet vor </body> ein.

WooCommerce und WordPress

Fügen Sie das Snippet mit einem Header-/Footer-Plugin wie WPCode im Footer-Bereich ein. Wenn Sie lieber mit Code arbeiten, setzen Sie es in die footer.php Ihres Child-Themes vor wp_footer().

Google Tag Manager

Erstellen Sie ein Tag vom Typ „Benutzerdefiniertes HTML“, das auf allen Seiten ausgelöst wird. Manche GTM-Setups entfernen data-*-Attribute, verwenden Sie deshalb stattdessen das Einstellungsobjekt:

<script>
  window.AskMerraSettings = { siteKey: 'pk_live_…' };
</script>
<script src="https://cdn.askmerra.com/v1/widget.js" async></script>

Bei Magento 2 fügen Sie das Snippet unter Content → Design → Configuration → HTML Head → Scripts and Style Sheets ein. Single-Page-Apps (React, Vue, Next.js) laden es einmal im Root-Layout, und das Gespräch bleibt bei clientseitiger Navigation geöffnet.

Schritt 3: Zugelassene Domains festlegen

Ihr Website-Schlüssel funktioniert nur auf den Domains, die unter Einstellungen → Zugelassene Domains eingetragen sind. shop.de deckt auch www.shop.de ab, und *.shop.de deckt alle Subdomains ab. Tragen Sie auch Ihre Staging-Domain ein, sonst verweigert das Widget dort den Start.

Ein Warnhinweis: Das Snippet muss Ihren pk_live_-Website-Schlüssel enthalten. Fügen Sie niemals einen geheimen sk_live_-Schlüssel in eine Webseite ein. Die Widget-Endpunkte lehnen ihn ohnehin ab.

Schritt 4: Dem Assistenten den Produktseiten-Kontext geben

Auf einer Produktseite kann AskMerra wissen, welches Produkt sich der Kunde gerade ansieht, sodass „Ist das gut für fettige Haut?“ ohne Weiteres funktioniert. Das Produkt wird aus dem schema.org-JSON-LD der Seite gelesen (Product.sku, dann productID, dann mpn). Bei WooCommerce wird das JSON-LD Ihres SEO-Plugins verwendet. Gibt Ihr Theme keines aus, legen Sie das Produkt selbst fest:

<script>
  window.AskMerraSettings = { productId: 'LUM-SE-01' };
</script>

Der Wert muss mit der external_id oder sku des Produkts in Ihrem AskMerra-Katalog übereinstimmen.

Schritt 5: „In den Warenkorb“ verbinden

Produktkarten im Chat können einen „In den Warenkorb“-Button anzeigen. Aktivieren Sie ihn in den Verhaltenseinstellungen des Widgets und verarbeiten Sie dann das Event add_to_cart mit der Warenkorb-API Ihrer Plattform. Ohne Handler öffnet der Button einfach die Produktseite.

Bei Shopify ist externalId die Varianten-ID, wenn Ihr Katalog aus Shopify stammt:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  await fetch('/cart/add.js', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ items: [{ id: Number(externalId), quantity: 1 }] }),
  });
});

Bei WooCommerce ist externalId die WooCommerce-Produkt-ID:

AskMerra.on('add_to_cart', async ({ externalId }) => {
  const body = new URLSearchParams({ product_id: externalId, quantity: '1' });
  await fetch('/?wc-ajax=add_to_cart', { method: 'POST', body });
  document.body.dispatchEvent(new Event('wc_fragment_refresh'));
});

Das Widget-Skript lädt asynchron, daher registrieren Sie Handler am sichersten im Callback onReady in window.AskMerraSettings. Mit derselben JavaScript-API öffnen Sie den Chat über Ihren eigenen „Experten fragen“-Button mit AskMerra.sendMessage(), folgen dem Sprachumschalter Ihrer Website mit AskMerra.setLocale() und leiten die Events open, product_click und add_to_cart an Ihr Analytics-Tool weiter.

Schritt 6: Installation prüfen

Öffnen Sie Ihren Shop im Browser und gehen Sie dann zu Dashboard → Installation. Dort sehen Sie, wann und wo das Widget zuletzt erkannt wurde, auch bei Installationen über einen Tag-Manager. Der Button Jetzt prüfen ruft Ihre Domains ab und meldet, ob das Snippet gefunden wurde, ob ein anderer Website-Schlüssel installiert ist oder ob die Website nicht erreichbar war.

Erscheint der Chat-Button nicht, öffnen Sie die Browserkonsole. Das Widget gibt dort eine klare Warnung aus: unbekannter Website-Schlüssel, Domain nicht zugelassen oder Shop pausiert. Sendet Ihre Website einen Content-Security-Policy-Header, erlauben Sie https://cdn.askmerra.com in script-src und https://api.askmerra.com in connect-src.

Noch ein paar letzte Handgriffe:

• Blenden Sie den Chat-Button im Checkout mit einer Pfadregel wie /checkout* aus, damit der Kaufabschluss frei von Ablenkungen bleibt.
• Stellen Sie vor dem Livegang echte Kundenfragen im Playground. Sein Debug-Panel zeigt, welche Produkte gefunden wurden und über welchen Weg die Antwort kam.
• Design-Änderungen, die Sie im Dashboard veröffentlichen, erscheinen innerhalb von etwa einer Minute auf Ihrer Website, ohne dass Sie das Snippet ändern müssen.

Legen Sie los

Um die oben genannten Schritte in Ihrem Shop umzusetzen, legen Sie ein Konto an. Lieber zuerst eine Vorführung? Vereinbaren Sie eine Demo. Die vollständige Referenz finden Sie in der Installationsdokumentation und in der Dokumentation zur JavaScript-API. Wenn Sie die Idee noch abwägen, lesen Sie zuerst, was ein KI-Shopping-Assistent ist und wie er sich von einem klassischen Suchfeld unterscheidet: dialogbasierte Produktsuche vs. Stichwortsuche.