You are viewing the Spanish (Mexico) site, but your language preference is set to English. Switch to English site →

Menu

Usar los datos y el contexto del formulario previo a la interacción

Actualmente estás leyendo documentación de mensajería antigua de Flex. Si estás empezando con una nueva implementación de Flex, considera la posibilidad de utilizar Flex Conversations.

Cuando utilices el chat como canal de comunicación en tu contact center, puedes configurar un formulario previo a la interacción para recopilar información relevante del usuario (como su nombre y correo electrónico) antes del inicio de un chat. O puedes recopilar el contexto relevante a partir de los datos que ya tienes, como el nombre de inicio de sesión de un usuario o el referenciador HTTP. Puedes utilizar los datos y el contexto del formulario previo a la interacción para enrutar la tarea al agente adecuado o para mostrarle a este información relevante sobre el usuario.

Antes de comenzar

Para iniciar un chat, se debe configurar el friendlyName (nombre descriptivo) del usuario. El atributo friendlyName se establece en "Anonymous" (Anónimo) en el objeto context de la configuración predeterminada de WebChat. El valor de friendlyName se muestra al agente en Flex UI (la interfaz de usuario de Flex). Cuando se define tanto en el objeto context de WebChat como en un formulario previo a la interacción, el valor de dicho formulario anula el valor del objeto context.

Configurar un formulario previo a la interacción

