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.

# Anpassen des Startverhaltens und des Schaltflächensymbols für das Widget auf Ihrer Website, die in Amazon Connect gehostet wird
<a name="customize-widget-launch"></a>

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.

**Topics**
+ [So konfigurieren Sie das benutzerdefinierte Startverhalten des Widgets](#config-widget-launch)
+ [Unterstützte Optionen und Beschränkungen](#launch-options-constraints)
+ [Konfigurieren des Widget-Starts für benutzerdefinierte Anwendungsfälle](#launch-usage)
+ [Aktivieren der Persistenz von Chat-Sitzungen auf allen Registerkarten](#chat-persistence-across-tabs)

## So konfigurieren Sie das benutzerdefinierte Startverhalten des Widgets
<a name="config-widget-launch"></a>

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
<a name="launch-options-constraints"></a>

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.


| Optionsname | Typ | Description | Standardwert | 
| --- | --- | --- | --- | 
| `skipIconButtonAndAutoLaunch` | Boolesch  | Eine Markierung für enable/disable den automatischen Start des Widgets, ohne dass der Benutzer auf die Seite klickt, lädt. | Nicht definiert | 
| `alwaysHideWidgetButton` | Boolesch  | Eine Markierung für enable/disable das Rendern der Widget-Symbolschaltfläche (sofern nicht gerade eine Chat-Sitzung läuft). | Nicht definiert | 
| `programmaticLaunch` | Funktion  |  | Nicht definiert | 

## Konfigurieren des Widget-Starts für benutzerdefinierte Anwendungsfälle
<a name="launch-usage"></a>

### Startschaltfläche für benutzerdefinierte Widgets
<a name="custom-launch-button"></a>

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
<a name="hyperlink-support"></a>

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
<a name="load-assets"></a>

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 vom CDN abruft, 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
<a name="new-chat-browser-window"></a>

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>
```

## Aktivieren der Persistenz von Chat-Sitzungen auf allen Registerkarten
<a name="chat-persistence-across-tabs"></a>

Wenn ein Chat auf einer Registerkarte geöffnet wird und der Benutzer dann eine neue Registerkarte öffnet und einen weiteren Chat startet, wird standardmäßig ein neuer Chat gestartet, anstatt eine Verbindung zum vorhandenen Chat herzustellen. Sie können die Chat-Sitzungspersistenz auf allen Registerkarten aktivieren, wenn Sie möchten, dass der Benutzer eine Verbindung mit dem vorhandenen Chat herstellt, der auf der ersten Registerkarte gestartet wurde. 

Die Chat-Sitzung wird im Sitzungsspeicher des Browsers in der Variablen `persistedChatSession` gespeichert. Sie müssen diesen Wert in den Sitzungsspeicher der neuen Registerkarte kopieren, wenn das Widget zum ersten Mal initialisiert wird. Folgen Sie den Anweisungen.

Wenn eine Verbindung mit derselben Chat-Sitzung hergestellt werden soll, wenn der Benutzer zu verschiedenen Subdomains navigiert, können Sie die Domaineigenschaft des Cookies festlegen. Sie besitzen beispielsweise zwei Subdomains: `domain1.example.com` und `domain2.example.com`. Sie können die Eigenschaft `domain=.example.com` hinzufügen, sodass von allen Subdomains aus auf das Cookie zugegriffen werden kann.

1. Kopieren Sie den folgenden Code neben den anderen amazon\_connect-Funktionen im gehosteten Widget-Snippet. Dabei werden die `registerCallback`-Event-Handler verwendet, um die `persistedChatSession` als Cookie zu speichern, sodass auf der neuen Registerkarte darauf zugegriffen werden kann. Außerdem wird das Cookie bereinigt, wenn der Chat endet.

   

   ```
   amazon_connect('registerCallback', {
   'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
    document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
   }, 
   'CHAT_ENDED': () => {
     document.cookie = "activeChat=; SameSite=None; Secure";
   }
   });
   ```

1. Rufen Sie den Cookie-Wert ab, falls er vorhanden ist, und legen Sie den Wert für den Sitzungsspeicher auf der neuen Registerkarte fest.

   ```
   const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
   if (cookie) {
     const activeChatValue = cookie.split('=')[1];
     sessionStorage.setItem('persistedChatSession', activeChatValue);
   }
   
   //Your hosted widget snippet should be on this page
   ```