Alur kerja integrasi Prasyarat Instal perpustakaan Konfigurasikan kredensial AWS Mulai obrolan Buat koneksi peserta Gunakan WebSocket koneksi Kirim pesan Menangani acara Akhiri obrolan Kode sumber

Integrasikan obrolan Amazon Connect ke dalam aplikasi seluler

Topik di bagian ini menjelaskan cara membuat UI obrolan Amazon Connect khusus di aplikasi seluler Anda. Ini membutuhkan penggunaan back end obrolan Anda sendiri. Anda juga harus menggunakan Amazon Connect StartChatContactAPI untuk memulai kontak, dan API Layanan Peserta untuk mengelola partisipasi obrolan.

catatan

StartChatContactAPI memerlukan AWS penandatanganan Signature Version 4. Oleh karena itu, permintaan awal harus diarahkan melalui back end obrolan pribadi Anda. Panggilan API berikutnya ke Amazon Connect Participant Service (ACPS) dapat ditangani langsung dari aplikasi seluler.

Alur kerja integrasi

Diagram berikut menunjukkan aliran pemrograman antara pelanggan menggunakan aplikasi seluler dan agen. Teks bernomor dalam diagram sesuai dengan teks bernomor di bawah gambar.

Diagram yang menunjukkan alur program obrolan Amazon Connect.

Dalam diagram:

Saat pelanggan memulai obrolan di aplikasi seluler, aplikasi akan mengirimkan permintaan ke Amazon Connect menggunakan StartChatContactAPI. Ini memerlukan parameter tertentu, seperti titik akhir API dan ID untuk instance dan alur kontak untuk mengautentikasi dan memulai obrolan.
StartChatContactAPI berinteraksi dengan sistem back-end Anda untuk mendapatkan token peserta dan ID kontak yang bertindak sebagai pengidentifikasi unik untuk sesi obrolan.
Bagian belakang aplikasi menggunakan token peserta dan ID kontak untuk berkomunikasi dengan Amazon Connect, menyiapkan sesi obrolan pelanggan.
SDK Peserta Amazon Connect diaktifkan menggunakan token peserta, menyiapkan aplikasi untuk obrolan.
SDK Peserta menggunakan detail sesi untuk membuat jalur komunikasi yang aman dengan Amazon Connect.
Amazon Connect merespons dengan memberikan WebSocket URL melalui SDK Peserta. Aplikasi ini menggunakan URL ini untuk membuat WebSocket koneksi untuk pesan real-time.
Amazon Connect menetapkan agen dukungan ke obrolan berdasarkan alur kontak dan profil perutean.
Pesan dari agen datang melalui WebSocket koneksi. Aplikasi mobile mendengarkan WebSocket untuk menerima dan menampilkan pesan dari agen, dan untuk mengirim pesan pelanggan kembali.

Prasyarat

Anda harus memiliki prasyarat berikut untuk mengintegrasikan obrolan Amazon Connect dengan aplikasi seluler:

Membuat instans Amazon Connect.

— atau —

Jika Anda memiliki instans Connect, ikuti langkah-langkah berikut GitHub untuk mengaktifkan obrolan untuk instans tersebut.
Buat Alur Kontak Amazon Connect, siap menerima kontak obrolan.
- Perhatikan ID instance.
- Temukan contactFlowId untukSampel aliran masuk (pengalaman kontak pertama).
Menerapkan bagian belakang obrolan Amazon Connect khusus. Lihat template startChatContact API di GitHub.
- Menyebarkan template fungsi startChatContactLambda CloudFront .
- Tambahkanregion,API_GATEWAY_ID,contactFlowId, dan instanceID ke file Config template.

Instal perpustakaan

Anda memulai proses integrasi dengan menginstal pustaka untuk iOS dan Android. Anda harus menginstal kedua set perpustakaan.

iOS: Buka aws-sdk-iosrepositori GitHub dan instal yang berikut ini:


pod 'AWSCore'
pod 'AWSConnectParticipant'
pod 'Starscream', '~> 4.0'

Android: Buka aws-sdk-androidrepositori GitHub dan instal yang berikut ini:


implementation("com.amazonaws:aws-android-sdk-core:2.73.0")
implementation("com.amazonaws:aws-android-sdk-connectparticipant:2.73.0")

Konfigurasikan kredensial AWS

Setelah menginstal kedua kumpulan pustaka, Anda mendaftar dengan Amazon Connect Service dan Amazon Connect Participant Service. Untuk melakukan itu, dalam file Config untuk setiap sistem operasi, gunakan AWS kredensi Anda dan ganti secretKey nilai accessKey dan dengan string kosong (“”) seperti yang ditunjukkan pada contoh berikut.

penting