El formulario previo a la interacción está desactivado de forma predeterminada. Para solicitar detalles a tus clientes antes de que interactúen con los agentes, activa el formulario previo a la interacción mediante el establecimiento del atributo startEngagementOnInit en false en el objeto Configuration.

        
        
        
              
              
              

              En la configuración de WebChat, puedes definir el objeto preEngagementConfig del componente PreEngagementCanvas.

              En el siguiente formulario de ejemplo se muestra un campo input obligatorio para el nombre de usuario, un campo de texto opcional para la pregunta del usuario y un botón de envío con la etiqueta "Ok Let's Go" (Lista, ¡vamos!).

              {}

              Ejemplo de formulario previo a la interacción

              PreEngagementCanvas

                    
                    
                    

                    Tipos de campos y validaciones compatibles

                    Tipos de campos

                    • InputItem
                    • SelectItem
                    • TextareaItem

                    Validaciones de campos

                    Atributo de campo Descripción
                    required Valida si un campo del formulario es obligatorio u opcional. Se puede establecer en true o false.
                    email.value Comprueba la validez del atributo value de un elemento de entrada de correo electrónico.

                    En el siguiente ejemplo se muestra un objeto preEngagementConfig con todos los tipos de campos de formulario admitidos, así como sus propiedades y atributos.

                          
                          
                          

                          Publicar las preguntas de los usuarios como un mensaje de chat

                          Puedes utilizar las acciones de WebChat para activar el flujo de Flex WebChat y enviar de forma automática las preguntas de los usuarios desde un formulario previo a la interacción a una ventana de chat.

                          En el siguiente ejemplo de código se muestra cómo pasar una pregunta (si la hay) desde el formData enviado y publicarla en el chat mediante el evento posterior a la acción StartEngagement.

                          // post question from pre-engagement into chat
                          
                            FlexWebChat.Actions.on("afterStartEngagement", (payload) => {
                                        const { question } = payload.formData;
                                        if (!question) return;
                          
                                        const { channelSid } = manager.store.getState().flex.session;
                                        manager.chatClient.getChannelBySid(channelSid)
                                            .then(channel => {
                                                channel.sendMessage(question);
                                            });
                                    });
                          

                          Al enviar un mensaje inicial en nombre del cliente, considera cambiar el mensaje de introducción o desactivar la propiedad de MessagingCanves predefinedMessage.

                          
                          FlexWebChat.MessagingCanvas.defaultProps.predefinedMessage = false;

                          Para obtener más información acerca del uso de las propiedades predeterminadas de React para configurar los componentes de WebChat, consulta la Configuración de WebChat: API de propiedades predeterminadas de React.

                          Recopilar y enviar contexto

                          En el siguiente ejemplo de código se muestra cómo establecer el objeto context en la configuración de WebChat:

                          const defaultConfiguration: Config = {
                            ...
                              context: {
                                  locationOrigin: window.location.origin,
                                  someContextProp: "ContextProp1",
                              }
                          }
                          

                          Si se establece el contexto, la propiedad context se guardará como un atributo de canal de chat y se podrá acceder a ella mediante el widget de Studio Send to Flex (Enviar a Flex).

                          Acceso y uso de los datos y el contexto previos a la interacción

                          Cuando se habilitan, los datos del formulario previo a la interacción y el contexto se guardan automáticamente como atributos de canal de Programmable Chat (es decir, channel.attributes.pre_engagement_data) cuando se inicia un chat.

                          Posteriormente, se puede tener acceso a los datos del formulario y contexto en el flujo de Studio de WebChat. Consulta la documentación de Twilio Studio para obtener más información sobre cómo Studio utiliza las variables. También puedes guardar los datos previos a la interacción y de contexto como atributos del canal de chat:

                          // context set in the WebChat
                          
                              context: {
                                  friendlyName: "Anonymous",
                                  locationOrigin: "http://someOriginUrl.com",
                                  someContextProp: "ContextProp1",
                              },
                          
                          // pre-engagement config set in WebChat
                          
                          preEngagementConfig: {    
                          
                              description: "Please provide some information",
                              fields: [
                                  {
                                      label: "What is your name?",
                                      type: "InputItem",
                                      attributes: {
                                          name: "friendlyName",
                                          type: "text",
                                          required: true
                                      }
                                  },
                                  {
                                      label: "What is your question?",
                                      type: "TextareaItem",
                                      attributes: {
                                          name: "question",
                                          type: "text",
                                          placeholder: "Type your question here",
                                          required: false,
                                          rows: 5
                                      }
                                  }, 
                              ],
                              submitLabel: "Ok Let's Go!"
                          }
                          
                          // Chat channel attributes saved on chat initiation
                          
                          "attributes": "{\"status\":\"ACTIVE\",\"long_lived\":false,\"pre_engagement_data\":{\"friendlyName\":\"Anonymous\",\"question\":\"¿Puedes ayudarme con mi factura?\",\"location\":\"http://localhost:8081/\",\"locationOrigin\":\"http://someOriginUrl.com\",\"someContextProp\":\"ContextProp1\"},\"from\":\"Bob\",\"channel_type\":\"web\"}"
                          

                          Datos de contexto y previos a la interacción en Studio

                          Un mensaje entrante enviado al canal de chat activa el flujo de WebChat de tu instancia de Flex, que puedes personalizar dentro de la consola de Twilio.

                          En el flujo de Studio de WebChat puedes hacer esto:

                          • Activar una conversación de bot en función de los datos recopilados antes de la interacción
                          • Utilizar los datos previos a la interacción para tomar decisiones en el flujo, como cuándo enviar la conversación a un agente
                          • Agregar los datos previos a la interacción a los atributos de tarea para la decisión de enrutamiento o la presentación de información a un agente en Flex

                          Studio utiliza la sintaxis Liquid para acceder a los datos previos a la interacción en un widget de Studio. Por ejemplo, a continuación se explica cómo accederías al atributo question de los datos del formulario previo a la interacción:

                          
                          "{{trigger.message.ChannelAttributes.pre_engagement_data.question}}"

                          Y así es como agregarías la pregunta inicial del usuario a los atributos de tarea de chat en el widget Send To Flex (Enviar a Flex):

                          Send to Flex widget initial question

                          {"initial_question": "{{trigger.message.ChannelAttributes.pre_engagement_data.question}}"}

                          Puedes acceder a los datos de contexto y del formulario previo a la interacción a través de la API REST de Programmable Chat.

                          Próximos pasos

                          Calificar esta página:

                          ¿Necesitas ayuda?

                          Todos la necesitamos a veces; la programación es difícil. Obtén ayuda ahora de nuestro equipo de soporte, o recurre a la sabiduría de la multitud visitando Stack Overflow Collective de Twilio o navegando por la etiqueta de Twilio en Stack Overflow.

                          Gracias por tus comentarios.

                          Selecciona los motivos de tus comentarios. La información adicional que nos brindas nos ayuda a mejorar nuestra documentación:

                          Enviando tus comentarios…
                          🎉 Gracias por tus comentarios.
                          Se produjo un error. Inténtalo de nuevo.

                          Gracias por tus comentarios.

                          thanks-feedback-gif