Installations- und Integrationshandbuch

Eine typische Installation des Skripts sieht folgendermaßen aus:

<script>
    (function(){
        var autochatConfig = {
            assistantId: "INSERT ASSISTANTID",
            accessToken: "INSERT ACCESSTOKEN",
            locale: "NL", // or EN/FR

            // To set up a link between the website and the car a consumer is looking at use one of these identification methods:
            currentCarVin: "PLACE CAR VIN NUMBER HERE",
            // - OR -
            licensePlate: "PLACE CAR LICENSE PLATE NUMBER HERE",
            // - OR -
            stockNumber: "PLACE CAR STOCK NUMBER HERE"
        };
        var s=document.createElement("script");s.src="https://static.chatclient.autochat.ai/release/autochat.js?ver=1",s.async=!0,s.defer=!0,s.addEventListener("load",function(){autochat.init(autochatConfig)}),document.body.appendChild(s);
    })()
</script>

Verwenden Sie nicht mehr als eine Methode zur Fahrzeugidentifizierung.

Sie können AutoChat auf zwei Arten installieren:

• Indem Sie den Code direkt in Ihre Website installieren.

• Indem Sie unseren Code über den Google Tag Manager hinzufügen.

Installation durch Hinzufügen von Code zum Quellcode der Website

Um AutoChat in seiner grundlegendsten Form zu installieren, d. h. nur die Chat-Blase, keine CTA-Schaltflächen und keine Fahrzeugidentifikation, müssen Sie zwei Dinge hinzufügen:

Platzieren Sie dieses HTML unter der Öffnung< Körper> Etikett:

und platzieren Sie dieses Javascript über dem schließenden< /Körper> Etikett.

Vergessen Sie nicht, die AssistantId und den AccessToken einzugeben.

Installation über Google Tag Manager

Wenn Sie GTM auf Ihrer Website verwenden, können Sie AutoChat auch auf diese Weise installieren.

Schritt 1: Logge dich in den Tag Manager ein und öffne die Tags

Schritt 2: Klicken Sie auf Neu

Schritt 3: Klicken Sie auf Tag-Konfiguration

Schritt 4: Wählen Sie benutzerdefiniertes HTML

Schritt 5: Geben Sie diesen Code ein

<div id="autochat-root"></div>
<div id="autochat-chat-overlay"></div>
<script>
    (function(){
        var autochatConfig = {
            assistantId: "INSERT ASSISTANTID",
            accessToken: "INSERT ACCESSTOKEN",
            locale: "NL", // or EN/FR
        };
        var s=document.createElement("script");s.src="https://static.chatclient.autochat.ai/release/autochat.js?ver=1",s.async=!0,s.defer=!0,s.addEventListener("load",function(){autochat.init(autochatConfig)}),document.body.appendChild(s);
    })()
</script>

Vergessen Sie nicht, die AssistantId und den AccessToken einzugeben.

Das Ergebnis sollte ungefähr so aussehen:

Schritt 6: Triggerung wählen

Schritt 7: Wenn Sie die Sprechblase auf allen Seiten anzeigen möchten, wählen Sie alle Seiten aus

Einen Namen festlegen

Klicken Sie auf Speichern

Das Ergebnis sieht so aus

Schritt 8: Änderungen auf der Website veröffentlichen

Die Chat-Blase sollte jetzt auf der Website sichtbar sein

Es gibt verschiedene Möglichkeiten, auf der Website mit dem digitalen Assistenten von AutoChat zu interagieren.

• Über die Chat-Blase

• Über eine Suchleiste

• Über einen speziellen Call-to-Action-Button

Über die Chat-Blase

Wenn Sie die Basisversion unseres Skripts installieren, wird die Blase automatisch angezeigt, sofern sie im Dashboard aktiviert ist.

Verwenden Sie eine SPA und möchten Sie die Chat-Blase nur auf bestimmten Seiten anzeigen? Mit diesem Code können Sie sie optional anzeigen:

window.dispatchEvent(new Event('autochat_hide_chat_bubble'));
// To re-enable the bubble after disabling it, use the following command:
window.dispatchEvent(new Event('autochat_show_chat_bubble'));

Über eine Suchleiste

Es ist möglich, auf Ihrer Website eine Suchleiste zu installieren, die mit AutoChat verbunden ist.

<textarea id="question"></textarea><button onclick="autochat.askQuestionToAi(document.getElementById('question').value);">Ask question</button>

Stellen Sie sicher, dass Sie die Anzahl der Zeichen, die Sie uns als Frage senden, auf 256 begrenzen.

Um sicherzustellen, dass Sie das volle Potenzial Ihres digitalen Assistenten nutzen, empfehlen wir Ihnen, spezielle CTAs zu installieren und Ihren digitalen Assistenten mit diesen zu verbinden.

Sie können Ihren digitalen Assistenten in den folgenden Szenarien verwenden:

