¿Cómo implementar step-by-step guías en los chats

Puede activar las step-by-step guías en los chats de Amazon Connect para crear experiencias interactivas de autoservicio. Esta función le ayuda a resolver los problemas de los clientes con mayor rapidez al recopilar y transferir el contexto a sus agentes. Puede presentar a los clientes la misma guía que creó para sus agentes a fin de gestionar mejor la configuración.

Habilitar step-by-step las guías en los chats de Amazon Connect

1. Asegúrese de haber activado y configurado las step-by-step guías para agentes. Después de configurar las guías, confirme que aparezcan cuando haya un contacto reservado para que lo responda un agente.

2. Configura tu flujo para invocar Views en el flujo de chat mediante el bloque Show View, del mismo modo que lo configurarías para tu agente. El siguiente ejemplo activará la guía cuando el cliente elija la burbuja de chat. El flujo pasará por dos vistas antes de transferir el chat a un agente.

   

3. Crea un widget de chat alojado desde la página de administración. Configura el flujo de chat como el que creaste.

   

   Este chat hospedado generará un script similar al siguiente:

   
   <script type="text/javascript">
     (function(w, d, x, id){
       s=d.createElement('script');
       s.src='https://d38ij7tdo5kvz7.cloudfront.net/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', '0b68a091-3538-4dcd-888e-f3b3ae64c5aa');
     amazon_connect('styles', { iconType: 'CHAT', openChat: { color: '#ffffff', backgroundColor: '#123456' }, closeChat: { color: '#ffffff', backgroundColor: '#123456'} });
     amazon_connect('snippetId', 'QVFJREFIZ3R0VzRTQkxzUnR6S1BPcXRseVBOUVlvWVlFclZwZmJ5bWZUc1hHVU1SM0FHM3BsdU4yaTZVTW9jeTRqQTRWMDJZQUFBQWJqQnNCZ2txaGtpRzl3MEJCd2FnWHpCZEFnRUFNRmdHQ1NxR1NJYjNEUUVIQVRBZUJnbGdoa2dCWlFNRUFTNHdFUVFNRFB0SmlxckgzenRMTjJ4cUFnRVFnQ3RxUHVQZm1Zd1F2ZjZVTzJ2ZTk5am1aUWEwZW53SHFzcmQ5bkdzRVdrNHJIbkJGTk81ekRBK0o4L1Q6OnBwUTZuLzRRKzVvdWdiUHhJRUU2MGM0TDlhcXEyZ0tramVmNkp3N2YvNXBIMTRwdDJSWmFVcjdzVTNzaXorc1BHTHhSOGd0b285dWpiemFrTU1tbWZoY0VCUEY4S3Z1ckdXNnZtV0ZjcVNFYnhrZlpuMVpsb1FGQjZ1SW5LMi9laHlmQVhXY3JXS1NDL1oxd29UejVkSUYwOFBoT3QvUT0=');
     amazon_connect('supportedMessagingContentTypes', [ 'text/plain', 'text/markdown' ]);
   </script>                                      
                       

   La última línea contiene una serie de mensajes permitidos. Puedes añadirle mensajes interactivos para activar las guías en el chat. Por ejemplo:

   
   amazon_connect('supportedMessagingContentTypes', ['text/plain', 'application/vnd.amazonaws.connect.message.interactive', 'application/vnd.amazonaws.connect.message.interactive.response']);                        
                       

4. Añade lo siguiente a tu lista de URL permitidas para que las step-by-step guías puedan funcionar en el chat:

   • your-website-url/views/renderer/

   Si utilizas un CSP para que el widget de chat funcione en tu sitio web, ya deberías tener una URL de Cloudfront. Por ejemplo:

   • https://unique-id.cloudfront.net/amazon-connect-chat-interface.js

nota

También puedes usar Guides en el chat con un widget de comunicación creado a medida. Para obtener más información sobre cómo añadir step-by-step guías a tu widget de comunicaciones personalizado, consulta la interfaz de chat de Amazon Connect en Github.