-
Notifications
You must be signed in to change notification settings - Fork 215
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create README.md for mobileChatExamples (#257)
- Loading branch information
Showing
1 changed file
with
77 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
# Amazon Connect Chat Mobile Integration Guide 📱💬 | ||
|
||
This guide provides detailed instructions and examples for integrating Amazon Connect Chat into mobile applications. Whether you are using WebView, Native SDKs, or React Native, this guide helps you implement and customize Amazon Connect Chat for your application. | ||
|
||
--- | ||
|
||
## Integration Options 🚀 | ||
|
||
### WebView Integration 🌐 | ||
|
||
WebView integration embeds the web-based Amazon Connect Chat experience directly into your mobile applications. On Android, this is implemented using `WebView`, and on iOS, with `WKWebView`. This method ensures full functionality with minimal development effort and is ideal for fast and consistent setups. | ||
|
||
#### Key Configuration Steps 🛠️ | ||
|
||
| Platform | Configuration Steps | | ||
| ----------- | -------------------------------------------------------------------------------------------------------------------- | | ||
| **Android** | Enable JavaScript, manage cookies via `CookieManager`, and configure necessary permissions in `AndroidManifest.xml`. | | ||
| **iOS** | Use `preferences.javaScriptEnabled` and handle cookies with `WKHTTPCookieStore`. | | ||
| **Both** | Implement secure error handling and production-ready configurations. | | ||
|
||
> **Recommendation**: WebView-based integration is ideal for rapid development and minimal maintenance while ensuring comprehensive chat functionality. | ||
--- | ||
|
||
### Native SDK Integration 📲 | ||
|
||
The Native SDKs for [Android](https://github.com/amazon-connect/amazon-connect-chat-android/) and [iOS](https://github.com/amazon-connect/amazon-connect-chat-ios) simplify the integration of Amazon Connect Chat into native mobile applications. These SDKs handle client-side chat logic and back-end communication, abstracting the complexities of session management and WebSocket communication. | ||
|
||
#### Integration Workflow 🔄 | ||
|
||
1. **Start the Chat**: Use the `StartChatContact` API to initiate a chat. This API interacts with your back-end system to obtain a participant token and contact ID. | ||
2. **Connect to the SDK**: Pass the API response to the mobile SDK for communication with the Amazon Connect Participant Service. | ||
3. **Manage the Chat Session**: The SDK exposes a `chatSession` object with methods to send messages, retrieve transcripts, and manage events. | ||
4. **Handle WebSocket Communication**: The SDK manages WebSocket connections for real-time interactions, parsing messages, events, and attachments seamlessly. | ||
|
||
#### Key Configuration Steps ⚙️ | ||
|
||
| Platform | Configuration Steps | | ||
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| **Android** | Add the SDK via `build.gradle`, design custom layouts using XML or Jetpack Compose, and implement networking with libraries like Retrofit or OkHttp. Dependency injection (e.g., Hilt or Dagger) can simplify component management. | | ||
| **iOS** | Install the SDK via CocoaPods or Swift Package Manager, build interfaces with SwiftUI or UIKit, and use the `StartChatContact` API to initiate and manage the chat session. | | ||
|
||
--- | ||
|
||
### React Native Integration 🤝 | ||
|
||
React Native integration provides a cross-platform solution for Amazon Connect Chat, allowing you to use a shared codebase for Android and iOS. This method balances customization and efficiency. | ||
|
||
#### Key Features ✨ | ||
|
||
| Feature | Description | | ||
| ----------------------- | ------------------------------------------------------------------------- | | ||
| WebSocket Communication | Uses libraries like `react-native-websocket` for WebSocket communication. | | ||
| API Calls | Implements API calls using `axios`. | | ||
| Advanced Features | Enables additional functionality through native bridges when required. | | ||
| Cross-Platform UX | Provides a consistent user experience across Android and iOS. | | ||
|
||
--- | ||
|
||
## Recommendation 🌟 | ||
|
||
For most scenarios, **WebView-based integration** is the preferred choice due to its quick implementation and fully-featured chat capabilities. Native SDK integration is ideal for applications requiring robust performance and extensive customization, while React Native suits cross-platform projects that balance efficiency and flexibility. | ||
|
||
--- | ||
|
||
## Getting Started 🚀 | ||
|
||
1. **Review SDK Documentation**: Check out the [Amazon Connect Chat SDK for iOS](https://github.com/amazon-connect/amazon-connect-chat-ios) and [Amazon Connect Chat SDK for Android](https://github.com/amazon-connect/amazon-connect-chat-android). | ||
2. **Explore UI Examples**: Refer to the [Amazon Connect Chat UI Examples](https://github.com/amazon-connect/amazon-connect-chat-ui-examples). | ||
3. **Set Up Back-End Services**: Use the provided CloudFormation template for `StartChatContact`. | ||
4. **File Issues**: For questions or issues, file an issue on the relevant GitHub repository’s Issues page. | ||
|
||
--- | ||
|
||
## Support 🙋 | ||
|
||
For assistance or feedback, use the issue tracker in the relevant GitHub repository or refer to the official [Amazon Connect documentation](https://docs.aws.amazon.com/connect/latest/adminguide/amazon-connect-chat.html). |