Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Siapkan kemampuan dalam aplikasi, web, panggilan video, dan berbagi layar
<a name="inapp-calling"></a>

Kemampuan panggilan Amazon Connect dalam aplikasi, web, dan video memungkinkan pelanggan Anda untuk menghubungi Anda tanpa pernah meninggalkan web atau aplikasi seluler Anda. Anda dapat menggunakan kemampuan ini untuk menyampaikan informasi kontekstual ke. Amazon Connect Ini memungkinkan Anda untuk mempersonalisasi pengalaman pelanggan berdasarkan atribut seperti profil pelanggan atau informasi lainnya, seperti tindakan yang sebelumnya diambil dalam aplikasi.

## Hal-hal penting untuk diketahui
<a name="inapp-calling-important"></a>
+ Selama sesi panggilan video atau berbagi layar, agen dapat melihat video atau berbagi layar pelanggan bahkan ketika pelanggan ditahan. Adalah tanggung jawab pelanggan untuk menangani PII sesuai dengan itu. Jika Anda ingin mengubah perilaku ini, Anda dapat membangun CCP kustom dan widget komunikasi. Untuk informasi selengkapnya, lihat [Integrasikan in-app, web, panggilan video, dan berbagi layar secara native ke dalam aplikasi Anda](config-com-widget2.md).

## Widget komunikasi: Konfigurasikan obrolan, suara, dan video semuanya di satu tempat
<a name="one-page"></a>

Untuk mengatur panggilan dalam aplikasi, web, dan video, Anda menggunakan halaman **widget Komunikasi**. Ini mendukung obrolan, suara, video, dan berbagi layar. Gambar berikut menunjukkan bagian **Opsi komunikasi** halaman saat dikonfigurasi untuk semua opsi ini. 

