Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Personalice el comportamiento de inicio del widget y el icono del botón para su sitio web alojado en Amazon Connect

Para personalizar aún más el modo en que su sitio web muestra y lanza el icono del widget alojado, puede configurar el comportamiento de lanzamiento y ocultar el icono predeterminado. Por ejemplo, puede lanzar mediante programación el widget desde un elemento de botón Chatear con nosotros que esté renderizado en su sitio web.

Cómo configurar el comportamiento de lanzamiento personalizado del widget

Para pasar un comportamiento de lanzamiento personalizado, utilice el siguiente bloque de código de ejemplo e insértelo en su widget. Todos los campos que se muestran en el siguiente ejemplo son opcionales y se puede utilizar cualquier combinación.

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

Restricciones y opciones admitidas

En la siguiente tabla, se enumeran las opciones de comportamiento de lanzamiento personalizado admitidas. Los campos son opcionales y puede utilizarse cualquier combinación.

Configuración del lanzamiento del widget para casos de uso personalizados

Botón de lanzamiento del widget personalizado

En el siguiente ejemplo se muestran los cambios que tendría que realizar en el widget para configurar el lanzamiento programático de modo que se abra solo cuando el usuario elija un elemento de botón personalizado renderizado en cualquier parte de su sitio web. Por ejemplo, puede elegir un botón llamado Contacto o Chatear. Opcionalmente, puede ocultar el icono predeterminado del widget de Amazon Connect hasta que se haya abierto el 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>

Compatibilidad con hipervínculos

En el siguiente ejemplo se muestran los cambios que tendría que hacer en la configuración del widget auto-launch, que abre el widget sin esperar a que el usuario haga clic. Puede implementarlo en una página alojada en su sitio web para crear un hipervínculo que se puede compartir.

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>

Carga de los activos del widget al hacer clic en el botón

En el siguiente ejemplo se muestran los cambios que tendría que hacer en el widget para que la página de su sitio web se cargue más rápidamente al obtener los activos estáticos del widget cuando un usuario hace clic en el botón Chatear. Normalmente, solo un pequeño porcentaje de los clientes que visitan una página Contacto abren el widget de Amazon Connect. El widget podría añadir latencia a la carga de la página al extraer archivos de ellosCDN, aunque los clientes nunca abran el widget.

Una solución alternativa es ejecutar el código del fragmento de forma asíncrona (o nunca) al hacer clic en el botón.

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

Lanzamiento de un nuevo chat en una ventana del navegador

En el siguiente ejemplo se muestran los cambios que tendría que hacer en el widget para lanzar una nueva ventana del navegador y lanzar automáticamente el chat a pantalla completa.

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