We’re beavering away on the next version of Typeform. If you’re a v2 Beta Tester, use the tabs below to switch articles. Learn more about v2.

?

We’re beavering away on the next version of Typeform. If you’re a v2 Beta Tester, use the tabs on the left to switch articles.

Incrusta tu typeform

¿Quieres compartir tu typeform en tu página web? Ve al panel de Compartir y encontrarás tres maneras de hacerlo – en una “Pop-up”, incrustándolo de manera Estándar o a Página completa.

Abajo te explicamos cómo usar estas funcionalidades:

Salta a:
1. Incrustación Estándar
2. Incrustación de página completa
3. Pop-up
4. Tamaño del texto en typeforms incrustados
5. Incrusta tu typeform en un email
6. Campos Ocultos en typeforms incrustados

Accede a tu cuenta de Typeform, abre el typeform que deseas incrustar y haz click en el panel de Compartir > Incrustar en una web:

En el “screenshot” de arriba encontrarás marcados en un encuadre naranja las tres opciones de incrustación, Estándar, Página completa y Pop-up.

Incrustación Estándar

Un typeform incrustado de manera estándar se cargará automáticamente donde decidas ponerlo de tu página web. Arriba (marcado como número 1) puedes ver una previsualización de tu typeform incrustado.

Puedes cambiar la configuración de la incrustación en el menú marcado con el número 2. Escoge la anchura y altura deseada. También puedes escoger el Modo seamless (también conocido como modo fantasma, por la transparencia de la integración en tu web).

Al activar el Modo seamless aparecerán tres opciones más.

La transparencia del fondo

Puedes hacer que el fondo de tu typeform sea total o parcialmente transparente, o bien completamente opaco. Escoge un valor entre 0% (totalmente opaco) y 100% (totalmente transparente).

El gif a continuación te muestra como puedes jugar con la transparencia del fondo:

Ocultar pie de página

Por defecto verás que tu typeform incrustado contiene un pie de página que contiene la barra de progreso. Puedes removerla 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, simplemente activa el interruptor a On.

Cuando ya lo hayas configurado todo, puedes copiar el código (número 3) en el “screenshot” del principio. Pégalo en el código de tu página web para incrustar tu typeform.



Incrustación de página completa

Solo tienes que hacer click en Página completa y podrás ver cómo quedará tu typeform incrustado. Si te gusta, copia y pega el código en tu pagina web. Para esta opción no ofrecemos configuración de los elementos. Aquí tienes un ejemplo.

Pop-up

En el paso número 1 puedes ver la previsualización de tu Pop-up. El menú que encontrarás aquí te permitirá editar qué tipo de botón quieres que tus usuarios vean.

Puedes editar el textotamaño de la fuente color. Incluso puedes ajustar cuán redondas quieres las esquinas del botón:

Haz click en Convertir a link para que se muestre texto en vez de un botón. Podrás seguir escogiendo qué texto, tamaño de fuente y color usar:

Haz click en Mostrar pop-up automáticamente para que tu typeform se lance en forma de pop-up cuando tu página web se abra. Con esta opción activada podras configurar otros ajustes:

También puedes cambiar más cosas en el menú (marcado con el número 2 al principio).

Con este modo de incrustación puedes escoger un pop-up estándar, o un “drawer” que se deslice desde la izquierda o derecha.

También puedes ocultar la cabecera y pie de página.

Por último también ofrecemos la opción Cerrar al enviar. Esta es una funcionalidad PRO+ que te permite configurar un temporizador para que tu pop-up se cierre automáticamente cuando tu usuario haya rellenado el typeform. En la imagen de arriba lo hemos configurado a 2 segundos.

Tamaño del texto en typeforms incrustados

Cuando se incrusta un typeform, reajustamos el texto para que se adapte correctamente a espacios más reducidos. Esto es particularmente pertinente cuando el typeform es incrustado como un widget en una página web.

Dependiendo del espacio disponible, el texto de un typeform se mostrará en los siguientes tamaños: Grande (por defecto), Mediano o Pequeño. Las reglas que rigen la utilización de cada tamaño están basadas 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;as grandes en bloques más pequeños.

Si tienes conocimientos de HTML y JavaScript, sigue estas instrucciones para una incrustación personalizada.

Incrusta tu typeform en un email

Sino también puedes usar este truco:

  1. Haz un pantallazo (screenshot) a la Pantalla de inicio de tu typeform (o cualquier pantalla de tu typeform que te gustaría que fuera la portada),
  2. Insértala en el email,
  3. Añádele un link a tu typeform a la imagen.

De esta manera la gente intentará hacer clic en el botón de la Pantalla de inicio y serán redirigidos a tu typeform – en una nueva pestaña del navegador.

Si lo que deseas es incrustar tu typeform en Facebook o Tumblr, echa un vistazo a estos artículos.


Campos Ocultos en typeforms incrustados

Si lo que deseas es incrustar un typeform usando Campos Ocultos, échale un vistazo a este artículo para más detalles: Cómo usar Campos Ocultos con typeforms incrustados

¿Te pareció útil este artículo?
¡Gracias!