Sesuaikan perilaku peluncuran widget dan ikon tombol

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.

Nama opsi	Tipe	Deskripsi	Nilai default
skipIconButtonAndAutoLaunch	Boolean	Bendera untuk mengaktifkan/menonaktifkan peluncuran otomatis widget tanpa pengguna mengklik pemuatan halaman.	tidak terdefinisi
alwaysHideWidgetButton	Boolean	Bendera untuk mengaktifkan/menonaktifkan tombol ikon widget dari rendering (kecuali ada sesi obrolan yang sedang berlangsung).	tidak terdefinisi
programmaticLaunch	Fungsi		tidak terdefinisi

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>