

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.

# Konfigurieren Sie ein out-of-the-box Kommunikations-Widget in Amazon Connect
<a name="config-com-widget1"></a>

Verwenden Sie diese Option, um Kommunikations-Widgets für Desktop- und mobile [Browser](connect-supported-browsers.md#browsers-inapp) zu erstellen. Am Ende dieses Verfahrens generiert Amazon Connect einen benutzerdefinierten HTML-Codeausschnitt, den Sie in den Quellcode Ihrer Website kopieren.

1. Melden Sie sich auf der Amazon Connect Admin-Website mit einem Administratorkonto oder einem Benutzerkonto mit **Kanälen und Flows** an. Das **Widget „Kommunikation“ — Berechtigung erstellen** ist im Sicherheitsprofil enthalten.

1. Wählen Sie im Amazon Connect linken Navigationsmenü **Kanäle**, **Kommunikations-Widgets** aus. 

1. Der Assistent führt Sie durch die nächsten drei Schritte. 

## Schritt 1: Auswahl der Kommunikationskanäle
<a name="widgetdetails"></a>

1. Geben Sie auf der Seite **Kommunikations-Widgets** einen **Namen** und eine **Beschreibung** für das Kommunikations-Widget ein. 
**Anmerkung**  
Der Name muss für jedes Kommunikations-Widget, das in einer Amazon-Connect-Instance erstellt wurde, eindeutig sein.

1. Legen Sie im Abschnitt **Kommunikationsmöglichkeiten** fest, wie Ihre Kunden mit Ihrem Widget interagieren können. In der folgenden Abbildung sind die Optionen angegeben, mit denen Web- und Videoanrufe sowie die Bildschirmfreigabe für Kunden ermöglicht werden.   
![\[Die Seite „Kommunikations-Widget“, die für Web- und Videoanrufe sowie die Bildschirmfreigabe konfiguriert ist.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/comm-widget-page-call.png)

1. Wählen Sie im Bereich **Webanrufe** aus, ob Sie Videoanrufe und Bildschirmfreigabe-Funktionen für Ihre Kunden aktivieren möchten. Das vorherige Bild zeigt Optionen, mit denen Kunden die Videos der Kundendienstmitarbeiter ansehen und ihre Videos einschalten sowie Kundendienstmitarbeiter und Kunden ihre Bildschirme freigeben können. Informationen zum Festlegen von Einschränkungen bei der Bildschirmfreigabe finden Sie unter [Aktivieren der URL-Beschränkung für die Bildschirmfreigabe](screen-sharing-url-restriction.md).

1. Wählen Sie **Save and continue** aus.

## Schritt 2: Anpassen des Widgets
<a name="customizewidget"></a>

Bei der Auswahl dieser Optionen wird die Widget-Vorschau automatisch aktualisiert. Sie können also sehen, wie die Oberfläche für die Kunden aussehen wird.

![\[Die Vorschau des Kommunikations-Widgets.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/netra-call-preview.png)


**Definieren des Stils der Widget-Zugriffschaltflächen**

1. Wählen Sie die Farben für den Schaltflächenhintergrund aus. Geben Sie dazu Hexadezimalwerte ([HTML-Farbcodes](https://htmlcolorcodes.com/)) ein.

1. Wählen Sie **Weiß** oder **Schwarz** als Symbolfarbe aus. Die Farbe des Symbols kann nicht angepasst werden.

**Anpassen von Anzeigenamen und -stilen**

1. Geben Sie Werte für die Header-Nachricht und Farbe sowie für die Hintergrundfarbe des Widgets an. 

1. **Logo-URL**: Fügen Sie eine URL zu Ihrem Logo-Banner aus einem Amazon-S3-Bucket oder einer anderen Online-Quelle ein.
**Anmerkung**  
In der Vorschau des Kommunikations-Widgets auf der Anpassungsseite wird das Logo nicht angezeigt, wenn es aus einer anderen Online-Quelle als einem Amazon-S3-Bucket stammt. Das Logo wird jedoch angezeigt, wenn das benutzerdefinierte Kommunikations-Widget auf Ihrer Seite implementiert wird.

   Das Banner muss im .svg-, .jpg- oder .png-Format vorliegen. Das Bild kann 280 Pixel (Breite) mal 60 Pixel (Höhe) groß sein. Jedes Bild, das größer als diese Abmessungen ist, wird so skaliert, dass es in den Komponentenbereich des Logos von 280×60 passt.

   1. Anweisungen zum Hochladen einer Datei wie eines Logobanners auf S3 finden Sie unter [Hochladen von Objekten](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) im *Benutzerhandbuch zu Amazon Simple Storage Service*.

   1. Vergewissern Sie sich, dass die Bildberechtigungen richtig eingestellt sind, sodass das Kommunikations-Widget über Berechtigungen für den Zugriff auf das Bild verfügt. Informationen dazu, wie Sie ein S3-Objekt öffentlich zugänglich machen, finden Sie unter [Schritt 2: Hinzufügen einer Bucket-Richtlinie](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) im Thema *Berechtigungen für den Zugriff auf Websites einrichten*.

## Schritt 3: Hinzufügen Ihrer Domain für das Widget
<a name="widgetdomain"></a>

In diesem Schritt können Sie das Kommunikations-Widget so sichern, dass es nur von Ihrer Website aus gestartet werden kann.

1. Geben Sie die Website-Domains ein, in denen Sie das Kommunikations-Widget platzieren möchten. Das Kommunikations-Widget wird nur in Websites geladen, die Sie in diesem Schritt auswählen. 

   Wählen Sie **Domain hinzufügen** aus, um bis zu 50 Domains hinzuzufügen.  
![\[Die Option „Domain hinzufügen“.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/chatwidget-add-domain.png)
**Wichtig**  
Vergewissern Sie sich, dass Ihre Website URLs gültig ist und keine Fehler enthält. Geben Sie die vollständige URL beginnend mit https:// an.
Wir empfehlen die Verwendung von https:// für Ihre Produktionswebsites und -anwendungen.

1. Wählen Sie unter **Mehr Sicherheit für Ihre Kommunikations-Widget-Anfragen** die Option **Nein – Ich möchte diesen Schritt überspringen** aus, um die Einrichtung möglichst schnell durchzuführen.

   Wir empfehlen, **Ja** auszuwählen, um überprüfen zu können, ob der Benutzer authentifiziert ist. Weitere Informationen finden Sie unter [Personalisieren des Kundenerlebnisses für In-App-, Web- und Videoanrufe in Amazon Connect](optional-widget-steps.md). 

1. Wählen Sie **Save and continue** aus.

   Herzlichen Glückwunsch\$1 Ihr Widget wurde erstellt. Kopieren Sie den generierten Code und fügen Sie ihn auf jeder Seite Ihrer Website ein, auf der das Kommunikations-Widget erscheinen soll.

## Aktivieren von In-App-, Web- und Videoanrufen sowie der Bildschirmfreigabe für Kundendienstmitarbeiter
<a name="agent-cx-cw"></a>

Um Kundendienstmitarbeitern die Möglichkeit zur Nutzung von Videoanrufen und der Bildschirmfreigabe zu bieten, weisen Sie ihrem Sicherheitsprofil die Berechtigungen **Contact Control Panel (CCP)**, **Videoanrufe – Zugriff** zu.

Der Arbeitsbereich für Amazon Connect Agenten unterstützt Amazon Connect In-App-, Web- und Videoanrufe sowie Screensharing. Sie können dieselbe Konfiguration, Weiterleitung, Analyse und Kundendienstmitarbeiteranwendung wie bei Telefonanrufen und Chats verwenden. Für den Einstieg müssen Sie lediglich den Sicherheitsprofilen Ihres Kundendienstmitarbeiters die Berechtigungen für Videoanrufe und für die Bildschirmfreigabe zuweisen.

Für benutzerdefinierte Agenten-Desktops sind keine Änderungen für Amazon Connect In-App- und Webanrufe erforderlich. Weisen Sie den Sicherheitsprofilen Ihres Kundendienstmitarbeiters die Berechtigungen für Videoanrufe und für die Bildschirmfreigabe zu und folgen Sie der nachstehenden Anleitung zur Integration von Videoanrufen in den Desktop Ihres Kundendienstmitarbeiters.

## So leitet ein Client-Gerät einen In-App- oder Webanruf ein
<a name="diagram-option1"></a>

Das folgende Diagramm zeigt die Reihenfolge der Ereignisse, wenn ein Client-Gerät (mobile Anwendung oder Browser) einen In-App- oder Webanruf einleitet.

![\[Konzeptionelles Diagramm, das zeigt, wie ein Client-Gerät einen Anruf einleitet.\]](http://docs.aws.amazon.com/de_de/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (Optional) Sie können auf der Website erfasste Attribute übergeben und mit dem JSON-Web-Token (JWT) validieren. 

1. Der Kunde klickt auf das Kommunikations-Widget auf Ihrer Website oder mobilen App. 

1. Das Kommunikations-Widget startet den Webaufruf an, Amazon Connect indem es die im JWT enthaltenen Attribute weitergibt. 

1. Der Kontakt erreicht den Flow, wird weitergeleitet und in die Warteschlange gestellt. 

1. Der Kundendienstmitarbeiter akzeptiert den Kontakt.

1. (Optional) Wenn Video für den Kunden und den Kundendienstmitarbeiter aktiviert ist, können sie ihr Video starten.

## Weitere Informationen
<a name="cw-more-resources"></a>

Weitere Informationen zu den Anforderungen für In-App-, Web- und Videoanruffunktionen finden Sie in den folgenden Themen:
+ [Anforderungen an die Workstation des Kundendienstmitarbeiters für App-, Web- und Videoanrufe in Amazon Connect](videocalling-networking-requirements.md)
+ [Unterstützte Browser und mobile Betriebssysteme für In-App-, Web- und Videoanruffunktionen](connect-supported-browsers.md#browsers-inapp) 