Anda harus menentukan Wilayah yang Anda uji.

iOS: Gunakan AWSStaticCredentialsProvider untuk pendaftaran Layanan Amazon Connect dan Layanan Peserta.


private let config = Config()
 let credentials = AWSStaticCredentialsProvider(accessKey: "", secretKey: "")
 let participantService = AWSServiceConfiguration(region: config.region, credentialsProvider: credentials)!
 AWSConnectParticipant.register(with: participantService, forKey: "")
 connectParticipantClient = AWSConnectParticipant.init(forKey: "")

Android: Inisialisasi AmazonConnectParticipantAsyncClient dan atur Wilayah.


private var connectParticipantClient: AmazonConnectParticipantAsyncClient = AmazonConnectParticipantAsyncClient()
private val chatConfiguration = Config
init {
      connectParticipantClient.setRegion(Region.getRegion(chatConfiguration.region))
     }

catatan

Anda dapat mengunduh file Config dari. GitHub Anda harus mengedit kedua file Config.

Mulai obrolan

Selanjutnya, Anda harus mengintegrasikan StartChatContactAPI yang disediakan oleh Amazon Connect. API memulai percakapan dengan mendaftarkan niat pelanggan untuk mengobrol dengan agen.

catatan

Untuk menerapkan fungsi StartChatContact Lambda, gunakan template CloudFront pada. GitHub

Untuk iOS dan Android, panggilan StartChatContact API memerlukan beberapa informasi:

InstanceId: Pengidentifikasi instans Amazon Connect.
ContactFlowId: Pengidentifikasi alur kontak untuk menangani obrolan.
ParticipantDetails: Informasi tentang peserta, seperti nama tampilan pelanggan.
Attributes: Informasi tambahan tentang kontak yang mungkin berguna untuk merutekan atau menangani obrolan dalam Amazon Connect.

penting

Anda harus menggunakan AWS Signature Version 4 (SigV4) untuk menandatangani panggilan API. Proses SigV4 menambahkan informasi otentikasi ke permintaan AWS API yang dikirim melalui HTTP. Untuk klien seluler, kami sarankan untuk melakukan proses penandatanganan di sisi server. Aplikasi seluler Anda mengirimkan permintaan ke server Anda, yang kemudian menandatangani permintaan dan meneruskannya ke Amazon Connect. Ini membantu mengamankan AWS kredensi Anda.

Untuk iOS:


func startChatSession(displayName: String, completion: 
    @escaping (Result<StartChatResponse, Error>) -> Void) {
    // Your back end server will handle SigV4 signing and make the API call to Amazon Connect 
    // Use the completion handler to process the response or error 
}

Untuk Android:


// Make a network call to your back end server 
suspend fun startChatSession(displayName: String): StartChatResponse {
    // Your back end server will handle SigV4 signing if needed and make the 
    // API call to Amazon Connect 
    // Handle the response or error accordingly 
}

Buat koneksi peserta

Anda menggunakan detail yang diterima dari panggilan StartChatContactAPI untuk membuat koneksi peserta. Anda kemudian memanggil AWS Connect peserta SDK, yang mengembalikan WebSocket URL yang diperlukan untuk membuat koneksi.

Contoh berikut menunjukkan cara membuat koneksi untuk iOS:


// Swift code snippet for iOS participant connection setup
/// Creates the participant's connection. https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html
/// - Parameter: participantToken: The ParticipantToken as obtained from StartChatContact API response.
func createParticipantConnection() {
    let createParticipantConnectionRequest = AWSConnectParticipantCreateParticipantConnectionRequest()
    createParticipantConnectionRequest?.participantToken = self.participantToken
    createParticipantConnectionRequest?.types = ["WEBSOCKET", "CONNECTION_CREDENTIALS"]
    connectParticipantClient?
        .createParticipantConnection (createParticipantConnectionRequest!)
        .continueWith(block: {
            (task) -> Any? in
            self.connectionToken = task.result!.connectionCredentials!.connectionToken
            self.websocketUrl = task.result!.websocket!.url
            return nil
        }
        ).waitUntilFinished()
    }

Contoh berikut menunjukkan cara membuat koneksi untuk Android:


// Kotlin code snippet for Android participant connection setup
/// Creates the participant's connection. https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html
/// - Parameter: participantToken: The ParticipantToken as obtained from StartChatContact API response.
fun createParticipantConnection(
    _participantToken: String,
      handler: AsyncHandler<CreateParticipantConnectionRequest, CreateParticipantConnectionResult>
    ) {
          val createParticipantConnectionRequest = CreateParticipantConnectionRequest().apply {
              setType(listOf("WEBSOCKET", "CONNECTION_CREDENTIALS"))
              participantToken = _participantToken
       }
          connectParticipantClient.createParticipantConnectionAsync(
              createParticipantConnectionRequest,
              handler
        )
    }

