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

Sesuaikan perilaku peluncuran widget dan ikon tombol untuk situs web Anda yang dihosting di Amazon Connect

Untuk lebih menyesuaikan cara situs web Anda merender dan meluncurkan ikon widget yang dihosting, Anda dapat mengonfigurasi perilaku peluncuran dan menyembunyikan ikon default. Misalnya, Anda dapat meluncurkan widget secara terprogram dari elemen tombol Chat with us yang ditampilkan di situs web Anda.

Cara mengonfigurasi perilaku peluncuran khusus untuk widget

Untuk meneruskan perilaku peluncuran kustom, gunakan blok kode contoh berikut dan sematkan di widget Anda. Semua bidang yang ditunjukkan dalam contoh berikut adalah opsional dan kombinasi apa pun dapat digunakan.

amazon_connect('customLaunchBehavior', {
    skipIconButtonAndAutoLaunch: true,
    alwaysHideWidgetButton: true,
    programmaticLaunch: (function(launchCallback) {
        var launchWidgetBtn = document.getElementById('launch-widget-btn');
        if (launchWidgetBtn) {
            launchWidgetBtn.addEventListener('click', launchCallback);
            window.onunload = function() {
            launchWidgetBtn.removeEventListener('click', launchCallback);
            return;
            }
        }
    })
});

Opsi dan kendala yang didukung

Tabel berikut mencantumkan opsi perilaku peluncuran kustom yang didukung. Bidang bersifat opsional dan kombinasi apa pun dapat digunakan.

Konfigurasikan peluncuran widget untuk kasus penggunaan khusus

Tombol peluncuran widget kustom

Contoh berikut menunjukkan perubahan yang perlu Anda buat di widget untuk mengonfigurasi peluncuran terprogram agar terbuka hanya ketika pengguna memilih elemen tombol khusus yang diberikan di mana saja di situs web Anda. Misalnya, mereka dapat memilih tombol bernama Hubungi Kami atau Chat With Us. Secara opsional, Anda dapat menyembunyikan ikon widget Amazon Connect default hingga widget dibuka.

<button id="launch-widget-btn">Chat With Us</button>

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true,
        alwaysHideWidgetButton: true,
        programmaticLaunch: (function(launchCallback) {
            var launchWidgetBtn = document.getElementById('launch-widget-btn');
            if (launchWidgetBtn) {
                launchWidgetBtn.addEventListener('click', launchCallback);
                window.onunload = function() {
                launchWidgetBtn.removeEventListener('click', launchCallback);
                return;
                }
            }
        }),
    });
</script>

Dukungan hyperlink

Contoh berikut menunjukkan perubahan yang perlu Anda buat di konfigurasi widgetauto-launch, yang membuka widget tanpa menunggu pengguna mengklik. Anda dapat menyebarkan ke halaman yang dihosting oleh situs web Anda untuk membuat hyperlink yang dapat dibagikan.

https://example.com/contact-us?autoLaunchMyWidget=true

<script type="text/javascript">
 (function(w, d, x, id){
    s=d.createElement("script");
    s.src="./amazon-connect-chat-interface-client.js"
    s.async=1;
    s.id=id;
    d.getElementsByTagName("head")[0].appendChild(s);
    w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
  })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
  amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
  amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
  amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
</script>

Muat aset widget saat tombol diklik

Contoh berikut menunjukkan perubahan yang perlu Anda buat di widget untuk membuat halaman situs web Anda dimuat lebih cepat dengan mengambil aset statis widget saat pengguna mengklik tombol Chat With Us. Biasanya, hanya sebagian kecil pelanggan yang mengunjungi halaman Hubungi Kami yang membuka widget Amazon Connect. Widget dapat menambahkan latensi pada pemuatan halaman dengan mengambil file dari CDN, meskipun pelanggan tidak pernah membuka widget.

Solusi alternatif adalah menjalankan kode cuplikan secara asinkron (atau tidak pernah) pada klik tombol.

<button id="launch-widget-btn">Chat With Us</button>

var buttonElem = document.getElementById('launch-widget-btn');

buttonElem.addEventListener('click', function() {
    (function(w, d, x, id){
        s=d.createElement("script");
        s.src="./amazon-connect-chat-interface-client.js"
        s.async=1;
        s.id=id;
        d.getElementsByTagName("head")[0].appendChild(s);
        w[x] =  w[x] || function() { (w[x].ac = w[x].ac || []).push(arguments) };
    })(window, document, 'amazon_connect', 'asfd-asdf-asfd-asdf-asdf');
    amazon_connect('styles', { openChat: { color: '#000', backgroundColor: '#3498fe'}, closeChat: { color: '#fff', backgroundColor: '#123456'} });
    amazon_connect('snippetId', "QVFJREFsdafsdfsadfsdafasdfasdfsdafasdfz0=")
    amazon_connect('customLaunchBehavior', {
        skipIconButtonAndAutoLaunch: true
    });
});

Luncurkan obrolan baru di jendela browser

Contoh berikut menunjukkan perubahan yang perlu Anda buat di widget untuk meluncurkan jendela browser baru dan meluncurkan obrolan otomatis di layar penuh.

<button id="openChatWindowButton">Launch a Chat</button>

<script> // Function to open a new browser window with specified URL and dimensions
    function openNewWindow() {
        var url = 'https://mycompany.com/support?autoLaunchChat=true';

        // Define the width and height
        var width = 300;
        var height = 540;

        // Calculate the left and top position to center the window
        var left = (window.innerWidth - width) / 2;
        var top = (window.innerHeight - height) / 2;

        // Open the new window with the specified URL, dimensions, and position
        var newWindow = window.open(url, '', 'width=${width}, height=${height}, left=${left}, top=${top}');
    }

    // Attach a click event listener to the button
    document.getElementById('openChatWindowButton').addEventListener('click', openNewWindow);
</script>

Aktifkan persistensi sesi obrolan di seluruh tab

Secara default jika obrolan dibuka di satu tab dan kemudian pengguna membuka tab baru dan memulai obrolan lain, obrolan baru akan dimulai alih-alih menghubungkan ke obrolan yang ada. Anda dapat mengaktifkan persistensi sesi obrolan di seluruh tab jika Anda ingin pengguna terhubung ke obrolan yang ada yang dimulai di tab awal.

Sesi obrolan disimpan dalam penyimpanan sesi pada browser dalam variabelpersistedChatSession. Anda perlu menyalin nilai ini ke penyimpanan sesi tab baru saat widget pertama kali diinisialisasi. Berikut ini adalah instruksi.