Customize widget launch behavior and button icon

Per personalizzare ulteriormente il modo in cui il sito web visualizza e avvia l'icona del widget ospitato, puoi configurare il comportamento di avvio e nascondere l'icona predefinita. Ad esempio, puoi avviare il widget in modo programmatico da un elemento del pulsante Chatta con noi visualizzato sul sito web.

Come configurare il comportamento di avvio personalizzato per il widget

Per trasmettere un comportamento di avvio personalizzato, utilizza il seguente blocco di codice di esempio e incorporalo nel tuo widget. Tutti i campi mostrati nell'esempio seguente sono facoltativi e può essere utilizzata qualsiasi combinazione.

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;
            }
        }
    })
});

Vincoli e opzioni supportate

La tabella seguente elenca le opzioni di comportamento di avvio personalizzato supportate. I campi sono facoltativi e può essere utilizzata qualsiasi combinazione.

Nome opzione	Type	Descrizione	Valore predefinito
skipIconButtonAndAutoLaunch	Booleano	Un flag per abilitare/disabilitare l'avvio automatico del widget senza che l'utente faccia clic sul caricamento della pagina.	indefinito
alwaysHideWidgetButton	Booleano	Un flag per abilitare/disabilitare la visualizzazione del pulsante dell'icona del widget (a meno che non sia in corso una sessione di chat).	indefinito
programmaticLaunch	Funzione		indefinito

Configurazione dell'avvio del widget per casi d'uso personalizzati

Pulsante di avvio del widget personalizzato

L'esempio seguente mostra le modifiche da apportare al widget per configurare l'avvio programmatico in modo che si apra solo quando l'utente sceglie un elemento del pulsante personalizzato visualizzato in qualsiasi punto del sito web. Ad esempio, puoi scegliere un pulsante denominato Contattaci o Chatta con noi. Facoltativamente, puoi nascondere l'icona predefinita del widget Amazon Connect fino all'apertura del widget.

<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>

Supporto di collegamento ipertestuali

L'esempio seguente mostra le modifiche da apportare al widget per configurare auto-launch, che apre il widget senza attendere che l'utente faccia clic. Puoi eseguire la distribuzione su una pagina ospitata dal sito web per creare un collegamento ipertestuale condivisibile.

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>

Caricamento delle risorse del widget quando si fa clic sul pulsante

L'esempio seguente mostra le modifiche da apportare al widget per velocizzare il caricamento della pagina del sito web recuperando le risorse statiche del widget quando un utente fa clic sul pulsante Chatta con noi. In genere, solo una piccola percentuale di clienti che visita una pagina Contattaci apre il widget Amazon Connect. Il widget potrebbe aggiungere latenza al caricamento della pagina recuperando i file dalla CDN, anche se i clienti non aprono mai il widget.

Una soluzione alternativa consiste nell'eseguire il codice del frammento in modo asincrono (o mai) premendo un pulsante.

<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
    });
});

Avvio di una nuova chat in una finestra del browser

L'esempio seguente mostra le modifiche da apportare al widget per avviare una nuova finestra del browser e avviare automaticamente la chat a schermo intero.

<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>