Signup
Signup
  1. Ayuda
  2. Avanzado
  3. Compartir, insertar y notificaciones
  4. Convierte tu typeform en un chat

Convierte tu typeform en un chat

Descubre cómo convertir tu typeform en un chat e integrarlo dentro de tu página web.

Antes de empezar, también puedes echar un vistazo a estos útiles consejos y recomendaciones para que tus interacciones online tengan un tono más cercano y conversacional o descubrir qué es una interfaz de usuario conversacional (o CUI, por sus siglas en inglés) aquí.

Preparados, listos... ¡chat!

1. Abre el typeform que quieras convertir en un chat, pulsa en el panel "Compartir" y selecciona la opción "Empezar un chat".

Screen_Shot_2022-05-04_at_1.21.33_PM.png

Si aún no has publicado el typeform, otra opción es pulsar en el botón "Publicar" (dentro del panel "Crear") y seleccionar la opción "Chat" en la ventana emergente:

Screen_Shot_2022-05-04_at_5.10.22_PM.png

¡Ahora podrás ver el aspecto que tendría tu typeform si lo convirtieras en un chat! Abre tu typeform en el panel de previsualización que encontrarás a la derecha:

Screen_Shot_2022-05-04_at_5.19.42_PM.png

Los usuarios pueden seleccionar una de las opciones que se les muestra en la parte inferior de la pantalla para responder a la pregunta o bien escribir su respuesta en caso de que utilices una pregunta de tipo "Respuesta corta" o "Respuesta larga".

También pueden omitir aquellas preguntas que no hayas marcado como "obligatorias". Este es el aspecto que tiene la opción "Omitir" en una pregunta en la que se ofrecen diversas posibilidades:

Y este es el aspecto de una pregunta abierta en la que el usuario debe escribir su respuesta:

Screen_Shot_2022-05-04_at_5.21.37_PM.png

2. Haz clic en "Página", "Estándar" o "Popover" para indicar cómo quieres compartir tu chat.

Screen_Shot_2022-05-05_at_10.37.23_AM.png

¡Consejo! Si eres un/a usuario/a avanzado/a y no tienes problema en añadir fragmentos de código personalizado, puedes echar un vistazo a este hilo de nuestra Comunidad (en inglés) o bien acceder al kit de desarrollo de software de Typeform para realizar incrustaciones (Embed SDK) en JavaScript o React si quieres compartir tu chat en forma de botón emergente.

3. En el modo de incrustado "Página", puedes añadir un avatar a tu chat. Para ello, despliega el menú del apartado "Diseño":

Screen_Shot_2022-05-05_at_10.41.34_AM.png

También puedes activar la opción de "emulación de escritura" en el menú del apartado "Avanzado". Para ello, selecciona el interruptor correspondiente (se pondrá de color azul):

Screen_Shot_2022-05-05_at_10.42.38_AM.png

Selecciona la velocidad de emulación de escritura que prefieras en el menú desplegable.
Pulsa en el botón "Copiar" que verás al final del menú para obtener el enlace que te permitirá compartir el typeform en tu página web, etc.

4. Si has seleccionado un incrustado estándar, despliega el menú del apartado "Diseño". Allí podrás añadir un avatar y establecer el tamaño de la ventana de chat que quieres que aparezca en tu página web:

Screen_Shot_2022-05-05_at_10.58.11_AM.png

Si quieres que el fondo sea transparente para que el chat se integre perfectamente en el diseño de tu página web, utiliza el control deslizante para indicar el nivel de transparencia del fondo que deseas.

Despliega el menú del apartado "Avanzado" para activar el interruptor de la emulación de escritura y seleccionar su velocidad, tal y como hicimos antes en el modo "Página".

Cuando la configuración esté a tu gusto, haz clic en el botón "Obtener el código" y añádelo a tu página web:

Screen_Shot_2022-05-05_at_11.26.47_AM.png

Si has utilizado campos ocultos, estos se incluirán automáticamente en tu código después del atributo "data-tf-hidden". Por ejemplo, si has establecido campos ocultos para "nombre" y "ciudad", verás el siguiente código: data-tf-hidden="nombre=xxxxx,ciudad=xxxxx".

Cuando pegues el código en tu página web, puedes cambiar las cadenas de "xxxxx" que aparecen por defecto por valores reales. Como, por ejemplo: data-tf-hidden="nombre=Carlos,ciudad=Barcelona".

Nota: puedes usar cualquier tipo de archivo de imagen como avatar, pero la imagen que vayas a cargar debe tener un tamaño máximo de 2 MB.

5. Si has seleccionado un incrustado "Popover" (es decir, en forma de elemento emergente), despliega el menú del apartado "Diseño". Allí podrás añadir un avatar e indicar de qué color quieres que sea el botón del chat. Pulsa en el icono de la gota para elegir un color o bien escribe el código de color hexadecimal que quieras para que encaje con el de tu página web.

También puedes añadir un mensaje de saludo para animar a los usuarios que entren en tu página web a que abran el chat, así como un icono personalizado para sustituir el icono de chat que aparece por defecto.

Por último, puedes hacer que se muestre un punto de notificación en el elemento emergente para avisar a los usuarios de que tienen un mensaje sin leer. La opción "Ocultar tras abrir chat" te permite establecer el número de días que quieres que tarde en aparecer de nuevo el punto de notificación después de que un usuario interactúa con el chat.

Screen_Shot_2022-05-05_at_11.42.02_AM.png

Puedes activar la emulación de escritura en el menú del apartado "Avanzado", tal y como te indicamos en los modos anteriores.

En este mismo menú ("Avanzado"), también puedes pulsar el interruptor "Personalizar opciones de lanzamiento" para establecer en qué momento quieres que se muestre el popover emergente a los usuarios que entren en tu página web: cuando se cargue la página, cuando intenten salir de la página (lo que hemos llamado "intento de salida"), cuando hayan pasado un tiempo establecido en la página o cuando hagan scroll y se desplacen hacia abajo por la página.

Screen_Shot_2022-05-05_at_11.54.34_AM.png

¡Comprueba cómo se verá tu popover emergente! Pulsa en el botón que encontrarás en la pantalla de previsualización de la derecha:

Screen_Shot_2022-05-05_at_11.56.08_AM.png

Cuando termines de hacer los ajustes que quieras, pulsa el botón "Obtener el código" y pégalo donde sea necesario.

Si has utilizado campos ocultos, estos se incluirán automáticamente en tu código después del atributo "data-tf-hidden". Por ejemplo, si has establecido campos ocultos para "nombre" y "ciudad", verás el siguiente código: data-tf-hidden="nombre=xxxxx,ciudad=xxxxx".

Cuando pegues el código en tu página web, puedes cambiar las cadenas de "xxxxx" que aparecen por defecto por valores reales. Como, por ejemplo: data-tf-hidden="nombre=Carlos,ciudad=Barcelona".

¡Consejo! Las reglas lógicas y la función "Recordar información" son herramientas que vienen genial para crear chats ;) Los usuarios que interactúen con tus chats tendrán la sensación de estar hablando realmente contigo cuando te dirijas a ellos por su nombre o cuando vean que les haces preguntas específicas en función de lo que ellos responden.

 

Consulta con nuestra comunidad

Encuentra respuestas
Contáctanos