Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.
# Memecahkan masalah dengan widget komunikasi Amazon Connect
Topik ini ditujukan untuk pengembang yang perlu menyelidiki masalah yang mungkin terjadi saat mengonfigurasi widget komunikasi di situs web Connect Customer admin.
**Topics**
+ [“Ada yang tidak beres”](#sww)
+ [Pelanggan yang tidak menerima pesan agen: Jaringan atau WebSocket terputus](#mam)
+ [Melewati CORS saat membuka tautan pihak ketiga](#bcwotpl)
## “Ada yang tidak beres”
Jika Anda melihat pesan kesalahan **Sesuatu yang salah** berikut saat memuat widget komunikasi Anda, buka alat browser untuk melihat log kesalahan.
Berikut ini adalah masalah umum yang menyebabkan kesalahan ini.
### 400 Permintaan tidak valid
Jika log menyebutkan 400 permintaan tidak valid, ada beberapa kemungkinan penyebabnya:
+ Widget komunikasi Anda tidak dilayani pada domain yang diizinkan. Anda harus secara khusus menyatakan domain tempat Anda akan meng-host widget Anda.
+ Permintaan ke titik akhir tidak diformat dengan benar. Ini biasanya terjadi hanya jika isi cuplikan embed telah dimodifikasi.
### 401 Tidak Sah
Jika log menyebutkan 401 tidak sah, ini adalah masalah dengan otentikasi JSON Web Token (JWT). Ini menampilkan halaman kesalahan di atas.
Setelah Anda memiliki JWT, Anda perlu mengimplementasikannya dalam fungsi `authenticate` callback. Contoh berikut menunjukkan cara menerapkannya jika Anda mencoba mengambil token Anda dan kemudian menggunakannya:
```
amazon_connect('authenticate', function(callback) {
window.fetch('/token').then(res => {
res.json().then(data => {
callback(data.data);
});
});
});
```
Berikut adalah versi yang lebih mendasar dari apa yang perlu diimplementasikan:
```
amazon_connect('authenticate', function(callback) {
callback(token);
});
```
Untuk petunjuk tentang penerapan JWT, lihat. [Langkah 3: Konfirmasikan dan salin kode widget komunikasi dan kunci keamanan](add-chat-to-website.md#confirm-and-copy-chat-widget-script)
Jika Anda telah menerapkan callback, skenario berikut mungkin masih menyebabkan 401:
+ Tanda tangan tidak valid
+ Token kadaluwarsa
### 404 Tidak ditemukan
Kode status 404 biasanya disebabkan ketika sumber daya yang diminta tidak ada:
+ WidgetID yang tidak valid ditentukan dalam permintaan API
+ WidgetID valid tetapi aliran terkait telah dihapus atau diarsipkan
+ Widget belum dipublikasikan, atau telah dihapus
Verifikasi bahwa cuplikan Anda persis seperti yang disalin dari situs web Connect Customer admin, dan tidak ada pengidentifikasi yang berubah.
Jika pengenal tidak berubah dan Anda melihat 404, hubungi Support AWS .
### 500 Kesalahan server internal
Hal ini dapat disebabkan oleh peran terkait layanan Anda yang tidak memiliki izin yang diperlukan untuk memulai obrolan. Ini terjadi jika instans Amazon Connect Anda dibuat sebelum Oktober 2018 karena Anda tidak memiliki peran terkait layanan yang disiapkan.
**Solusi**: Tambahkan `connect:*` kebijakan tentang peran yang terkait dengan instans Amazon Connect Anda. Untuk informasi selengkapnya, lihat [Menggunakan peran terkait layanan dan izin peran untuk Amazon Connect](connect-slr.md).
Jika peran terkait layanan Anda memiliki izin yang benar, hubungi Support. AWS
## Pelanggan yang tidak menerima pesan agen: Jaringan atau WebSocket terputus
Selama sesi obrolan, pelanggan yang menggunakan aplikasi obrolan kehilangan network/WebSocket koneksi mereka. Mereka dengan cepat mendapatkan kembali koneksi, tetapi pesan yang dikirim oleh agen selama waktu itu tidak diberikan di antarmuka obrolan pelanggan.
Gambar berikut menunjukkan contoh antarmuka obrolan pelanggan dan Panel Kontrol Kontak agen side-by-side. Pesan yang dikirim agen tidak diberikan dalam sesi obrolan pelanggan. Namun, tampaknya agen seolah-olah pelanggan telah menerimanya.
Jika aplikasi obrolan pelanggan kehilangan network/WebSocket koneksinya, antarmuka pengguna obrolan harus melakukan hal berikut untuk mengambil pesan future serta pesan yang dikirim ke sana saat terputus:
+ Buat kembali WebSocket koneksi untuk menerima pesan masuk masa depan lagi.
+ Buat permintaan [ChatSession.getTranscript](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript) ([getTranscripts](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html) API) untuk mengambil semua pesan yang hilang yang dikirim saat pelanggan terputus.
Jika agen mengirim pesan saat antarmuka pengguna obrolan pelanggan terputus, pesan berhasil disimpan di bagian belakang Amazon Connect: CCP berfungsi seperti yang diharapkan dan semua pesan direkam dalam transkrip, tetapi perangkat pelanggan tidak dapat menerima pesan. Ketika klien terhubung kembali ke WebSocket, ada celah dalam pesan. Pesan masuk di masa mendatang akan muncul lagi dari WebSocket, tetapi pesan celah masih hilang kecuali kode secara eksplisit membuat panggilan ke API. [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)
### Solusi
Gunakan [ChatSession. onConnectionEstablished](https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiononconnectionestablished)event handler untuk memanggil [GetTranscript](https://docs.aws.amazon.com/connect-participant/latest/APIReference/API_GetTranscript.html)API. `chatSession.onConnectionEstablished`Event handler dipicu saat menghubungkan WebSocket kembali. ChatJS memiliki detak jantung bawaan dan coba lagi logika untuk koneksi. WebSocket Karena ChatJS tidak menyimpan transkrip, bagaimanapun, Anda harus menambahkan kode khusus ke antarmuka pengguna obrolan untuk mengambil transkrip secara manual lagi.
Contoh kode berikut menunjukkan bagaimana `onConnectionEstablished` menerapkan panggilan`GetTranscript`.
```
import "amazon-connect-chatjs";
const chatSession = connect.ChatSession.create({
chatDetails: {
ContactId: "{{the ID of the contact}}",
ParticipantId: "{{the ID of the chat participant}}",
ParticipantToken: "{{the participant token}}",
},
type: "CUSTOMER",
options: { region: "us-west-2" },
});
// Triggered when the websocket reconnects
chatSession.onConnectionEstablished(() => {
chatSession.getTranscript({
scanDirection: "BACKWARD",
sortOrder: "ASCENDING",
maxResults: 15,
// nextToken?: nextToken - OPTIONAL, for pagination
})
.then((response) => {
const { initialContactId, nextToken, transcript } = response.data;
// ...
})
.catch(() => {})
});
```
```
function loadLatestTranscript(args) {
// Documentation: https://github.com/amazon-connect/amazon-connect-chatjs?tab=readme-ov-file#chatsessiongettranscript
return chatSession.getTranscript({
scanDirection: "BACKWARD",
sortOrder: "ASCENDING",
maxResults: 15,
// nextToken?: nextToken - OPTIONAL, for pagination
})
.then((response) => {
const { initialContactId, nextToken, transcript } = response.data;
const exampleMessageObj = transcript[0];
const {
DisplayName,
ParticipantId,
ParticipantRole, // CUSTOMER, AGENT, SUPERVISOR, SYSTEM
Content,
ContentType,
Id,
Type,
AbsoluteTime, // sentTime = new Date(item.AbsoluteTime).getTime() / 1000
MessageMetadata, // { Receipts: [{ RecipientParticipantId: "asdf" }] }
Attachments,
RelatedContactid,
} = exampleMessageObj;
return transcript // TODO - store the new transcript somewhere
})
.catch((err) => {
console.log("CustomerUI", "ChatSession", "transcript fetch error: ", err);
});
}
```
Untuk contoh lain, lihat [implementasi open source ini di GitHub](https://github.com/amazon-connect/amazon-connect-chat-interface/blob/c88f854073fe6dd45546585c3bfa363d3659d73f/src/components/Chat/ChatSession.js#L408).
## Melewati CORS saat membuka tautan pihak ketiga
Untuk meningkatkan keamanan, widget komunikasi beroperasi dalam lingkungan kotak pasir. Akibatnya, tautan pihak ketiga yang dibagikan dalam widget tidak dapat dibuka.
**Solusi**
Ada dua opsi untuk melewati CORS untuk memungkinkan tautan pihak ketiga dibuka.
+ **(Direkomendasikan)**
Perbarui atribut sandbox untuk memungkinkan membuka tautan di tab baru yang dapat dilakukan dengan menambahkan atribut berikut ke cuplikan kode:
```
amazon_connect('updateSandboxAttributes', 'allow-scripts allow-same-origin allow-popups allow-downloads allow-top-navigation-by-user-activation allow-popups-to-escape-sandbox')
```
**catatan**
Nilai atribut dapat diperbarui sesuai kebutuhan untuk memungkinkan tindakan tertentu. Ini adalah contoh bagaimana mengizinkan membuka tautan di tab baru.
+ Hapus atribut sandbox yang dapat dilakukan dengan menambahkan atribut berikut ke cuplikan kode:
```
amazon_connect('removeSandboxAttribute', true)
```