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.
# Integrieren Connect Customer in eine mobile Anwendung chatten
In diesem Thema wird erklärt, wie Sie Connect Customer Chat in Ihre mobile Anwendung integrieren. Verwenden Sie eine der folgenden Optionen:
+ [WebView Integration](#webview)
+ Die [Connect Customer Chat SDKs für iOS und Android](#integrate-chat-with-mobile-sdks-for-mobile)
+ [React-Native-Integration](#react-native-integration)
Verwenden Sie die Connect Customer [ StartChatContact ](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API, um Kontakt aufzunehmen.
**Topics**
+ [Auswählen der passenden Integrationsoption](#integrate-options)
+ [Connect Customer Arbeitsablauf bei der Chat-Integration](#integrate-chat-with-mobile-workflow)
+ [Fangen Sie an mit Connect Customer Chat-Integration](#integrate-chat-with-mobile-getting-started)
## Auswählen der passenden Integrationsoption
Dieser Abschnitt enthält eine Beschreibung der einzelnen Integrationsoptionen, um Ihnen bei der Entscheidung zu helfen, welche Option Sie für Ihre Lösung verwenden sollten.
### WebView Integration
Mit der Connect Customer WebView Chat-Integration können Sie das gesamte Chat-Erlebnis mit minimalem Entwicklungsaufwand in Ihre mobilen Anwendungen einbetten. Diese Methode verwendet `WebView` unter Android und `WKWebView` unter iOS verwendet, um eine nahtlose und umfassende Chat-Oberfläche bereitzustellen. Sie ist ideal für Teams, die nach einer schnellen und sofort einsetzbaren Lösung suchen, um Chat-Funktionen ohne umfangreiche Anpassungen zu integrieren.
Dieser Ansatz gewährleistet eine sichere Kommunikation und nutzt die webbasierte Chat-Oberfläche von Connect Customer. Sie müssen Ihre App jedoch so konfigurieren, dass sie Cookies JavaScript ordnungsgemäß verarbeitet.
Weitere Informationen zur Implementierung der WebView Integration finden Sie im [ GitHub Repository mit Beispielen für die ](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples) Chat-Benutzeroberfläche von Connect Customer.
**Empfehlung**: Die WebView-based Integration ist ideal für eine schnelle Entwicklung und minimalen Wartungsaufwand und gewährleistet gleichzeitig eine umfassende Chat-Funktionalität.
### Connect Customer Chat-SDKs für Mobilgeräte
Die Connect Customer Chat-SDKs für iOS und Android vereinfachen die Integration von Connect Customer Chats für native mobile Anwendungen. Die SDKs helfen bei der Verwaltung der clientseitigen Chat-Logik und der Backend-Kommunikation, ähnlich wie die Amazon Connect ChatJS Library.
Die Connect Customer Chat-SDKs umschließen die APIs des Connect Customer Participant Service und abstrahieren die Verwaltung der Chat-Sitzung und. WebSocket Auf diese Weise können Sie sich auf die Benutzeroberfläche und das Benutzererlebnis konzentrieren und sich gleichzeitig auf das Connect Customer Chat-SDK verlassen, um mit allen Back-End-Diensten zu interagieren. Bei diesem Ansatz müssen Sie immer noch Ihr eigenes Chat-Backend verwenden, um die Connect Customer `StartChatContact` API aufzurufen und den Kontakt aufzunehmen.
+ Weitere Informationen zum Swift-based iOS-SDK finden Sie auf der [ GitHub Seite ](https://github.com/amazon-connect/amazon-connect-chat-ios)Connect Customer Chat-SDK für iOS.
+ Weitere Informationen zum Kotlin-based Android-SDK finden Sie auf der [ GitHub Seite ](https://github.com/amazon-connect/amazon-connect-chat-android)Connect Customer Chat-SDK für Android.
**Vorteile**: Die nativen SDKs bieten robuste Funktionalität und hohe Leistung und eignen sich daher ideal für Anwendungen, die umfassende Anpassungen und eine nahtlose Benutzererfahrung erfordern.
### React-Native-Integration
Die Integration von Connect Customer Chat React Native bietet eine plattformübergreifende Lösung. Sie ermöglicht Teams, Chat-Funktionen für Android und iOS mit einer gemeinsamen Codebasis zu erstellen. Diese Methode bietet ein ausgewogenes Verhältnis zwischen Anpassung und Entwicklungseffizienz und nutzt gleichzeitig die Funktionen von React Native zur Erstellung robuster mobiler Anwendungen.
Diese Integration verwendet native Bridges für den Zugriff auf erweiterte Features und gewährleistet eine konsistente Leistung sowie ein einheitliches Benutzererlebnis auf allen Plattformen. Es ist einfacher, wichtige Funktionen wie WebSocket Kommunikation zu implementieren, indem Bibliotheken wie `react-native-websocket` und API-Aufrufe mit verwendet `axios` werden.
**Ideal für**: Teams, die die Wiederverwendung von Code maximieren und gleichzeitig die funktionale Flexibilität beibehalten möchten
## Connect Customer Arbeitsablauf bei der Chat-Integration
Das folgende Diagramm zeigt den Programmierablauf zwischen einem Kunden, der eine mobile App verwendet, und einem Kundendienstmitarbeiter. Der nummerierte Text im Diagramm entspricht dem nummerierten Text unter der Abbildung.
**Im Diagramm**
1. Wenn ein Kunde einen Chat in der mobilen App startet, sollte die App eine Anfrage zur Connect Customer Verwendung der [ StartChatContact ](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartChatContact.html) API senden. Dies erfordert bestimmte Parameter, wie den API-Endpunkt und die IDs für die [Instance](amazon-connect-instances.md) und den [Kontakt](connect-contact-flows.md)-Ablauf, um den Chat zu authentifizieren und zu initiieren.
1. Die `StartChatContact`-API interagiert mit Ihrem Backend-System, um ein Teilnehmer-Token und eine Kontakt-ID zu erhalten, die als eindeutige Identifikatoren für die Chat-Sitzung dienen.
1. Die Benutzeroberfläche der App leitet die `StartChatContact`-Antwort an das mobile SDK weiter, damit das SDK ordnungsgemäß mit dem [Teilnehmerservice von Connect Customer](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html) kommunizieren und die Chat-Sitzung des Kunden einrichten kann.
1. Das SDK stellt der Benutzeroberfläche ein [chatSession](https://github.com/amazon-connect/amazon-connect-chat-ios?tab=readme-ov-file#chatsession-apis)-Objekt zur Verfügung, das leicht verwendbare Methoden zur Interaktion mit der Chat-Sitzung enthält.
1. Im Grunde interagiert das SDK mithilfe des [AWS SDK](https://aws.amazon.com/developer/tools/) mit dem [Teilnehmerservice von Connect Customer](https://docs.aws.amazon.com/connect/latest/APIReference/API_Operations_Amazon_Connect_Participant_Service.html). Die Kommunikation mit dem Teilnehmerservice von Connect Customer ist für alle Kundeninteraktionen während der Chat-Sitzung verantwortlich. Dazu gehören Aktionen wie `CreateParticipantConnection`, `SendMessage`, `GetTranscript` oder `DisconnectParticipant`.
1. Das SDK verwaltet auch die WebSocket Verbindung, die zum Empfangen von Nachrichten, Ereignissen und Anhängen vom Agenten erforderlich ist. All dies wird vom SDK verarbeitet und analysiert sowie in einer leicht zu bedienenden Struktur auf der Benutzeroberfläche angezeigt.
## Fangen Sie an mit Connect Customer Chat-Integration
Die folgenden Schritte und Ressourcen helfen Ihnen beim Einstieg in die Integration von Connect Customer Chat in Ihre systemeigenen mobilen Anwendungen:
1. Sie können schnell einen [CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html) Stack einrichten, um das erforderliche Backend zum Aufrufen bereitzustellen, StartChatContact indem Sie sich unser [ ChatContact ](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/cloudformationTemplates/startChatContactAPI) Start-API-Beispiel unter ansehen. GitHub
1. Beispiele, die zeigen, wie Sie Ihre mobile Chat-Benutzeroberfläche mithilfe der Connect Customer Chat SDKs erstellen, finden Sie in unserem Projekt [ UI-Beispiele ](https://github.com/amazon-connect/amazon-connect-chat-ui-examples) GitHub .
Schauen Sie sich unsere [ Beispiel-Chat-Beispiele für [ iOS ](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/iOSChatExample) und ](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/androidChatExample) Android an, die zeigen, wie Sie eine Chat-Anwendung mithilfe des Connect Customer Chat-SDK für iOS/Android betreiben können.
1. Schauen Sie sich die [ GitHub Seiten [Connect Customer Chat SDK für iOS ](https://github.com/amazon-connect/amazon-connect-chat-ios) und ](https://github.com/amazon-connect/amazon-connect-chat-android)Connect Customer Chat SDK für Android an. Die GitHub Seite enthält die API-Dokumentation und einen Implementierungsleitfaden, in dem alle Voraussetzungen und Installationsschritte erläutert werden.
1. Richten Sie die React Native-Integration ein: Verwenden Sie das [ React ](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat) Native-Beispiel als Anleitung zur Implementierung einer auf React Native basierenden Lösung.
1. Wenn es Fragen oder Probleme zur Einrichtung oder Verwendung des Connect Customer Chat SDK in Ihren mobilen Anwendungen gibt, können Sie ein Problem entweder auf der Seite [Probleme mit dem Connect Customer Chat SDK für iOS](https://github.com/amazon-connect/amazon-connect-chat-ios/issues) oder auf der Seite [Probleme mit dem Connect Customer Chat SDK für Android](https://github.com/amazon-connect/amazon-connect-chat-android/issues) melden. Wenn es ein Problem mit den Beispielen für die Benutzeroberfläche des mobilen Chats gibt, können Sie ein Problem auf der Seite [Probleme mit Beispielen für die Benutzeroberfläche von Connect Customer Chat](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/issues) melden.