Gunakan WebSocket koneksi

Gunakan SDK Peserta untuk mendapatkan WebSocket URL koneksi obrolan.

Untuk menerapkan WebSocket manajemen, gunakan solusi yang ada atau terapkan solusi Anda sendiri.
Untuk menangani pesan dan peristiwa Websocket, terapkan solusi Anda sendiri, atau gunakan solusi kami untuk iOS dan Android.
Pastikan Anda mencakup semua jenis pesan dan acara:
- kasus typing = "application/vnd.amazonaws.connect.event.typing"
- kasus messageDelivered = "application/vnd.amazonaws.connect.event.message.delivered"
- kasus messageRead = "application/vnd.amazonaws.connect.event.message.read"
- kasus metaData = "application/vnd.amazonaws.connect.event.message.metadata"
- kasus joined = "application/vnd.amazonaws.connect.event.participant.joined"
- kasus left = "application/vnd.amazonaws.connect.event.participant.left"
- kasus ended = "application/vnd.amazonaws.connect.event.chat.ended"
- kasus plainText = "text/plain"
- kasus richText = "text/markdown"
- kasus interactiveText = "application/vnd.amazonaws.connect.message.interactive"

Gambar berikut menunjukkan contoh default Connect chat. Angka dalam gambar sesuai dengan teks bernomor di bawah ini.

Gambar yang menunjukkan komponen jendela obrolan Amazon Connect.

Pada gambar, mulai dari dekat bagian atas:

Indikator pengetikan menunjukkan siapa yang mengetik pesan.
Contoh ini menggunakan pesan teks biasa. Anda dapat mengaktifkan penggunaan penurunan harga jika diinginkan.
Kontrol daftar interaktif memberi pengguna daftar pilihan, seperti layanan pelanggan atau penagihan.
Balasan cepat interaktif memberikan tanggapan yang telah diprogram sebelumnya untuk pertanyaan atau frasa umum.

Kirim pesan

Anda menggunakan SendMessage fungsi untuk mengirim pesan obrolan.


/// To send a message using the Participant SDK.
/// - Parameters:
///   - messageContent: The content of the message.
///   - connectionToken: The authentication token associated with the connection - Received from Participant Connection
///   - contentType: text/plain, text/markdown, application/json, and application/vnd.amazonaws.connect.message.interactive.response
func sendChatMessage(messageContent: String) {
    let sendMessageRequest = AWSConnectParticipantSendMessageRequest()
    sendMessageRequest?.connectionToken = self.connectionToken
    sendMessageRequest?.content = messageContent
    sendMessageRequest?.contentType = "text/plain"
    connectParticipantClient?
        .sendMessage(sendMessageRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        })
}

Menangani acara

Gunakan SendEvent fungsi dalam SDK Peserta untuk acara seperti mengetik dan membaca tanda terima.


/// Sends an event such as typing, joined, left etc.
/// - Parameters:
///   - contentType: The content type of the request
///   - content: The content of the event to be sent (for example, message text). For content related to message receipts, this is supported in the form of a JSON string.
func sendEvent(contentType: ContentType, content: String = "") {
    let sendEventRequest = AWSConnectParticipantSendEventRequest()
    sendEventRequest?.connectionToken = self.connectionToken
    sendEventRequest?.contentType = contentType.rawValue
    sendEventRequest?.content = content // Set the content here
    connectParticipantClient?
        .sendEvent(sendEventRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        })
}

Akhiri obrolan

Untuk mengakhiri obrolan, gunakan disconnectParticipant fungsi di SDK Peserta.


/// Disconnects a participant.
/// - Parameter: connectionToken: The authentication token associated with the connection - Received from Participant Connection
func endChat() {
    let disconnectParticipantRequest = AWSConnectParticipantDisconnectParticipantRequest()
    disconnectParticipantRequest?.connectionToken = self.connectionToken
    connectParticipantClient?.disconnectParticipant(disconnectParticipantRequest!)
        .continueWith(block: { (task) -> Any? in
            return nil
        }).waitUntilFinished()
    self.websocketUrl = nil
}

Kode sumber

Contoh proyek berikut GitHub menunjukkan cara menerapkan Connect chat.

iOS: Demo Obrolan Asli iOS.
Android: Demo Obrolan Asli Android.

Awas Javascript dinonaktifkan atau tidak tersedia di browser Anda.

Untuk menggunakan Dokumentasi AWS, Javascript harus diaktifkan. Lihat halaman Bantuan browser Anda untuk petunjuk.

Konvensi Dokumen

Memecahkan masalah dengan widget komunikasi Anda

Buat tanggapan cepat