Passen Sie das Startverhalten und das Schaltflächensymbol des Widgets an

Um das Rendern und Starten des gehosteten Widget-Symbols auf Ihrer Website weiter anzupassen, können Sie das Startverhalten konfigurieren und das Standardsymbol ausblenden. Sie können das Widget beispielsweise programmgesteuert über ein Schaltflächenelement „Mit uns chatten“ starten, das auf Ihrer Website gerendert wird.

Wie konfiguriere ich das benutzerdefinierte Startverhalten für das Widget

Um ein benutzerdefiniertes Startverhalten zu übergeben, verwenden Sie den folgenden Beispielcodeblock und betten Sie ihn in Ihr Widget ein. Alle im folgenden Beispiel gezeigten Felder sind optional und es können beliebige Kombinationen verwendet werden.

amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});

Unterstützte Optionen und Einschränkungen

In der folgenden Tabelle sind die unterstützten Optionen für das benutzerdefinierte Startverhalten aufgeführt. Felder sind optional und es können beliebige Kombinationen verwendet werden.

Optionsname	Typ	Beschreibung	Standardwert
skipIconButtonAndAutoLaunch	Boolesch	Eine Markierung zum Aktivieren/Deaktivieren des automatischen Starts des Widgets, ohne dass der Benutzer auf die Seite klickt, um die Seite zu laden.	undefiniert
alwaysHideWidgetButton	Boolesch	Eine Markierung, um das Rendern der Widget-Symbolschaltfläche zu aktivieren/deaktivieren (es sei denn, es gibt eine laufende Chat-Sitzung).	undefiniert
programaticLaunch	Funktion		undefiniert

Konfigurieren Sie den Widget-Start für benutzerdefinierte Anwendungsfälle

Startschaltfläche für benutzerdefinierte Widgets

Das folgende Beispiel zeigt Änderungen, die Sie am Widget vornehmen müssten, um den programmgesteuerten Start so zu konfigurieren, dass er nur geöffnet wird, wenn der Benutzer ein benutzerdefiniertes Schaltflächenelement auswählt, das an einer beliebigen Stelle auf Ihrer Website gerendert wird. Beispielsweise können sie eine Schaltfläche mit dem Namen „Kontaktieren Sie uns“ oder „Mit uns chatten“ wählen. Optional können Sie das standardmäßige Amazon Connect Connect-Widget-Symbol ausblenden, bis das Widget geöffnet wurde.

<button id="launch-widget-btn">Chat With Us</button>

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>

Hyperlink-Unterstützung

Das folgende Beispiel zeigt Änderungen, die Sie in der Widget-Konfiguration vornehmen müssten. Dadurch wird das Widget geöffnetauto-launch, ohne darauf zu warten, dass der Benutzer darauf klickt. Sie können es auf einer Seite bereitstellen, die auf Ihrer Website gehostet wird, um einen gemeinsam nutzbaren Hyperlink zu erstellen.

https://example.com/contact-us?autoLaunchMyWidget=true

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>

Widget-Assets laden, wenn auf die Schaltfläche geklickt wird

Das folgende Beispiel zeigt Änderungen, die Sie am Widget vornehmen müssten, damit die Seite Ihrer Website schneller geladen wird, indem Sie die statischen Elemente des Widgets abrufen, wenn ein Benutzer auf die Schaltfläche Mit uns chatten klickt. Normalerweise öffnet nur ein kleiner Prozentsatz der Kunden, die eine Kontaktseite besuchen, das Amazon Connect Connect-Widget. Das Widget könnte die Latenz beim Laden der Seite erhöhen, indem es Dateien vom CDN abruft, obwohl Kunden das Widget nie öffnen.

Eine alternative Lösung besteht darin, den Codeausschnitt beim Klicken auf die Schaltfläche asynchron (oder nie) auszuführen.

<button id="launch-widget-btn">Chat With Us</button>

var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});

Starten Sie einen neuen Chat in einem Browserfenster

Das folgende Beispiel zeigt Änderungen, die Sie am Widget vornehmen müssten, um ein neues Browserfenster zu öffnen und den Chat automatisch im Vollbildmodus zu starten.

<button id="openChatWindowButton">Launch a Chat</button>

<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>