Incrusta tu typeform en un email

¿Quieres compartir tu typeform en tu página web? En el panel Compartir encontrarás tres maneras de hacerlo: en un “Pop-up”, incrustándolo de manera Estándar o a Página completa.

Aquí te explicamos cómo usar estas funcionalidades:

Para empezar, inicia sesión en tu cuenta de Typeform, abre el typeform que quieras incrustar, haz clic en el panel Compartir y selecciona la pestaña Embed.
Como puedes observar, aquí tienes las tres opciones principales de incrustación: Estándar, a Página completa y Pop-up.

1. Incrustación estándar

Un typeform incrustado de manera estándar se cargará en tu web en el lugar donde decidas ponerlo. Arriba (marcado con el número 1) puedes ver una previsualización de tu typeform incrustado.

Puedes cambiar la configuración de la incrustación en el  marcado con el número 2. Escoge la anchura y altura deseada. También puedes activar el Modo seamless.

Al hacer clic en Obtener el código (marcado con el número 3), se generará el código de incrustación basado en la configuración que hayas establecido. Sigue leyendo para saber más acerca de las opciones y ajustes de la incrustación.

Modo seamless

Esta opción está diseñada para hacer que tus typeforms incrustados se vean aún mejor, ya que se combinarán con los colores y diseño de tu web.

Al activar el modo seamless tendrás tres opciones de incrustación adicionales:

Transparencia

Puedes hacer el fondo de tu typeform completamente transparente, u opaco. Elige un valor entre 0% y 100%: 0% es totalmente opaco, y 100% es totalmente transparente. Con el deslizador puedes seleccionar el porcentaje de transparencia.

Este GIF muestra tres niveles de transparencia ligeramente diferentes. ¡Prueba a experimentar en tu web!

Por defecto verás que tu typeform incrustado contiene un pie de página con la barra de progreso. Puedes eliminarla simplemente cambiando el interruptor a On.

Ocultar cabecera

La cabecera aparecerá cuando tu typeform incrustado contenga un Grupo de preguntas o una pregunta muy larga que requiera “scrolling” para poder contestar, como por ejemplo un bloque de varias respuestas. Aquí tienes un ejemplo:

Para desactivar la cabecera, cambia el interruptor a On.
Cuando ya lo hayas configurado todo, puedes copiar el código (número 3 en la captura de pantalla del principio). Pégalo en el código de tu página web para incrustar tu typeform.

2. Incrustación de página completa

Haz clic en Página completa para ver cómo quedará tu typeform incrustado. Si te gusta, copia y pega el código en tu página web. Para esta opción no ofrecemos configuración de los elementos. Aquí tienes un ejemplo.

3. Popup

En el paso número 1 puedes ver una previsualización de tu popup.

El número 2 marca el menú de configuración, donde podrás elegir varias opciones: Popup estándar o que se abra como un panel, a la izquierda o a la derecha de la pantalla.

A continuación, puedes editar el botón que verá la gente en tu web:

Puedes modificar el texto del botón escribiendo lo que quieras, con un límite máximo de 24 caracteres:

Haz clic en el menú desplegable del Color para elegir el color de tu botón. Puedes usar los dos paneles de color para elegir uno manualmente, o introducir un código de color específico.

El deslizador Esquinas redondeadas te permite editar la curvatura de las esquinas del botón. 0% significa esquinas cuadradas y 100% esquinas semi-circulares. Aquí puedes ver cómo queda al 0%, 50% y 100%:

Haz clic en Convertir a enlace para mostrar un texto en lugar de un botón. Puedes elegir el tamaño del texto con el deslizador. Recuerda que la fuente se elige en el apartado Diseño del panel Crear.

Haz clic en Mostrar popup automáticamente y tu typeform se cargará instantáneamente al abrir tu web. Con esta opción activada, todas las demás opciones de configuración quedarán inhabilitadas:

También puedes ocultar la cabecera, que se suele mostrar en los bloques de varias preguntas, y el pie del typeform, que muestra la barra de progreso. Así es como lo verás con la cabecera y pie activados:

Con la cabecera oculta:

Y con la cabecera y el pie ocultos:

Finalmente, está la opción Cerrar después de enviar. Se trata de una funcionalidad PRO+ que te permite establecer un temporizador para que el popup con tu typeform se cierre automáticamente un vez que el encuestado haya enviado sus respuestas. En esta imagen lo hemos puesto en 1 segundo:

Cuando hayas elegido tus opciones de incrustación, hac clic en Obtener el código:

Verás esta ventana con tu código de incrustación. Haz clic en Copiar código para poder usarlo en tu web.

Tamaño del texto en typeforms incrustados

Cuando se incrusta un typeform, ajustamos el tamaño del texto para que se adapte correctamente a espacios más reducidos. Dependiendo del espacio disponible, el texto de un typeform se mostrará en uno de los siguientes tamaños: Grande (preestablecido), Mediano o Pequeño. El tamaño elegido se basa en las siguientes condiciones:

  • si el ancho del typeform > 800px = Grande
  • si el ancho del typeform < 800px = Mediano
  • si el ancho del typeform < 550px = Pequeño
  • si la altura del typeform < 450px = Pequeño

Si accedes a tu typeform incrustado en un dispositivo móvil y ves un símbolo que te pide que gires la dirección de tu pantalla, muy probablemente significa que la incrustación tiene unas dimensiones demasiado grandes para ser vistas en un dispositivo móvil. Si este es el caso, comprueba la anchura (width) y altura (height) en el código incrustado. Para poder mejorar la experiencia en móvil también te será útil revisar el contenido de tu typeform y dividir las porciones de texto más grandes en bloques más pequeños.