![\[Bagian Communication options pada halaman Create a communication widget.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/comm-widget-all.png)


## Multi-pengguna dalam aplikasi, web, dan panggilan video
<a name="multi-user"></a>

Anda dapat menambahkan hingga empat pengguna tambahan ke web, in-app atau panggilan video yang sedang berlangsung atau terjadwal, dengan total enam peserta: agen, pengguna pertama, dan empat peserta lainnya (pengguna atau agen).

Misalnya, untuk membantu menutup transaksi hipotek, Anda dapat meminta agen dan pelanggan, pasangan pelanggan, penerjemah, dan bahkan supervisor (yaitu, agen lain) untuk membantu menyelesaikan masalah dengan cepat.

Untuk mempelajari cara mengaktifkan panggilan web, in-app, dan video multi-pengguna, lihat. [Aktifkan panggilan dalam aplikasi, web, dan video multi-pengguna](enable-multiuser-inapp.md)

## Cara mengatur in-app, web, panggilan video, dan berbagi layar
<a name="inapp-options"></a>

Ada dua cara untuk menyematkan panggilan Amazon Connect dalam aplikasi, web, dan video, dan berbagi layar ke situs web atau aplikasi seluler Anda: 
+ Opsi 1: [Konfigurasikan widget out-of-the-box komunikasi](config-com-widget1.md). Anda dapat menggunakan pembuat UI untuk menyesuaikan font dan warna, dan mengamankan widget sehingga hanya dapat diluncurkan dari situs web Anda. 
+ Opsi 2: [Integrasikan panggilan dalam aplikasi, web, dan video secara native ke dalam aplikasi seluler Anda](config-com-widget2.md). Pilih opsi ini untuk membangun widget komunikasi dari awal dan mengintegrasikannya dengan aplikasi seluler atau situs web Anda. Gunakan klien Amazon Connect APIs dan Amazon Chime SDK APIs untuk mengintegrasikan secara native ke dalam aplikasi seluler atau situs web Anda.

**catatan**  
Jika Anda memiliki desktop agen khusus, Anda tidak perlu membuat perubahan apa pun untuk panggilan dalam aplikasi dan web Amazon Connect. Namun, Anda perlu [mengintegrasikan panggilan video dan berbagi layar](integrate-video-calling-for-agents.md).

# Konfigurasikan widget out-of-the-box komunikasi di Amazon Connect
<a name="config-com-widget1"></a>

Gunakan opsi ini untuk membuat widget komunikasi untuk [browser](connect-supported-browsers.md#browsers-inapp) desktop dan seluler. Di akhir prosedur ini, Amazon Connect menghasilkan cuplikan kode HTML khusus yang Anda salin ke kode sumber situs web Anda.

1. Masuk ke situs web Amazon Connect admin menggunakan akun Admin atau akun pengguna yang memiliki **Saluran dan alur**, **widget Komunikasi - Buat** izin di profil keamanannya.

1. Di Amazon Connect, di menu navigasi kiri, pilih **Saluran**, **widget Komunikasi**. 

1. Wizard memandu Anda melalui tiga langkah berikutnya. 

## Langkah 1: Pilih saluran komunikasi
<a name="widgetdetails"></a>

1. Pada halaman **widget Komunikasi**, masukkan **Nama** dan **Deskripsi** untuk widget komunikasi. 
**catatan**  
Nama harus unik untuk setiap widget komunikasi yang dibuat dalam instance Amazon Connect.

1. Di bagian **Opsi komunikasi**, pilih bagaimana pelanggan Anda dapat terlibat dengan widget Anda. Gambar berikut menunjukkan opsi untuk memungkinkan panggilan web, video, dan berbagi layar untuk pelanggan.   
![\[Halaman widget komunikasi dikonfigurasi untuk panggilan web, video, dan berbagi layar.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/comm-widget-page-call.png)

1. Di bagian **Panggilan Web**, pilih apakah akan mengaktifkan pengalaman berbagi video dan layar untuk pelanggan Anda. Gambar sebelumnya menunjukkan opsi bahwa pelanggan dapat melihat video agen, menyalakan video mereka, dan memungkinkan agen dan pelanggan untuk berbagi layar mereka. Untuk informasi tentang pengaturan pembatasan pada berbagi layar, lihat[Aktifkan pembatasan URL untuk berbagi layar](screen-sharing-url-restriction.md).

1. Jangan pilih **Save and continue** (Simpan dan lanjutkan).

## Langkah 2: Sesuaikan widget
<a name="customizewidget"></a>

Saat Anda memilih opsi ini, pratinjau widget diperbarui secara otomatis sehingga Anda dapat melihat seperti apa pengalaman itu bagi pelanggan Anda.

![\[Pratinjau widget komunikasi.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/netra-call-preview.png)


**Tentukan gaya tombol akses widget**

1. Pilih warna untuk latar belakang tombol dengan memasukkan nilai hex ([kode warna HTML](https://htmlcolorcodes.com/)).

1. Pilih **Putih** atau **Hitam** untuk warna ikon. Warna ikon tidak dapat disesuaikan.

**Sesuaikan nama dan gaya tampilan**

1. Berikan nilai untuk pesan header dan warna, dan warna latar belakang widget. 

1. **URL Logo**: Masukkan URL ke spanduk logo Anda dari bucket Amazon S3 atau sumber online lainnya.
**catatan**  
Pratinjau widget komunikasi di halaman kustomisasi tidak akan menampilkan logo jika berasal dari sumber online selain bucket Amazon S3. Namun, logo akan ditampilkan ketika widget komunikasi yang disesuaikan diimplementasikan ke halaman Anda.

   Spanduk harus dalam format.svg, .jpg atau .png. Gambar bisa 280px (lebar) dengan 60px (tinggi). Gambar apa pun yang lebih besar dari dimensi tersebut akan diskalakan agar sesuai dengan ruang komponen logo 280x60.

   1. Untuk petunjuk tentang cara mengunggah file seperti spanduk logo ke S3, lihat [Mengunggah objek](https://docs.aws.amazon.com/AmazonS3/latest/userguide/upload-objects.html) di *Panduan Pengguna Layanan Penyimpanan Sederhana Amazon*.

   1. Pastikan bahwa izin gambar diatur dengan benar sehingga widget komunikasi memiliki izin untuk mengakses gambar. Untuk informasi tentang cara membuat objek S3 dapat diakses publik, lihat [Langkah 2: Menambahkan kebijakan bucket di topik](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteAccessPermissionsReqd.html#bucket-policy-static-site) *Menyetel izin untuk akses situs web*.

## Langkah 3: Tambahkan domain Anda untuk widget
<a name="widgetdomain"></a>

Langkah ini memungkinkan Anda untuk mengamankan widget komunikasi sehingga dapat diluncurkan hanya dari situs web Anda.

1. Masukkan domain situs web tempat Anda ingin menempatkan widget komunikasi. Widget komunikasi hanya dimuat di situs web yang Anda pilih dalam langkah ini. 

   Pilih **Tambahkan domain** untuk menambahkan hingga 50 domain.  
![\[Opsi tambahkan domain.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/chatwidget-add-domain.png)
**penting**  
Periksa kembali apakah situs web URLs Anda valid dan tidak mengandung kesalahan. Sertakan URL lengkap yang dimulai dengan https://.
Sebaiknya gunakan https://untuk situs web dan aplikasi produksi Anda.

1. Di bawah **Tambahkan keamanan untuk permintaan widget komunikasi Anda**, untuk pengalaman penyiapan tercepat pilih **Tidak - Saya akan lewati**.

   Kami merekomendasikan memilih **Ya** untuk kemampuan untuk memverifikasi pengguna diautentikasi. Untuk informasi selengkapnya, lihat [Personalisasi pengalaman pelanggan untuk panggilan dalam aplikasi, web, dan video di Amazon Connect](optional-widget-steps.md). 

1. Jangan pilih **Save and continue** (Simpan dan lanjutkan).

   Sukses\$1 Widget Anda telah dibuat. Salin kode yang dihasilkan dan tempel di setiap halaman situs web Anda di mana Anda ingin widget komunikasi muncul.

## Aktifkan agen Anda untuk in-app, web, dan video-call, dan berbagi layar
<a name="agent-cx-cw"></a>

Untuk memungkinkan agen menggunakan panggilan video dan berbagi layar, tetapkan **Panel Kontrol Kontak (CCP)**, **Panggilan video - Izin akses ke** profil keamanan mereka.

Ruang kerja Amazon Connect agen mendukung panggilan Amazon Connect dalam aplikasi, web, dan video, serta berbagi layar. Anda dapat menggunakan konfigurasi, perutean, analitik, dan aplikasi agen yang sama seperti panggilan telepon dan obrolan. Untuk memulai, satu-satunya langkah adalah mengaktifkan profil keamanan agen Anda dengan izin untuk melakukan panggilan video dan berbagi layar.

Untuk desktop agen khusus, tidak ada perubahan yang diperlukan untuk panggilan Amazon Connect dalam aplikasi dan web. Aktifkan profil keamanan agen Anda dengan izin untuk melakukan panggilan video dan berbagi layar, dan ikuti panduan di bawah ini tentang cara mengintegrasikan panggilan video ke desktop agen Anda.

## Bagaimana perangkat klien memulai panggilan dalam aplikasi atau web
<a name="diagram-option1"></a>

Diagram berikut menunjukkan urutan peristiwa untuk perangkat klien (aplikasi seluler atau browser) untuk memulai panggilan dalam aplikasi atau web.

![\[Diagram konseptual yang menunjukkan bagaimana perangkat klien memulai panggilan.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/netra-gs-diagram-option1.png)


1. (Opsional) Anda dapat meneruskan atribut yang ditangkap di situs web dan memvalidasinya dengan token web JSON (JWT). 

1. Pelanggan mengklik widget komunikasi di situs web atau aplikasi seluler Anda. 

1. Widget komunikasi memulai panggilan web Amazon Connect dengan meneruskan atribut yang terkandung dalam JWT. 

1. Kontak mencapai aliran, dirutekan, dan ditempatkan dalam antrian. 

1. Agen menerima kontak.

1. (Opsional) Jika video diaktifkan untuk pelanggan dan agen, mereka dapat memulai video mereka.

## Informasi selengkapnya
<a name="cw-more-resources"></a>

Untuk informasi tambahan tentang persyaratan untuk kemampuan panggilan dalam aplikasi, web, dan video, lihat topik berikut:
+ [Persyaratan stasiun kerja agen untuk panggilan aplikasi, web, dan video di Amazon Connect](videocalling-networking-requirements.md)
+ [Browser dan OS seluler yang didukung untuk kemampuan panggilan dalam aplikasi, web, dan video](connect-supported-browsers.md#browsers-inapp) 

# Integrasikan in-app, web, panggilan video, dan berbagi layar secara native ke dalam aplikasi Anda
<a name="config-com-widget2"></a>

Untuk mengintegrasikan Amazon Connect dalam aplikasi, web, panggilan video, dan berbagi layar dengan aplikasi Anda:

1. Gunakan Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API untuk membuat kontak.

1. Kemudian gunakan detail yang ditampilkan oleh panggilan API untuk bergabung dengan panggilan menggunakan pustaka Amazon Chime klien untuk [iOS](https://github.com/aws/amazon-chime-sdk-ios), [Android](https://github.com/aws/amazon-chime-sdk-android), atau [JavaScript](https://github.com/aws/amazon-chime-sdk-js). 

Untuk informasi tentang membuat peserta tambahan, lihat[Aktifkan panggilan dalam aplikasi, web, dan video multi-pengguna](enable-multiuser-inapp.md). 

[Lihat repositori Github berikut untuk contoh aplikasi: -calling-examples. amazon-connect-in-app](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples) 

**Topics**
+ [Bagaimana perangkat klien memulai panggilan dalam aplikasi atau web](#diagram-option2)
+ [Memulai](#diagram-option2-gs)
+ [Langkah opsional](#optional-steps)

## Bagaimana perangkat klien memulai panggilan dalam aplikasi atau web
<a name="diagram-option2"></a>

Diagram berikut menunjukkan urutan peristiwa untuk perangkat klien (aplikasi seluler atau browser) untuk memulai panggilan dalam aplikasi atau web.

![\[Diagram konseptual yang menunjukkan bagaimana perangkat klien memulai panggilan.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/netra-gs-diagram.png)


1. Pelanggan Anda menggunakan aplikasi klien (situs web atau aplikasi) untuk memulai panggilan dalam aplikasi atau web.

1. Aplikasi klien (situs web atau aplikasi seluler) atau server web menggunakan Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API untuk memulai kontak yang meneruskan atribut atau konteks apa pun ke Amazon Connect.

1. Aplikasi klien bergabung dengan panggilan menggunakan detail yang dikembalikan dari [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)dalam langkah 2.

1. (Opsional) Klien menggunakan [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)API untuk menerima `ConnectionToken` yang digunakan untuk mengirim DTMF melalui API. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

1. Kontak mencapai aliran dan dirutekan berdasarkan aliran dan ditempatkan dalam antrian.

1. Agen menerima kontak.

1. (Opsional) Jika video diaktifkan untuk pelanggan dan agen, mereka dapat memulai video mereka.

1. (Opsional - tidak ditampilkan dalam diagram) Peserta tambahan dapat ditambahkan menggunakan [CreateParticipant](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipant.html)dan [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html) APIs. 

## Memulai
<a name="diagram-option2-gs"></a>

Berikut ini adalah langkah-langkah tingkat tinggi untuk memulai:

1. Gunakan [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API untuk membuat kontak. API mengembalikan detail yang diperlukan untuk klien Amazon Chime SDK untuk bergabung dengan panggilan.

1. Buat instance objek `MeetingSessionConfiguration` klien Amazon Chime SDK menggunakan konfigurasi yang dikembalikan oleh. [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)

1. Instantiate `DefaultMeetingSession` klien Amazon Chime SDK `MeetingSessionConfiguration` dengan, yang dibuat pada langkah 2 untuk membuat sesi rapat klien. 
   + iOS

     ```
     let logger = ConsoleLogger(name: "logger") 
     let meetingSession = DefaultMeetingSession(
         configuration: meetingSessionConfig, 
         logger: logger
     )
     ```
   + Android

     ```
     val logger = ConsoleLogger()
     val meetingSession = DefaultMeetingSession(
         configuration = meetingSessionConfig,
         logger = logger,
         context = applicationContext
     )
     ```
   + JavaScript

     ```
     const logger = new ConsoleLogger('MeetingLogs', LogLevel.INFO);
     const deviceController = new DefaultDeviceController(logger);
     const configuration = new MeetingSessionConfiguration(
         meetingResponse, 
         attendeeResponse
     );
     const meetingSession = new DefaultMeetingSession(
         configuration, 
         logger, 
         deviceController
     );
     ```

1. Gunakan `meetingSession.audioVideo.start()` metode ini untuk bergabung dengan kontak WebRTC dengan audio.
   + iOS/Android

     ```
     meetingSession.audioVideo.start()
     ```
   + JavaScript

     ```
     await meetingSession.audioVideo.start();
     ```

1. Gunakan `meetingSession.audioVideo.stop()` metode untuk menggantung kontak WebRTC.
   + iOS/Android

     ```
     meetingSession.audioVideo.stop()
     ```
   + JavaScript

     ```
     meetingSession.audioVideo.stop();
     ```

## Langkah opsional
<a name="optional-steps"></a>

Untuk operasi tambahan dan dokumentasi API yang komprehensif, lihat panduan ikhtisar API khusus platform:
+ **iOS: Ikhtisar** [API](https://aws.github.io/amazon-chime-sdk-ios/guides/api_overview.html)
+ **Android**: [Ikhtisar API](https://aws.github.io/amazon-chime-sdk-android/guides/api_overview.html)
+ **JavaScript**: [Ikhtisar API](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md)

### Kirim nada DTMF
<a name="send-dtmf-tones"></a>

Untuk mengirim DTMF ke panggilan, diperlukan dua Layanan Peserta Amazon Connect: APIs [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)dan masing-masing. [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)

**catatan**  
`contentType`untuk SendMessage API harus`audio/dtmf`.

1. Memohon [CreateParticipantConnection](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_CreateParticipantConnection.html)untuk mengambil`ConnectionToken`. (`ParticipantToken`diperlukan untuk memanggil API ini. Anda dapat menemukannya di [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)jawabannya.)

1. Dengan`ConnectionToken`, panggil [SendMessage](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_SendMessage.html)untuk mengirim digit DTMF.

### Pilih perangkat audio
<a name="select-audio-devices"></a>

Untuk memilih input/output perangkat audio, Anda dapat menggunakan metode dari klien Amazon Chime SDK untuk Android dan iOS atau kemampuan iOS asli [untuk iOS](https://developer.apple.com/documentation/avkit/avroutepickerview).

**iOS/Android**

```
meetingSession.audioVideo.listAudioDevices()
meetingSession.audioVideo.chooseAudioDevice(mediaDevice)
```

**JavaScript**

```
await meetingSession.audioVideo.listAudioInputDevices();
await meetingSession.audioVideo.listAudioOutputDevices();
await meetingSession.audioVideo.startAudioInput(device);
await meetingSession.audioVideo.chooseAudioOutput(deviceId);
```

### Bisukan dan nyahbisukan audio
<a name="mute-unmute-audio"></a>

Untuk bisu dan unmute, gunakan dan. `meetingSession.audioVideo.realtimeLocalMute()` `meetingSession.audioVideo.realtimeLocalUnmute()`

**iOS/Android**

```
meetingSession.audioVideo.realtimeLocalMute()
meetingSession.audioVideo.realtimeLocalUnmute()
```

**JavaScript**

```
meetingSession.audioVideo.realtimeMuteLocalAudio();
meetingSession.audioVideo.realtimeUnmuteLocalAudio();
```

### Mulai video diri
<a name="start-self-video"></a>

Untuk memulai video sendiri, gunakan`meetingSession.audioVideo.startLocalVideo()`. Lihat panduan API pustaka klien untuk informasi selengkapnya tentang cara menghitung dan memilih perangkat tertentu.

**iOS/Android**

```
meetingSession.audioVideo.startLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.startLocalVideoTile();
```

### Hentikan video diri
<a name="stop-self-video"></a>

Untuk menghentikan video diri, gunakan`meetingSession.audioVideo.stopLocalVideo()`.

**iOS/Android**

```
meetingSession.audioVideo.stopLocalVideo()
```

**JavaScript**

```
meetingSession.audioVideo.stopLocalVideoTile();
```

### Aktifkan video agen
<a name="enable-agent-video"></a>

Untuk memungkinkan menerima dan memuat video agen di dalam aplikasi, gunakan file`meetingSession.audioVideo.startRemoteVideo()`. Anda juga perlu menerapkan pengamat ubin video dan mengikat ubin video untuk menampilkan tampilan.

**iOS/Android**

```
meetingSession.audioVideo.startRemoteVideo()
// Implement VideoTileObserver to handle video tiles
meetingSession.audioVideo.addVideoTileObserver(observer)
// In videoTileDidAdd callback:
meetingSession.audioVideo.bindVideoView(videoView, tileId: tileState.tileId)
```

**JavaScript**

```
// Remote video is received automatically when available
// Implement AudioVideoObserver to handle video tiles
meetingSession.audioVideo.addObserver(observer);
// In videoTileDidUpdate callback:
meetingSession.audioVideo.bindVideoElement(tileId, videoElement);
```

Referensikan panduan SDK khusus platform untuk detail implementasi ubin video yang lengkap.

### Nonaktifkan video agen
<a name="disable-agent-video"></a>

Untuk melarang menerima dan memuat video agen di dalam aplikasi, gunakan file. `meetingSession.audioVideo.stopRemoteVideo()`

**iOS/Android**

```
meetingSession.audioVideo.stopRemoteVideo()
meetingSession.audioVideo.unbindVideoView(tileId)
```

**JavaScript**

```
meetingSession.audioVideo.unbindVideoElement(tileId);
```

### Gunakan pesan data
<a name="use-data-messages"></a>

Anda dapat menggunakan [pesan data](https://github.com/aws/amazon-chime-sdk-js/blob/main/guides/03_API_Overview.md#9-send-and-receive-data-messages-optional) jika Anda perlu mengirim status apa pun dari sisi agen ke pengguna akhir. Misalnya, ketika pelanggan ditahan, Anda dapat mengirim pesan data ke aplikasi pelanggan untuk menampilkan pesan yang memberi tahu mereka bahwa mereka ditahan dan video/screen berbagi mereka masih dikirim, atau Anda dapat mematikan video/screen pembagian.

**iOS/Android**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs)
meetingSession.audioVideo.addRealtimeDataMessageObserver(topic, observer)
```

**JavaScript**

```
meetingSession.audioVideo.realtimeSendDataMessage(topic, data, lifetimeMs);
meetingSession.audioVideo.realtimeSubscribeToReceiveDataMessage(topic, callback);
```

### Dengarkan acara berhenti
<a name="listen-for-stop-events"></a>

Anda dapat mendengarkan acara ketika partisipasi Kontak berakhir melalui `audioVideoDidStop` pengamat. Kode status tertentu dapat bervariasi menurut platform.

#### Panggilan mencapai kapasitas
<a name="call-reaches-capacity"></a>

Ketika lebih dari 6 orang mencoba untuk bergabung dengan panggilan, peserta tambahan akan menerima kesalahan berikut dan tidak dapat bergabung sampai orang lain pergi.
+ **iOS:** `MeetingSessionStatusCode.audioCallAtCapacity` atau `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioCallAtCapacity` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallAtCapacity` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Peserta dihapus dari panggilan
<a name="participant-removed-from-call"></a>

Ketika peserta dihapus dari panggilan oleh agen tetapi kontak berlanjut untuk peserta lain, mereka akan menerima kode status berikut. Perhatikan bahwa jika penghapusan peserta mengarah ke akhir kontak, mereka akan menerima salah satu dari status ini atau status akhir kontak.
+ **iOS:** `MeetingSessionStatusCode.audioServerHungup` atau `MeetingSessionStatusCode.audioAuthenticationRejected`
+ **Android:** `MeetingSessionStatusCode.AudioServerHungup` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`
+ **JavaScript:** `MeetingSessionStatusCode.AudioAttendeeRemoved` atau `MeetingSessionStatusCode.AudioAuthenticationRejected`

#### Kontak berakhir
<a name="contact-ends"></a>

Ketika kontak yang sebenarnya berakhir sepenuhnya untuk semua peserta, mereka akan menerima kode status berikut.
+ **iOS:** `MeetingSessionStatusCode.audioCallEnded`
+ **Android:** `MeetingSessionStatusCode.AudioCallEnded`
+ **JavaScript:** `MeetingSessionStatusCode.AudioCallEnded`

# Aktifkan panggilan dalam aplikasi, web, dan video multi-pengguna
<a name="enable-multiuser-inapp"></a>

Amazon Connect mendukung penambahan pengguna tambahan untuk bergabung dengan panggilan dalam aplikasi, web, dan video dalam panggilan yang ada. Anda dapat menambahkan hingga empat pengguna tambahan ke dalam aplikasi, web, atau panggilan video yang sedang berlangsung atau dijadwalkan, dengan total enam peserta: agen, pengguna pertama, dan empat peserta lainnya (pengguna atau agen).

## Cara menambahkan peserta ke panggilan multi-pengguna
<a name="how-to-add-participants"></a>

1. Untuk mengaktifkan panggilan multi pengguna, Anda perlu mengaktifkan [pemantauan kontak multi-pihak yang disempurnakan](monitor-conversations.md) dari Amazon Connect konsol.

1. Setelah ini selesai, Anda dapat memanfaatkan Amazon Connect [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API yang ada untuk membuat kontak, dan merutekan kontak ini ke agen.

1. Untuk menambahkan peserta tambahan, pertama-tama buat peserta yang lewat `ContactId` dari respons [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API ke [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)API. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)tidak akan berhasil sampai penelepon asli telah terhubung ke agen. Kemampuan video dan screenshare untuk peserta dapat diatur di `ParticipantDetails.ParticipantCapabilities` lapangan.

1. Ketika berhasil [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)diselesaikan, ia mengembalikan [token peserta](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html#connect-CreateParticipant-response-ParticipantCredentials). Token ini dapat digunakan dalam permintaan [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)dengan `Type` set ke`WEBRTC_CONNECTION`. Responsnya mencakup [ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)yang dapat digunakan untuk bergabung dengan rapat menggunakan [Library Klien SDK Amazon Chime](https://docs.aws.amazon.com/chime-sdk/latest/dg/mtgs-sdk-client-lib.html) untuk peserta tambahan yang dibuat. Ikuti [petunjuk integrasi](config-com-widget2.md) untuk memungkinkan pengguna akhir aplikasi Anda bergabung dalam rapat.
**catatan**  
[CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)mengembalikan kesalahan Permintaan Buruk jika agen belum terhubung ke kontak. Untuk aplikasi bisnis di mana pengguna dapat mencoba bergabung sebelum agen terhubung, lihat[Menangani gabungan pengguna bersamaan](#handling-concurrent-joins).

1. Pelanggan tambahan dapat terhubung kapan saja setelah [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)pengembalian. Setelah peserta bergabung, [semua perilaku suara dan rekaman tambahan mirip dengan kemampuan multi partai](multi-party-calls.md). Peserta baru dapat mengaktifkan video dan berbagi layar mereka, jika kemampuan mereka telah diaktifkan dalam permintaan. [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)
**catatan**  
Sebanyak hanya 6 peserta (pelanggan dan agen) yang dapat bergabung dengan panggilan aktif kapan saja. Library Klien Amazon Chime SDK menampilkan kode status yang menunjukkan panggilan berada pada kapasitas saat tindakan diambil untuk menambahkan peserta tambahan di luar batas yang terjadi selama pertemuan bergabung.

1. Setelah peserta terhubung ke panggilan, dan kemudian terputus dengan anggun, atau tidak anggun untuk waktu yang telah dikonfigurasi sebelumnya, kredensi peserta mereka tidak lagi valid. Jika `onAudioVideoDidStop` pengamat pustaka klien menerima kode status yang menunjukkan peserta tidak lagi valid, aplikasi dapat memicu panggilan baru ke [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html)dan [CreateParticipantConnection](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html)dari backend bisnis Anda untuk bergabung kembali dengan panggilan.

1. Untuk setiap koneksi pengguna tambahan, Amazon Connect buat kontak baru dan [catatan kontak](ctr-data-model.md). Semua kontak tambahan telah PreviousContactId disetel ke InitialContactId (yaitu, kontak yang dibuat oleh [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API) untuk melacaknya ke kontak asli. Setiap catatan kontak:
   + Memiliki **"InitiationMethod“: “WEBRTC\$1API**”
   + Memiliki atribut segmen berikut:

     ```
        "SegmentAttributes": {
           "connect:Subtype": {
             "ValueString": "connect:WebRTC"
           }
         },
     ```

   Selain itu, setiap catatan kontak memiliki nama tampilan yang disediakan`CreateParticipant`. Informasi agen tidak diisi untuk kontak pengguna tambahan. Hal ini untuk menghindari duplikasi informasi agen.

   Diagram berikut menggambarkan bagaimana kontak sebelumnya dan berikutnya IDs dipetakan dalam skenario di mana beberapa peserta dan agen ditambahkan dalam panggilan web, dalam aplikasi atau video.  
![\[Diagram yang menunjukkan bagaimana kontak IDs dipetakan untuk panggilan WebRTC multi-pihak\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/multiparty-webrtc-contact-mapping.png)

## Menangani gabungan pengguna bersamaan
<a name="handling-concurrent-joins"></a>

Bisnis mungkin ingin membuat aplikasi di mana pengguna dapat bergabung dalam urutan apa pun, kapan saja. Misalnya, aplikasi Anda dapat mengirim email tautan dengan ID janji temu eksternal ke beberapa pengguna yang harus digunakan untuk bergabung dengan panggilan pada waktu yang dijadwalkan. Untuk mencapai perilaku ini, backend bisnis harus memastikan bahwa:
+ Pengguna pertama yang bergabung memicu permintaan. StartWeb RTCContact 
+ Semua pengguna tambahan menggunakan CreateParticipant dan CreateParticipantConnection tetapi **hanya setelah pengguna pertama terhubung ke agen**.

Bagian ini menjelaskan kemungkinan implementasi, dengan asumsi bahwa backend bisnis Anda berisi toko (seperti DynamoDB) yang dapat menyimpan metadata tentang janji temu terjadwal. Perhatikan bahwa janji temu terjadwal bukanlah fitur Amazon Connect, tetapi implementasi contoh.

Ketika pengguna menavigasi ke halaman, mereka harus mengirim permintaan ke backend. Backend memeriksa:
+ Apakah pengguna dapat memulai janji temu, dan apakah itu waktu yang tepat.
+ Apakah Amazon Connect kontak sudah dibuat dengan menelepon [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html).

**Jika kontak belum dibuat**, pelanggan harus memanggil [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)API dengan [alur](connect-contact-flows.md) kustom, dan [Atribut](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html#connect-StartWebRTCContact-request-Attributes) yang menunjukkan antrian agen dari agen terkait yang diharapkan untuk bergabung dengan panggilan. Alur harus menyertakan blok [antrian kerja Set](set-working-queue.md) yang dikonfigurasi untuk menggunakan antrian agen yang disediakan dalam atribut. Aliran kemudian harus diakhiri dengan blok [Transfer ke antrian](transfer-to-queue.md). Sebelum API dipanggil, backend harus memperbarui toko secara atomik untuk memindahkan panggilan dari status 'Tidak Ada' ke 'Membuat', dan menangani pengecualian modifikasi bersamaan.

Kredensi dari [StartWebRTCContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_StartWebRTCContact.html)harus dikembalikan ke pelanggan dan mereka harus segera bergabung dengan panggilan. Kontak harus ditandai sebagai 'Dibuat' di toko bisnis, bersama dengan ID Kontak. **API bisnis ini perlu disinkronkan antara semua kemungkinan peserta** yang bergabung. Ini dapat dilakukan dengan menggunakan operasi atom yang disediakan oleh DB.

**Jika kontak dalam keadaan pembuatan**, pengguna tambahan harus dikembalikan status ini, menampilkan informasi yang relevan, dan coba lagi setelah menunggu sebentar.

**Jika kontak dibuat**: Mereka harus mengambil ID kontak, dan memanggil [DescribeContact](https://docs.aws.amazon.com/connect/latest/APIReference/API_DescribeContact.html)API. Backend bisnis harus mencari lapangan. **`Contact.AgentInfo.ConnectedToAgentTimestamp`** Jika tidak ada, pengguna pertama belum terhubung ke agen, dan pengguna tambahan harus menampilkan informasi yang relevan, dan coba lagi setelah menunggu sebentar.

Jika bidang ada, backend harus memanggil [CreateParticipant](https://docs.aws.amazon.com/connect/latest/APIReference/API_CreateParticipant.html), dan kemudian, untuk mendapatkan [CreateParticipantConnection[ConnectionData](https://docs.aws.amazon.com/connect/latest/APIReference/API_ConnectionData.html#connect-Type-ConnectionData-Meeting)](https://docs.aws.amazon.com/connect/latest/APIReference/API_connect-participant_CreateParticipantConnection.html), seperti yang dijelaskan di bagian sebelumnya.

Aliran backend akan terlihat seperti berikut ini.

![\[Diagram alir backend untuk menangani gabungan pengguna bersamaan\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/multiparty-backend-flow.png)


Anda dapat merujuk ke [contoh panggilan dalam aplikasi Amazon Connect](https://github.com/amazon-connect/amazon-connect-in-app-calling-examples/tree/main/Web) GitHub untuk implementasi.

**Agen tidak akan bergabung menggunakan situs web yang sama**. Agen harus mengatur statusnya di [Contact Control Panel](launch-ccp.md) ke **Available**. Ketika pelanggan pertama bergabung, agen dipanggil secara otomatis.

## Penagihan
<a name="multiuser-billing"></a>

Penagihan untuk peserta tambahan setara dengan penagihan yang ada untuk pelanggan awal dan agen apa pun yang sedang menelepon. Audio, video, dan berbagi layar semuanya dikenakan biaya khusus peserta mereka sendiri.

## Tahan perilaku
<a name="multiuser-hold-behavior"></a>

Selama sesi panggilan video atau berbagi layar, agen dapat melihat video atau berbagi layar peserta bahkan ketika peserta ditahan. Adalah tanggung jawab peserta untuk menangani PII sesuai dengan itu. Jika menggunakan aplikasi CCP asli, video agen dinonaktifkan jika ada peserta non-agen yang ditunda. Jika Anda ingin mengubah perilaku ini, Anda dapat membangun CCP kustom dan widget komunikasi. 

Untuk informasi selengkapnya, lihat [Integrasikan in-app, web, panggilan video, dan berbagi layar secara native ke dalam aplikasi Anda](config-com-widget2.md). 

## Batasan
<a name="multiuser-limitations"></a>

Batasan berikut ada saat membuat peserta dalam aplikasi, web, panggilan video, dan berbagi layar tambahan:
+ Peserta tambahan tidak dapat mengatur kemampuan video ke **Kirim**, jika kontak asli dibuat dengan kemampuan video pelanggan yang disetel ke **Tidak Ada**.

# Personalisasi pengalaman pelanggan untuk panggilan dalam aplikasi, web, dan video di Amazon Connect
<a name="optional-widget-steps"></a>

Langkah-langkah dalam topik ini adalah opsional tetapi direkomendasikan. Mereka memungkinkan Anda untuk mempersonalisasi pengalaman pelanggan berdasarkan tindakan mereka yang sebelumnya diambil dalam aplikasi Anda. Opsi ini memberi Anda lebih banyak kontrol saat memulai panggilan baru, termasuk kemampuan untuk meneruskan informasi kontekstual sebagai atribut.

 Setelah melakukan langkah-langkah ini, Anda harus bekerja dengan administrator situs web Anda untuk mengatur server web Anda untuk mengeluarkan JSON Web Tokens (JWTs) untuk panggilan baru

1. Jika Anda telah membuat widget komunikasi Anda, pada halaman **widget Komunikasi**, pilih widget untuk mengeditnya. 

1. Di bagian **Domain & Keamanan**, pilih **Edit**. 

1. Di bawah **Tambahkan keamanan untuk permintaan widget komunikasi Anda**, pilih **Ya**.  
![\[Opsi Ya.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/chatwidget-choose-security.png)

1. Jangan pilih **Save and continue** (Simpan dan lanjutkan). Amazon Connect membuat widget bersama dengan yang berikut:
   + Amazon Connect menyediakan kunci keamanan 44 karakter di halaman berikutnya yang dapat Anda gunakan untuk membuat. JWTs
   + Amazon Connect menambahkan fungsi callback dalam skrip embed widget komunikasi yang memeriksa JWT saat panggilan dimulai.

     Anda harus mengimplementasikan fungsi callback dalam cuplikan tertanam, seperti yang ditunjukkan pada contoh berikut.

     ```
     amazon_connect('authenticate', function(callback) {
       window.fetch('/token').then(res => {
         res.json().then(data => {
           callback(data.data);
         });
       });
     });
     ```

   Pada langkah berikutnya Anda akan mendapatkan kunci keamanan untuk semua panggilan yang dimulai di situs web Anda. Minta administrator situs web Anda untuk mengatur server web Anda agar mengeluarkan JWTs menggunakan kunci keamanan ini. 

1. Jangan pilih **Save and continue** (Simpan dan lanjutkan).

1. Salin cuplikan kode HTML kustom dan masukkan ke dalam kode sumber situs web Anda.

## Metode alternatif: Lulus atribut kontak langsung dari kode cuplikan
<a name="pass-attrib-from-code"></a>

**catatan**  
Meskipun atribut ini dicakup dengan `HostedWidget-` awalan, mereka masih merupakan situs klien yang bisa berubah. Gunakan pengaturan JWT jika Anda memerlukan PII atau data yang tidak dapat diubah dalam alur kontak Anda. 

Contoh berikut menunjukkan cara meneruskan atribut kontak langsung dari kode cuplikan tanpa mengaktifkan keamanan widget. 

```
<script type="text/javascript">
  (function(w, d, x, id){ /* ... */ })(window, document, 'amazon_connect', 'widgetId');
  amazon_connect('snippetId', 'snippetId');
  amazon_connect('styles', /* ... */);
  // ...
  
  amazon_connect('contactAttributes', {
   foo: 'bar'
  })
<script/>
```

### Menggunakan atribut dalam alur kontak
<a name="contact-flow-usage-voice"></a>

Blok aliran [atribut kontak Periksa](check-contact-attributes.md) menyediakan akses ke atribut ini melalui namespace yang **ditentukan Pengguna**, seperti yang ditunjukkan pada gambar berikut. Anda dapat menggunakan blok aliran untuk menambahkan logika percabangan. Jalan lengkapnya adalah`$Attribute.HostedWidget-attributeName`. 

![\[Gambar yang menunjukkan blok aliran bercabang ke prompt Valid dan Invalid.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/flow-check-contact-attrib.png)


## Salin kode widget komunikasi dan kunci keamanan
<a name="copy-widget-script4"></a>

Pada langkah ini, Anda mengonfirmasi pilihan Anda dan menyalin kode untuk widget komunikasi dan menyematkannya di situs web Anda. Anda juga dapat menyalin kunci rahasia untuk membuat JWTs. 

### Kunci keamanan
<a name="widget-security-key4"></a>

Gunakan kunci keamanan 44 karakter ini untuk menghasilkan token web JSON dari server web Anda. Anda juga dapat memperbarui, atau memutar, tombol jika Anda perlu mengubahnya. Saat Anda melakukan ini, Amazon Connect memberi Anda kunci baru dan mempertahankan kunci sebelumnya hingga Anda memiliki kesempatan untuk menggantinya. Setelah kunci baru digunakan, Anda dapat kembali ke Amazon Connect dan menghapus kunci sebelumnya.

![\[Kunci keamanan.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/chatwidget-security-key.png)


Ketika pelanggan Anda berinteraksi dengan ikon panggilan awal di situs web Anda, widget komunikasi meminta server web Anda untuk JWT. Ketika JWT ini disediakan, widget kemudian akan memasukkannya sebagai bagian dari panggilan pelanggan akhir ke Amazon Connect. Amazon Connect kemudian menggunakan kunci rahasia untuk mendekripsi token. Jika berhasil, ini mengonfirmasi bahwa JWT dikeluarkan oleh server web Anda dan Amazon Connect merutekan panggilan ke agen pusat kontak Anda.

#### Spesifikasi Token Web JSON
<a name="jwts4"></a>
+ Algoritma: **HS256**
+ Klaim: 
  + **sub**: *widgetId*

    Ganti `widgetId` dengan WidgetID Anda sendiri. Untuk menemukan WidgetID Anda, lihat contohnya. [Skrip widget komunikasi](add-chat-to-website.md#chat-widget-script)
  + **iat**: \$1Dikeluarkan Pada Waktu.
  + **exp**: \$1 Kedaluwarsa (maksimum 10 menit).

  \$1 Untuk informasi tentang format tanggal, lihat dokumen Internet Engineering Task Force (IETF) berikut: [JSON Web Token (JWT](https://tools.ietf.org/html/rfc7519)), halaman 5. 

Cuplikan kode berikut menunjukkan contoh cara menghasilkan JWT dengan Python:

```
payload = {
'sub': widgetId, // don't add single quotes, such as 'widgetId'
'iat': datetime.utcnow(),
'exp': datetime.utcnow() + timedelta(seconds=JWT_EXP_DELTA_SECONDS)
}

header = {
'typ': "JWT",
'alg': 'HS256'
}

encoded_token = jwt.encode((payload), CONNECT_SECRET, algorithm=JWT_ALGORITHM, headers=header) // CONNECT_SECRET is the security key provided by Amazon Connect
```

#### Skrip widget komunikasi
<a name="chat-widget-script4"></a>

Gambar berikut menunjukkan contoh JavaScript yang Anda sematkan di situs web tempat Anda ingin pelanggan dapat menghubungi pusat kontak Anda. Skrip ini menampilkan widget di sudut kanan bawah situs web Anda. 

Gambar berikut menunjukkan contoh di mana menemukan WidgetID Anda.

![\[Skrip widget komunikasi.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/chatwidget-code.png)


Saat situs web Anda dimuat, pelanggan pertama kali melihat ikon **Mulai**. Ketika mereka memilih ikon ini, widget komunikasi terbuka dan pelanggan dapat menghubungi agen Anda.

Untuk membuat perubahan pada widget komunikasi kapan saja, pilih **Edit**.

**catatan**  
Perubahan yang disimpan memperbarui pengalaman pelanggan dalam beberapa menit. Konfirmasikan konfigurasi widget Anda sebelum menyimpannya. 

![\[Tautan edit pada pratinjau widget.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/chatwidget-call-edit.png)


Untuk membuat perubahan pada ikon widget di situs web, Anda akan menerima cuplikan kode baru untuk memperbarui situs web Anda secara langsung.

# Kustomisasi tambahan untuk widget panggilan web Amazon Connect Anda
<a name="more-customizations-web-calling-widget"></a>

Anda dapat menambahkan penyesuaian tambahan berikut ke widget panggilan web Anda:
+ Terapkan [blur latar belakang](#background-blur) ke ubin video pelanggan Anda.
+ Atur widget ke layar [penuh](#fullscreen-mode).
+ Pilih [perangkat kamera default](#choose-default-camera).
+ [Ubah ukuran video](#resize-video) agar sesuai dengan wadahnya.

Bagian berikut menjelaskan detail penyesuaian, kasus penggunaannya, dan cara mengonfigurasinya. Anda mengelola penyesuaian ini dengan mengonfigurasi. `WebCallingCustomizationObject`

**Topics**
+ [Latar belakang kabur](#background-blur)
+ [Mode layar penuh](#fullscreen-mode)
+ [Pilih perangkat kamera default](#choose-default-camera)
+ [Ubah ukuran video](#resize-video)
+ [Konfigurasikan objek kustomisasi](#configure-customization-object-web)
+ [Opsi dan kendala yang didukung](#supported-options-web-calling)

## Latar belakang kabur
<a name="background-blur"></a>

Kustomisasi ini mengontrol perilaku blur latar belakang video pelanggan. Saat diaktifkan, latar belakang pelanggan menjadi kabur saat video aktif. Ini membantu melindungi informasi pribadi atau ruang pribadi mereka yang mungkin terlihat di latar belakang selama panggilan video.

Untuk mengaktifkan blur latar belakang, atur `videoFilter.backgroundBlur.option` ke `ENABLED_ON_BY_DEFAULT` dalam`WebCallingCustomizationObject`.

## Mode layar penuh
<a name="fullscreen-mode"></a>

Gunakan kustomisasi ini untuk mengontrol perilaku layar penuh widget. Ada dua cara Anda dapat mengaktifkan layar penuh: 
+ Tambahkan tombol layar penuh ke widget. Pelanggan dapat menggunakan tombol untuk mengaktifkan dan mematikan layar penuh.

  Untuk menambahkan tombol layar penuh, atur `fullscreen.displayButton` ke. `ENABLED` 

ATAU
+ Atur widget ke layar penuh saat memuat.

  Untuk mengaktifkan layar penuh saat memuat, atur `fullscreen.fullscreenOnLoad` ke. `ENABLED`

Ini sangat membantu untuk menggunakan mode layar penuh ketika pelanggan perlu fokus pada widget, seperti selama berbagi layar.

Anda dapat menggunakan dua opsi ini secara individual atau dalam kombinasi.

## Pilih perangkat kamera default
<a name="choose-default-camera"></a>

Kustomisasi ini memungkinkan widget untuk memilih perangkat kamera default ketika pelanggan Anda mengaktifkan video, menawarkan opsi untuk kamera depan atau belakang. Kemampuan ini berguna untuk mendiagnosis peralatan dari jarak jauh, misalnya. Pelanggan dapat menggunakan kamera belakang untuk menunjukkan alat kepada agen.

Untuk memilih kamera belakang sebagai default, atur `devices.defaultCamera` ke`Back`.

## Ubah ukuran video
<a name="resize-video"></a>

Kustomisasi ini mengontrol bagaimana ubin video untuk pelanggan dan agen diubah ukurannya di widget. Misalnya, bingkai video dapat diubah ukurannya untuk mengisi seluruh ubin video, atau diskalakan agar sesuai dengan ubin video, meninggalkan ruang kosong jika rasio aspek bingkai video tidak cocok dengan ubin video.
+ Untuk mengubah ukuran video untuk pelanggan, atur `videoTile.localVideoObjectFit` ke nilai target.
+ Untuk mengubah ukuran video untuk agen, atur `videoTile.remoteVideoObjectFit` ke nilai target.

Untuk informasi selengkapnya, lihat [Opsi dan kendala yang didukung](#supported-options-web-calling).

## Konfigurasikan objek kustomisasi
<a name="configure-customization-object-web"></a>

Contoh berikut menunjukkan bagaimana menerapkan kustomisasi opsional untuk panggilan web. Untuk penjelasan rinci tentang opsi ini, lihat[Opsi dan kendala yang didukung](#supported-options-web-calling). 

Anda dapat menerapkan beberapa atau semua bidang yang ditunjukkan dalam contoh berikut. Bila Anda tidak menerapkan kustomisasi, perilaku default akan digunakan untuk bidang yang hilang.

```
amazon_connect('webCallingCustomizationObject', { 
        videoFilter: { 
            backgroundBlur: { 
                option: "ENABLED_OFF_BY_DEFAULT" 
            }
        },
        fullscreen: {
            displayButton: "ENABLED",
            fullscreenOnLoad: "DISABLED"
        },
        devices: { 
            defaultCamera: "Front" 
        },
        videoTile: {
            localVideoObjectFit: "cover",
            remoteVideoObjectFit: "cover"
        },
        copyDisplayNameFromAuthenticatedChat: true
});
```

Gambar berikut menunjukkan bagaimana kustomisasi terlihat ketika tidak dalam mode layar penuh. 

![\[Kustomisasi saat tidak dalam model layar penuh.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/fullscreenmode.png)


Gambar berikut menunjukkan bagaimana kustomisasi terlihat ketika dalam mode layar penuh.

![\[Kustomisasi saat dalam mode layar penuh.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/nonfullscreenmode.png)


## Opsi dan kendala yang didukung
<a name="supported-options-web-calling"></a>

Tabel berikut mencantumkan bidang kustomisasi yang didukung dan batasan nilai yang direkomendasikan.


| Opsi tata letak kustom | Tipe | Nilai | Deskripsi | 
| --- | --- | --- | --- | 
|  `videoFilter.backgroundBlur.option`  |  string  |  `ENABLED_ON_BY_DEFAULT` \$1 `ENABLED_OFF_BY_DEFAULT`  |  Mengatur keburaman latar belakang ubin video pelanggan Anda. Secara default, ketika pelanggan Anda mengaktifkan video, filter blur latar belakang akan diterapkan ke ubin video, jika Anda tidak ingin mengaktifkan filter secara default, Anda dapat mengaturnya ke`ENABLED_OFF_BY_DEFAULT`, pelanggan Anda masih dapat mengaktifkan filter secara manual di halaman preferensi widget. | 
|  `fullscreen.displayButton`  |  string  |  `ENABLED`  |  Menambahkan tombol ke sudut kanan atas widget untuk membuatnya layar penuh di browser. Secara default, tombol ini tidak akan ditambahkan ke widget, jika Anda ingin menambahkan tombol ini, Anda dapat mengaturnya ke`ENABLED`. | 
|  `fullscreen.fullscreenOnLoad`  |  string  |  `ENABLED`  |  Membuat widget layar penuh di browser. Secara default, widget akan ditambatkan ke sudut kanan bawah halaman web, mengaturnya untuk `ENABLED` membuat widget layar penuh di browser. | 
|  `devices.defaultCamera`  |  string  |  `Front` \$1 `Back`  | Menetapkan perangkat kamera default saat pelanggan Anda mengaktifkan video. Ini untuk kasus penggunaan seluler atau tablet. Secara default, kamera default dipilih ([detail](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices)). (Untuk informasi selengkapnya, lihat [metodeMediaDevices: enumerateDevices ()](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) dalam dokumentasi pengembang Mozilla.) Saat Anda mengaturnya`Front\|Back`, ia memilih kamera yang sesuai jika tersedia. | 
|  `copyDisplayNameFromAuthenticatedChat`  |  boolean  |  `true` \$1 `false`  | Jika pelanggan akhir diautentikasi menggunakan blok aliran [Authenticate Customer](authenticate-customer.md), menyetel nilainya `true` akan menyalin nama tampilan ke kontak suara. Nilai default-nya `false`. | 
|  `videoTile.localVideoObjectFit`  |  string  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  |  Menetapkan properti [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) dari ubin video pelanggan Anda di widget. Secara default, nilainya ditentukan oleh lebar dan tinggi resolusi video: jika tinggi lebih besar dari lebar, itu akan menjadi, jika tidak`contain`, itu akan menjadi`cover`. Untuk penjelasan rinci tentang setiap nilai, lihat [object-fit dalam dokumentasi](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) pengembang Mozilla.  Atribut ini diterapkan hanya pada tinggi tampilan dan lebar video pelanggan di widget. Tinggi dan lebar video pelanggan yang dikirim ke agen tidak berubah.  | 
|  `videoTile.remoteVideoObjectFit`  |  string  |  `fill` \$1 `contain` \$1 `cover` \$1 `none` \$1 `scale-down`  | Menetapkan properti [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) dari ubin video pelanggan Anda di widget. Secara default, nilainya ditentukan oleh lebar dan tinggi resolusi video: jika tinggi lebih besar dari lebar, itu akan menjadi, jika tidak`contain`, itu akan menjadi`cover`. Untuk penjelasan rinci tentang setiap nilai, lihat [object-fit dalam dokumentasi](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) pengembang Mozilla.  Atribut ini diterapkan hanya pada tinggi tampilan dan lebar video agen di widget.   | 

# Integrasikan panggilan video dan berbagi layar ke desktop agen kustom Anda dengan menggunakan Amazon Connect Streams JS
<a name="integrate-video-calling-for-agents"></a>

Topik ini untuk pengembang. Untuk desktop agen khusus, Anda perlu membuat perubahan untuk mendukung panggilan video dan berbagi layar. Berikut ini adalah langkah-langkah tingkat tinggi.

**catatan**  
Jika Anda menyematkan CCP langsung ke aplikasi agen kustom Anda, pastikan `allowFramedVideoCall` disetel ke true saat Anda memulai CCP menggunakan [Amazon](https://github.com/aws/amazon-connect-streams) Connect Streams JS.

1. Gunakan [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams) untuk memeriksa apakah kontak yang masuk adalah kontak WebRTC. Gunakan subtipe kontak`"connect:WebRTC"`, seperti yang ditunjukkan pada contoh kode berikut:

   `contact.getContactSubtype() === "connect:WebRTC"`

1. Anda dapat mengambil nama tampilan pelanggan dengan menggunakan bidang nama di` contact contact.getName()`.

## Tambahkan dukungan untuk video
<a name="support-video"></a>

Selesaikan langkah-langkah berikut untuk menambahkan dukungan untuk penanganan video saat pelanggan Anda mengaktifkannya.

1. Untuk memeriksa apakah kontak memiliki kemampuan video:

   ```
   // Return true if any connection has video send capability
   contact.hasVideoRTCCapabilities()
   
   // Return true if the agent connection has video send capability
   contact.canAgentSendVideo()
   
   // Return true if other non-agent connection has video send capability
   contact.canAgentReceiveVideo()
   ```

1. Untuk memeriksa apakah agen memiliki izin video untuk menangani panggilan video:

   `agent.getPermissions().includes('videoContact');`

1. Untuk menerima panggilan video, kontak harus memiliki kemampuan video dan agen harus memiliki izin video.

   ```
   function shouldRenderVideoUI() {
       return contact.getContactSubtype() === "connect:WebRTC" &&
       contact.hasVideoRTCCapabilities() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Untuk bergabung dengan sesi video, hubungi`getVideoConnectionInfo`:

   ```
   if (shouldRenderVideoUI()) {
      const response = await
      contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Untuk membuat UI video dan bergabung dengan sesi rapat video, lihat:
   + [Amazon Chime SDK untuk aktif JavaScript](https://github.com/aws/amazon-chime-sdk-js) GitHub 
   + [Amazon Chime Pustaka Komponen SDK React](https://github.com/aws/amazon-chime-sdk-component-library-react) di GitHub

1. Untuk mempermudah, cuplikan kode berikut menggunakan contoh dari Amazon Chime SDK React Components Library.

   ```
   import { MeetingSessionConfiguration } from "amazon-chime-sdk-js";
   import {
     useMeetingStatus,
     useMeetingManager,
     MeetingStatus,
     DeviceLabels,
     useLocalAudioOutput
   } from 'amazon-chime-sdk-component-library-react';
   
   const App = () => (
     <MeetingProvider>
       <MyVideoManager />
     </MeetingProvider>
   );
   
   const MyVideoManager = () => {
       const meetingManager = useMeetingManager();
       if (shouldRenderVideoUI()) {
           const response = await contact.getAgentConnection().getVideoConnectionInfo();
           const configuration = new MeetingSessionConfiguration(
               response.meeting, response.attendee);
           await meetingManager.join(configuration, { deviceLabels: DeviceLabels.Video });
           await meetingManager.start();
       }
       
       function endContact() {
           meetingManager.leave();
       }
   }
   ```

1. Untuk merender kisi video, gunakan [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)dari Amazon Chime SDK React Components Library atau sesuaikan perilaku UI menggunakan [RemoteVideoTileProvider](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-providers-remotevideotileprovider--page). 

1. Untuk membuat pratinjau video, Anda dapat menggunakan [VideoPreview](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-previewvideo--page)dan [CameraSelection](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-deviceselection-camera-cameraselection--page)komponen. Untuk memilih atau mengubah video kamera, Anda dapat menggunakan `meetingManager.selectVideoInputDevice` atau `meetingManager.startVideoInput ` jika rapat sedang berlangsung.

   ```
   const meetingManager = useMeetingManager();
   const { isVideoEnabled } = useLocalVideo();
   if (isVideoEnabled) {
       await meetingManager.startVideoInputDevice(current);
    } else {
       meetingManager.selectVideoInputDevice(current);
   }
   ```

1. Untuk menerapkan blur latar belakang, lihat [useBackgroundBlur](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usebackgroundblur--page). 

1. Untuk contoh kode tentang cara membuat pengalaman video kustom, lihat contoh Amazon Chime SDK ini: [Demo Amazon Chime React Meeting](https://github.com/aws-samples/amazon-chime-sdk/tree/main/apps/meeting). 

## Tambahkan dukungan untuk berbagi layar
<a name="support-screen-sharing"></a>

**catatan**  
Jika Anda menggunakan out-of-box CCP secara langsung di aplikasi agen kustom Anda, pastikan `allowFramedScreenSharing` dan `allowFramedScreenSharingPopUp` disetel ke true saat Anda memulai CCP menggunakan [Amazon](https://github.com/aws/amazon-connect-streams) Connect Streams JS.   
Pengaturan `allowFramedScreenSharing` ke true memungkinkan tombol berbagi layar hanya pada satu CCP dalam satu jendela atau tab. Pengaturan `allowFramedScreenSharingPopUp` ke true akan meluncurkan aplikasi berbagi layar di jendela terpisah saat agen memilih tombol berbagi layar. Untuk detail selengkapnya, lihat dokumentasi [Amazon Connect Streams JS](https://github.com/aws/amazon-connect-streams).

Selesaikan langkah-langkah berikut untuk mengaktifkan berbagi layar di desktop agen kustom Anda. 

1. Periksa apakah kontak memiliki kemampuan berbagi layar. 

   ```
   // Return true if any connection has screen sharing send capability
   contact.hasScreenShareCapability()
   
   // Return true if the agent connection has screen sharing send capability
   contact.canAgentSendScreenShare()
   
   // Return true if customer connection has screen sharing send capability
   contact.canCustomerSendScreenShare()
   ```

1. Periksa apakah agen memiliki izin video.

   ```
   agent.getPermissions().includes('videoContact');
   ```

1. Periksa apakah agen dapat memulai sesi berbagi layar untuk kontak yang memenuhi syarat.

   ```
   fun canStartScreenSharingSession() {
       return contactgetContactSubtype() === "connect:WebRTC" &&
       contact.hasScreenShareCapability() &&
       agent.getPermissions().includes('videoContact');
   }
   ```

1. Panggilan `startScreenSharing` untuk memulai sesi berbagi layar. Ini `ScreenSharingActivated` menambah kontak, memungkinkan Anda untuk mencarinya di [catatan kontak](ctr-data-model.md). 

   ```
   contact.startScreenSharing();
   ```

1. Panggilan `getVideoConnectionInfo` untuk bergabung dengan sesi. Anda dapat melewati langkah jika agen telah bergabung dengan sesi video untuk menangani video.

   ```
   if (canStartScreenSharingSession) {
       contact.startScreenSharing();
       const response = await
       contact.getAgentConnection().getVideoConnectionInfo();
   }
   ```

1. Bergabunglah dengan sesi dengan menggunakan Amazon Chime SDK React Components Library. Untuk cuplikan kode, lihat langkah 6 di. [Tambahkan dukungan untuk video](#support-video)

1. Gunakan hal yang sama [VideoTileGrid](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-components-videotilegrid--page)dari Amazon Chime SDK React Components untuk merender ubin video berbagi layar. Untuk informasi selengkapnya, lihat [useContentShareStatus](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharestate--page) dan [useContentShareKontrol](https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/sdk-hooks-usecontentsharecontrols--page) 

1. Panggil `stopScreenSharing` saat mengakhiri sesi.

   ```
   contact.stopScreenSharing();
   ```

1. Anda dapat menerima acara untuk aktivitas berbagi layar dengan berlangganan callback berikut:

   ```
   initScreenSharingListeners() {
       this.contact.onScreenSharingStarted(() => {
           // Screen sharing session started
       });
   
       this.contact.onScreenSharingStopped(() => {
           // Screen sharing session ended
       });
   
       this.contact.onScreenSharingError((error) => {
           // Screen sharing session error occurred
       });
     }
   }
   ```

# Aktifkan pembatasan URL untuk berbagi layar
<a name="screen-sharing-url-restriction"></a>

Anda dapat mengelola URLs bahwa pelanggan dan agen Anda diizinkan untuk berbagi selama kontak. Ini memungkinkan Anda mencapai keamanan dan privasi yang ditingkatkan. Ketika pelanggan atau agen membagikan URL yang tidak diizinkan, mereka menerima pesan kesalahan dan video berbagi layar secara otomatis dijeda dan dipadamkan. 

**penting**  
Browser berikut didukung:   
Chrome versi 109 dan yang lebih baru
Edge versi 109 dan yang lebih baru
Agen dan pelanggan hanya dapat berbagi tab browser. Mereka tidak dapat berbagi jendela atau seluruh layar. Jika Anda mengaktifkan fitur ini dan pelanggan atau agen Anda menggunakan browser, jendela, atau seluruh layar yang tidak didukung, mereka akan menerima kesalahan.

Selesaikan langkah-langkah berikut untuk mengaktifkan pembatasan URL untuk berbagi layar.

## Langkah 1: Buat URLs daftar yang diizinkan
<a name="step1-url-restriction"></a>

Anda mengonfigurasi daftar yang diizinkan URLs dengan menggunakan atribut yang telah ditentukan sebelumnya. Selesaikan langkah-langkah berikut:

1. Di situs web Amazon Connect admin, pilih **** Routing, Atribut yang **telah ditentukan sebelumnya****, Tambahkan atribut** **yang telah** ditentukan.

1. Di bagian **Tambahkan atribut yang telah ditentukan**, di kotak **atribut Predefined**, tambahkan salah satu dari berikut ini.
   + Untuk membuat daftar yang diizinkan untuk berbagi layar pelanggan, masukkan`screensharing:customer-allowed-urls`.
   + Untuk membuat daftar yang diizinkan untuk berbagi layar agen, masukkan`screensharing:agent-allowed-urls`.

1. Di kotak **Nilai**, masukkan URL yang diizinkan. Ini bisa berupa URL yang diformat penuh atau pola string untuk pencocokan substring, seperti ` https://mycompany` atau. ` /mytransactions` Tabel berikut menunjukkan contoh format yang valid.    
[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/screen-sharing-url-restriction.html)

1. Simpan daftarnya. URLs Muncul di halaman **atribut Predefined**, seperti yang ditunjukkan pada contoh berikut.   
![\[Halaman atribut yang telah ditentukan sebelumnya.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/screen-sharing-restricted-urls.png)

## Langkah 2: Tambahkan skrip ke daftar situs web Anda
<a name="step2-url-restriction"></a>

Anda perlu menyematkan skrip ke situs web Anda sehingga URL halaman dapat diekspos ke aplikasi penangkapan. Anda mendapatkan penangan tangkapan dari file di CloudFront titik akhir Amazon yang dihosting Amazon Connect. Lengkapi instruksi berikut.

1. Di situs web Amazon Connect admin, pilih **Saluran**, **Berkomunikasi widget**. Pada halaman ringkasan widget Komunikasi Anda, cari skrip widget. Dapatkan endpoint dari `s.src` atribut, seperti yang ditunjukkan pada contoh berikut.   
![\[Skrip Widget.\]](http://docs.aws.amazon.com/id_id/connect/latest/adminguide/images/screen-sharing-restricted-urls-step2.png)

   Titik akhir dapat berada di AWS Wilayah yang berbeda dari instans Amazon Connect Anda. Untuk performa terbaik, sebaiknya gunakan Wilayah yang sama dengan instans Amazon Connect Anda. 

1. Ganti placeholder berikut `${endpoint}` dengan nilai dari langkah sebelumnya. Salin seluruh cuplikan kode dan tempel di tingkat atas situs web Anda.

   ```
   <script type="text/javascript" src='${endpoint}/amazon-connect-url-restriction.js'></script>
   ```