• Zur Terminbuchung

• So buchen Sie einen Showroom-Termin

• Zur Terminvereinbarung für eine Probefahrt

• Ein Auto in Zahlung geben

• Lassen Sie den gesamten Verkaufsfluss unter einem CTA ablaufen

• Zur Buchung eines Werkstatttermins

• So erstellen Sie eine Kontaktanfrage

Einige dieser Abläufe funktionieren besser, wenn wir wissen, welches Auto der Kunde gerade ansieht (eine sogenannte Fahrzeugdetailseite). Um unsere Funktionen optimal nutzen zu können, aktivieren Sie die Fahrzeugidentifikation.

Termin buchen

Wenn Sie sich nicht sicher sind, ob der Verbraucher einen Verkaufs- oder After-Sales-Termin buchen möchte, können Sie diesen Ansatz verwenden und den Verbraucher selbst entscheiden lassen:

<button onclick="autochat.askQuestion('I want to book an appointment');">Book appointment</button>

Buchen Sie einen Showroom-Termin

Um eine Schaltfläche zu erstellen, die den Showroom-Flow startet, können Sie diesen Code verwenden:

<button onclick="autochat.askQuestion('I want a showroom appointment');">Book showroom appointment</button>

Wenn Sie dem Verbraucher jedoch die Möglichkeit geben möchten, einen Termin im Ausstellungsraum für das Auto zu buchen, für das er sich interessiert, müssen Sie eine etwas andere Version verwenden:

<button onclick="autochat.askQuestion('I want to see this car', { vdp: true });">Book a showroom appointment for this car</button>

Es ist möglich, eine oder mehrere Fragen zu überspringen, indem Sie im Eröffnungssatz zusätzliche Informationen hinzufügen, zum Beispiel:

<button onclick="autochat.askQuestion('I want to book a showroom appointment for BMW');">Book showroom appointment for BMW</button>

Im obigen Beispiel fragt der Assistent nicht nach der Marke, da er bereits weiß, für welche Marke sich der Verbraucher interessiert.

Sie können auch einen bestimmten Ort angeben und diese Frage überspringen:

<button onclick="autochat.askQuestion('I want to book a showroom appointment at BMW Dealer 1');">Book showroom appointment at BMW Dealer 1</button>

Es ist wichtig, dass der hier verwendete Name genau derselbe ist, der in unserem Dashboard definiert ist.

Anstatt den Ortsnamen im Eingangssatz zu verwenden, kann auch ein Filter eingesetzt werden:

<button onclick="autochat.askQuestion('I want to book a showroom appointment',{filterByLocationName:"Amsterdam"});">Showroom appointment</button>

Vereinbaren Sie einen Termin zur Probefahrt

Um den Testlaufablauf zu starten, verwenden Sie diesen Code:

<button onclick="autochat.askQuestion('I want to book a testdrive appointment');">Book a testdrive appointment</button>

Wenn Sie eine Probefahrt mit dem Auto buchen möchten, das Sie gerade ansehen, verwenden Sie:

<button onclick="autochat.askQuestion('I want to book a testdrive for this car', { vdp: true });">Book a testdrive for this car</button>

<button onclick="autochat.askQuestion('I want to book a testdrive appointment for a BMW 1 serie');">Book a testdrive appointment for a BMW 1 serie</button>

<button onclick="autochat.askQuestion('I want to trade in my current car');">Trade in my car</button>

Sie können den gleichen Code verwenden, unabhängig davon, ob ein Fahrzeugkontext vorliegt oder nicht. Das bedeutet: Wenn ein Verbraucher sich auf einer Seite mit Fahrzeugdetails befindet, nehmen wir das von ihm angesehene Auto in den Lead zum Händler auf.

Lassen Sie den gesamten Verkaufsfluss unter einem CTA ablaufen

Sie können auch eine CTA-Schaltfläche erstellen und den Verbraucher wählen lassen, was er tun möchte:

<button onclick="autochat.askQuestion('I'm interested', { vdp: true });">I'm interested in this car</button>

Workshop-Termin buchen

Die einfachste Variante einen Werkstatttermin anzulegen ist:

<button onclick="autochat.askQuestion('I want to book a workshop appointment');">Book workshop appointment</button>

Oder Sie können Fragen überspringen:

<button onclick="autochat.askQuestion('I want to book a workshop appointment for my BMW');">Book workshop appointment for a BMW</button>

<button onclick="autochat.askQuestion('I want to book a workshop appointment for my BMW at BMW Dealer 1');">Book workshop appointment for a BMW at BMW Dealer 1</button>

<button onclick="autochat.askQuestion('I want to book a workshop appointment',{filterByLocationName:"Birmingham"});">Showroom appointment</button>

Kontaktanfrage erstellen

Wenn Sie möchten, dass der Verbraucher Kontaktdaten hinterlässt:

