Personalización del comportamiento de lanzamiento del widget y del icono del botón de su sitio web alojado en Amazon Connect - Amazon Connect
Cómo configurar el comportamiento de lanzamiento personalizado del widgetRestricciones y opciones admitidasConfiguración del lanzamiento del widget para casos de uso personalizadosHabilita la persistencia de las sesiones de chat en todas las pestañas

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.

Personalización del comportamiento de lanzamiento del widget y del icono del botón de 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.

Nombre de la opción Tipo Descripción Valor predeterminado

skipIconButtonAndAutoLaunch

 Booleano Una marca para habilitar o deshabilitar el lanzamiento automático del widget sin que el usuario haga clic al cargar la página. sin definir

alwaysHideWidgetButton

 Booleano Una bandera para habilitar o deshabilitar la representación del botón del icono del widget (a menos que haya una sesión de chat en curso). sin definir

programmaticLaunch

 Función sin definir

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>

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 estar agregando latencia en la carga de la página al obtener archivos de CDN, 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>

Habilite la persistencia de las sesiones de chat en todas las pestañas

De forma predeterminada, si se abre un chat en una pestaña y, a continuación, el usuario abre una nueva pestaña e inicia otro chat, se iniciará un nuevo chat en lugar de conectarse al chat existente. Puedes habilitar la persistencia de las sesiones de chat en todas las pestañas si quieres que el usuario se conecte al chat existente que se inició en la pestaña inicial.

La sesión de chat se guarda en el almacenamiento de sesiones del navegador, en la variablepersistedChatSession. Debe copiar este valor en el almacenamiento de sesiones de la nueva pestaña cuando se inicialice el widget por primera vez. Las siguientes son las instrucciones.

  1. Copia el siguiente código junto a las demás funciones de amazon_connect en el fragmento de widget alojado. Utiliza los controladores de registerCallback eventos para almacenarlos persistedChatSession como una cookie y poder acceder a ellos en la nueva pestaña. También limpia la cookie cuando finaliza el chat.

    amazon_connect('registerCallback', {
'CONNECTION_ESTABLISHED': (eventName, { chatDetails, data }) => {
 document.cookie = `activeChat=${sessionStorage.getItem("persistedChatSession")}; SameSite=None; Secure`;
}, 
'CHAT_ENDED': () => {
  document.cookie = "activeChat=; SameSite=None; Secure";
}
});

  2. Recupera el valor de la cookie, si existe, y establece el valor de almacenamiento de la sesión en la nueva pestaña.

    const cookie = document.cookie.split('; ').find(c => c.startsWith('activeChat='));
if (cookie) {
  const activeChatValue = cookie.split('=')[1];
  sessionStorage.setItem('persistedChatSession', activeChatValue);
}

//Your hosted widget snippet should be on this page