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.

Incrustación personalizada

Relacionado con:

Para navegadores de ordenadores de escritorio

Añade un <iframe> a tu documento HTML y pon en el atributo src la URL pública de tu typeform. Por ejemplo:

<iframe id=”my_typeform” src=”https://yourname.typeform.com/to/abc123″></iframe>

Puedes personalizar el tamaño y diseño del <iframe> (y por lo tanto el de tu typeform) usando CSS:

#my_typeform {
display: inline-block;
width: 800px;
height: 600px;
margin: 60px;
}

Atajo de teclado

Asegúrate de que pasas el foco al <iframe> utilizando JavaScript para activar la navegación por teclado. Puedes hacer esto con el siguiente código:

<script type=”text/javascript”>
document.getElementById(“typeform”).contentWindow.focus()
</script>

Para dispositivos táctiles

Te recomendamos que utilices un <iframe> de pantalla completa en dispositivos móviles para asegurar una buena experiencia al usuario. En otras palabras, no deberías mostrar el <iframe> en medio de tu página tal y como hemos descrito antes para los navegadores de ordenadores de escritorio.

Lo que te recomendamos es mostrar un link o botón en tu página web donde al hacer click se abra una ventana modal con el <iframe> de pantalla completa (ocupando el 100% de altura y anchura).

Esto significa que debes detectar el dispositivo del usuario para poder decidir cómo se renderiza la página y cómo se va a mostrar el <iframe> de tu typeform. El siguiente código JavaScript funciona bien en la mayoría de dispositivos:

if (/mobile|tablet/i.test(navigator.userAgent)) {
// Móvil/Dispositivo táctil:
// –> Mostrar link o botón que lanza el iframe como popup/modal
// –> (o que simplemente redirige al formulario en typeform.com)
} else {
// Otros dispositivos:
// –> Mostrar el iframe en línea
}

Para lanzar tu typeform en un pop-up/modal volvemos a recomendarte que uses el código que te proporcionamos. Puedes encontrarlo en la sección Compartir de tu typeform.

Apps móviles (iOS + Android)

Los typeforms pueden incrustarse en apps de iOS y Android usando componentes (UI)WebView.

Personalizar el botón en typeforms incrustados

El botón emergente predeterminado es una etiqueta de anclaje / enlace HTML estándar (<a>), que se puede personalizar mediante la aplicación de reglas CSS, dirigiéndose a este elemento.

1. Los estilos CSS predeterminados incluidos en el código incrustado se aplican al botón con la especificidad “.typeform-share.button” {…}

2. Puedes borrar los estilos predeterminados incluidos en el código incrustado eliminando la clase del elemento anclado. (No borres la clase “typeform-share” – esta clase es necesaria para que el código incrustado funcione)

3. Puedes agregar un identificador al elemento de anclaje y apuntarlo a sus reglas CSS para anular cualquier otro estilo que se esté aplicando.

Aplicando estos cambios, la etiqueta de anclaje modificada se vería más o menos así:

<a class=”typeform-share” id=”typeform_launch_button” href=”https://yourname.typeform.com/to/AbC123″ data-mode=”1″ target=”_blank”>Empecemos</a>

El botón puede ser encontrado en tu CSS de la siguiente manera:


#typeform_launch_button {

display: inline-block;

width: 200px;

line-height: 50px;

font-family: “Helvetica Nueue”;

text-transform: uppercase;

border: none;
color: red;
font-size: 20px;

// etc.

}

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