<button onclick="autochat.askQuestion('I want a contact request');">Contact me</button>

Es ist sehr wichtig, das Kundenerlebnis des Verbrauchers zu bereichern, indem man AutoChat mitteilt, welches Auto er oder sie sich gerade ansieht.

Bei AutoChat verbringen wir einen großen Teil unserer Zeit damit, Integrationen mit VMS-Systemen (Vehicle Management System) zu erstellen. Wir tun dies, damit wir den aktuellen Lagerbestand eines Händlers erhalten. Wenn wir den Lagerbestand erhalten, können wir das Erlebnis für den Verbraucher auf folgende Weise bereichern:

• Wir können Fragen zu dem Auto beantworten, das der Verbraucher gerade ansieht (einzelnes Auto).

• Wir können dem Verbraucher helfen, das Auto zu finden, das er sucht (großer Bestand).

• Wir können dem Verkäufer genau mitteilen, für welches Auto sich der Kunde interessiert.

• Da das Auto an einen bestimmten Standort gebunden ist, können wir dem Verbraucher bei der Terminerstellung die passende Verfügbarkeit zur Auswahl anzeigen.

Falls wir die Fahrzeugkennung nicht von der Website erhalten oder das Fahrzeug aus irgendeinem Grund nicht in unserer Datenbank haben, greifen wir häufig auf eine sogenannte Fallback-Version eines bestimmten Ablaufs zurück. Dies ist eine vereinfachte Version des spezifischen Ablaufs und führt häufig zu einem weniger als optimalen Kundenerlebnis.

Sie können uns auf mehreren Wegen mitteilen, für welches Auto sich der Verbraucher interessiert:

• Fügen Sie die Kennung in der AutoChat-Konfiguration hinzu

• Fügen Sie der Website einen HTML-Tag hinzu (empfohlen)

• Fügen Sie die Kennung in die CTA-Schaltfläche ein

Hinzufügen des Bezeichners über AutoChat Config

Du kannst uns die Kennung über die AutoChat-Konfiguration senden, in der du uns auch die spezifischen Anmeldeinformationen für den Assistenten übermittelst, der auf der Website installiert wird, und zwar wie folgt:

<script>
    (function(){
        var autochatConfig = {
            assistantId: "INSERT ASSISTANTID",
            accessToken: "INSERT ACCESSTOKEN",
            locale: "NL", // or EN/FR

            // To set up a link between the website and the car a consumer is looking at use one of these identification methods:
            currentCarVin: "PLACE CAR VIN NUMBER HERE",
            // - OR -
            licensePlate: "PLACE CAR LICENSE PLATE NUMBER HERE",
            // - OR -
            stockNumber: "PLACE CAR STOCK NUMBER HERE"
        };
        var s=document.createElement("script");s.src="https://static.chatclient.autochat.ai/release/autochat.js?ver=1",s.async=!0,s.defer=!0,s.addEventListener("load",function(){autochat.init(autochatConfig)}),document.body.appendChild(s);
    })()
</script>

Wichtig zu beachten ist, dass Sie immer nur eine Identifikationsmethode gleichzeitig verwenden können. Wenn wir mehrere Autos finden, senden wir immer ein leeres Ergebnis zurück, d. h. der Assistent weiß nicht, um welches Auto es sich handelt.

stockNumber stellt häufig eine interne Nummer dar, die aus dem Fahrzeugverwaltungssystem stammt.

Fügen Sie die Kennung über einen HTML-Tag hinzu

Alternativ können Sie uns die Fahrzeugkennung auch übermitteln, indem Sie diesen HTML-Tag an einer beliebigen Stelle auf der Fahrzeugdetailseite einfügen:

<div id="autochat-car-id" data-car-id="abc"></div>

Die Informationen im Tag müssen auf der Seite nicht sichtbar sein.

Fügen Sie die Kennung in die CTA-Schaltfläche ein

In manchen Fällen, beispielsweise wenn Sie auf einer Übersichtsseite für den Bestand einen CTA pro Auto installieren möchten, kann es hilfreich sein, pro CTA-Schaltfläche eine Autokennung zu implementieren. Dies ist ein Beispiel für eine Schaltfläche für eine Probefahrt, die die Autokennung enthält:

<button onclick="autochat.askQuestion('I want a testdrive appointment for this car', { vdp: true, currentCarVin: 'ZFA3120000JB11486' });">I want to testdrive this car</button>

Wenn Sie testen möchten, ob die Integration zwischen der Website und AutoChat erfolgreich erstellt wurde, können Sie Folgendes tun. Öffnen Sie eine Fahrzeugdetailseite und starten Sie einen Chat, indem Sie in der Chat-Blase auf „Frage stellen“ klicken. Wenn auf der rechten Seite der Chat-Oberfläche ein Auto angezeigt wird, wissen Sie, dass die Integration erfolgreich eingerichtet wurde.