Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Passen Sie das Startverhalten des Widgets und das Schaltflächensymbol für Ihre in Amazon Connect gehostete Website an

Sie können die Darstellung und das Starten des Symbols für das gehostete Widget auf Ihrer Website weiter anpassen, das Startverhalten konfigurieren und das Standardsymbol ausblenden. Beispielsweise können Sie das Widget programmgesteuert über ein Schaltflächenelement mit der Bezeichnung „Chatten Sie mit uns“ starten, das auf Ihrer Website dargestellt wird.

So konfigurieren Sie das benutzerdefinierte Startverhalten des Widgets

Verwenden Sie den folgenden Beispielcodeblock, um ein benutzerdefiniertes Startverhalten festzulegen, und betten Sie ihn in das 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,
    programmaticLaunch: (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 Beschränkungen

In der folgenden Tabelle sind die unterstützten Optionen für ein benutzerdefiniertes Startverhalten aufgeführt. Die Felder sind optional und eine beliebige Kombination kann verwendet werden.

Konfigurieren des Widget-Starts für benutzerdefinierte Anwendungsfälle

Startschaltfläche für benutzerdefinierte Widgets

Das folgende Beispiel zeigt die am Widget vorzunehmenden Änderungen, um den programmgesteuerten Start so zu konfigurieren, dass das Widget nur geöffnet wird, wenn der Benutzer ein bestimmtes Schaltflächenelement an einer beliebigen Stelle auf Ihrer Website auswählt. Beispielsweise können sie eine Schaltfläche mit dem Namen „Kontaktieren Sie uns“ oder „Chatten Sie mit uns“ verwenden. Optional können Sie das standardmäßige Widget-Symbol von Amazon Connect 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,
        programmaticLaunch: (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 die erforderlichen Änderungen am auto-launch der Widget-Konfiguration, damit das Widget geöffnet wird, bevor ein Benutzer darauf klickt. Sie können es auf einer Seite Ihrer Website bereitstellen und so einen gemeinsam nutzbaren Hyperlink 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>

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

Das folgende Beispiel zeigt die erforderlichen Änderungen am Widget, damit die Seite Ihrer Website schneller geladen wird. Dazu werden statische Elemente des Widgets abgerufen, wenn ein Benutzer auf die Schaltfläche Chatten Sie mit uns klickt. In der Regel öffnet nur ein kleiner Prozentsatz der Kunden, die eine Kontaktseite besuchen, das Amazon Connect-Widget. Das Widget könnte die Latenz beim Laden der Seite erhöhen, indem es Dateien von abruftCDN, obwohl Kunden das Widget nie öffnen.

Eine alternative Lösung besteht darin, den Codeblock asynchron (oder nie) beim Klicken auf die Schaltfläche 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 eines neuen Chats in einem Browserfenster

Das folgende Beispiel zeigt die erforderlichen Änderungen am Widget, 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>