Cómo integrar un formulario de registro en tu sitio web.

Qué aprenderás

Descubre cómo añadir un formulario integrado a tu sitio web al pegar el código de integración en los archivos del tema o el editor de páginas de tu tienda de comercio electrónico, blog o sitio. El lugar donde pegues el código dependerá de dónde quieras que aparezca el formulario integrado y de cómo esté diseñada tu página.

Estas instrucciones son solo para los formularios integrados. No debes seguir estos pasos para añadir formularios emergentes, de página completa o flyouts. Una vez que hayas pegado el código de integración en el sitio web, podrás editar el formulario en Klaviyo y publicar los cambios sin tener que actualizar el fragmento.

Si no cuentas con una integración de Shopify, BigCommerce, Magento o WooCommerce, que sincronizan un fragmento de código llamado «Klaviyo.js» a través de las respectivas integraciones (o en el caso de Shopify, a través de una integración de aplicación), primero tendrás que instalar Klaviyo.js en el sitio para poder publicar formularios. Klaviyo.js también se conoce como el fragmento de código de seguimiento de Actividad en el Sitio, ya que también habilita el seguimiento de la actividad del usuario. Encontrarás más detalles en nuestra guía sobre el seguimiento web. 

Crea un formulario de integración

1. Ve a la sección Formularios de registro > Crear formulario de registro > Crear un nuevo formulario de registro.
2. Ponle un nombre al formulario y elige una lista a la que añadir suscriptores.
3. Selecciona Integrado como tipo de formulario.
4. Haz clic en Guardar y continuar con el diseño.
   
5. Utiliza el editor para elegir el estilo del formulario y añadir los campos que desees.

Obtén el código de integración

Una vez que hayas elegido el estilo del formulario, podrás obtener el código de integración de dos formas:

1. En la sección Segmentación y comportamiento:
   
2. Al publicar un formulario integrado, verás una ventana modal que también te pedirá que pegues el código de integración en tu sitio:
   

A continuación, publica el formulario y copia el fragmento de código para pegarlo en tu sitio. 

Pega el código en tu sitio

Pegarás el código en un lugar u otro del sitio en función de dónde quieras que aparezca el formulario integrado, y esto variará según la integración. A continuación, describimos algunos ejemplos prácticos. Desplázate hacia abajo para encontrar la plataforma que utilizas (es decir, BigCommerce, Shopify, WooCommerce u otra) y así obtener instrucciones de integración específicas.

BigCommerce 

Si quieres sustituir tu formulario de pie de página de BigCommerce por un formulario de Klaviyo, o si prefieres añadir un formulario integrado de Klaviyo en otro lugar del sitio, puedes seguir nuestras indicaciones a continuación. 

Utiliza el editor de páginas

1. Ve a Storefront > Webpages (Escaparate > Páginas web).
2. Selecciona la página en la que debe aparecer el formulario integrado.
3. Selecciona Edit  (Editar) en el menú Action (Acción).
   
4. Haz clic en HTML en la sección Page Content (Contenido de la página) para abrir el editor de código fuente.
5. Pega el código de integración del formulario.
6. Haz clic en Update (Actualizar) y guarda los cambios.

Utiliza el editor de temas

1. Inicia sesión en tu tienda de BigCommerce.
2. Ve a Storefront > My Themes (Escaparate > Mis temas).
3. Haz clic en Customize (Personalizar) en la sección Current Theme (Tema actual). 
4. Selecciona la página a la que quieras añadir el formulario integrado.
5. Localiza la sección de la página a la que quieres añadir el formulario.
6. Arrastra un bloque HTML.
7. Pega el código de integración del formulario en el editor del bloque.
8. Guarda el bloque.
9. Guarda los cambios.
   
   

Inserta elementos en los archivos de temas 

1. Ve a Storefront > My Themes (Escaparate > Mis temas).
2. Haz clic en el menú desplegable Advanced (Avanzado) de la sección Current Theme (Tema actual).
3. Haz clic en Edit Theme Files (Editar archivos de tema).
   
   
   1. Si no aparece la opción Edit Theme Files (Editar archivos de tema), sigue estos pasos: 
      1. Haz una copia del tema.
      2. Edítala.
4. Ve hasta el archivo que contiene el código fuente de la sección en la que quieras integrar un formulario.
5. Localiza la sección del código en la que deba aparecer el formulario.
6. Pega el código de integración.
7. Guarda los cambios. 

Shopify

Pie de página de Shopify para todos los temas

Si quieres colocar tu formulario integrado en el pie de página de tu sitio, sigue los pasos que se indican a continuación. Las instrucciones a continuación se aplican tanto a los temas vintage de Shopify como a los temas 2.0 de la misma plataforma. 

1. Ve a la página de administración de Shopify.
2. Dirígete a Online Store > Themes (Tienda en línea > Temas).
3. Pulsa los 3 puntos y elige Edit code (Editar código).
4. Abre el archivo de temas footer.liquid.
5. Localiza la zona en la que quieras que aparezca el formulario.
   1. En el ejemplo siguiente, el formulario de registro aparecerá por encima de la información de derechos de autor de tu sitio:
      
6. Pega el código de integración del formulario.
7. Pulsa Guardar.

El formulario aparecerá ahora en el pie de página del sitio.

Shopify sin pie de página para temas vintage

Si quieres incluir un formulario integrado en tu sitio de Shopify (con un tema vintage) en cualquier lugar además del pie de página, sigue estos pasos: 

1. Ve a la página de administración de Shopify.
2. Dirígete a Online Store > Themes (Tienda en línea > Temas).
3. Haz clic en Customize > Add Section (Personalizar > Añadir sección).
4. Elige 1 de las siguientes opciones, según lo que te aparezca:
   • Contenido personalizado
     1. Añadir este bloque
     2. Borrar el contenido predeterminado que se rellena automáticamente
   • HTML personalizado 
5. Haz clic en Add content > Custom HTML (Añadir contenido > HTML personalizado).
6. Pega el código de integración.
7. Pulsa Guardar.

Shopify sin pie de página para temas 2.0

Si quieres incluir un formulario integrado en tu sitio de Shopify (con un tema 2.0) en cualquier lugar además del pie de página, sigue estos pasos:

1. Crea tu formulario de registro integrado en Klaviyo. Ten en cuenta que el tipo de formulario debe establecerse como formulario integrado en la sección Estilos. Para formularios emergentes, de página completa o flyouts, el proceso no es el mismo. 
2. Guarda el ID del formulario.
   Para encontrarlo, ve al formulario integrado en tu cuenta de Klaviyo. El ID del formulario es un código de seis letras que aparece al final de la URL.
3. Ve a la página de administración de Shopify.
4. Ve a Online Store > Themes (Tienda en línea > Temas).
5. Haz clic en Customize (Personalizar).
6. Ve a la plantilla de página en la que quieras añadir el formulario, como la página de inicio.
7. Haz clic en Add Section (Añadir sección) y desplázate hacia abajo hasta encontrar Klaviyo Embedded Form(Formulario integrado de klaviyo), que se encuentra debajo de Apps (Aplicaciones).
   
   
8. Haz clic en la nueva sección y añade el ID de formulario integrado en el cuadro de texto. 
   
9. Pulsa Guardar.
10. Ahora, el formulario integrado se habrá añadido a la plantilla de página, y podrás moverlo según sea necesario.

Página de contraseñas de Shopify para todos los temas

Si quieres colocar el formulario integrado en la página de contraseñas de tu sitio, sigue los pasos que se indican a continuación. Las instrucciones a continuación se aplican tanto a los temas vintage de Shopify como a los temas 2.0 de la misma plataforma. 

Tendrás que instalar un fragmento de código, conocido como «Klaviyo.js», para habilitar los formularios de registro por separado en la página de contraseñas. Esto se debe a que el archivo password-content.liquid (o el archivo password.liquid en Shopify 2.0) no utiliza el archivo theme.liquid, donde la integración lo instala automáticamente. A continuación, se incluyen las instrucciones para instalar Klaviyo.js.

1. Ve a la página de administración de Shopify.
2. Dirígete a Online Store > Themes (Tienda en línea > Temas).
3. Haz clic en Actions > Edit code (Acciones > Editar código).
4. Para los temas vintage, abre el archivo de temas password-content.liquid y, para los temas 2.0, el archivo password.liquid.
5. Copia el fragmento de código de Klaviyo.js que aparece a continuación y pégalo en la parte inferior del archivo.
   

   <script type="text/javascript" async="" src="https://static.klaviyo.com/onsite/js/PUBLIC_API_KEY/klaviyo.js"></script>

6. En el fragmento, sustituye «PUBLIC_API_KEY» por la clave de API pública de tu cuenta de Klaviyo; para encontrarla, ve a Configuración > Claves de API.
   
7. Delimita el formulario de registro predeterminado de Shopify con etiquetas de comentarios para evitar que se muestre en el sitio:
   1. Añade {% comment %} para iniciar la etiqueta. 
   2. Añade {% endcomment %} para cerrar la etiqueta.
      
8. Pega el código de tu formulario integrado de Klaviyo encima del formulario integrado de Shopify comentado.
9. Pulsa Save (Guardar). 

Ahora, el formulario de integración de Klaviyo aparecerá en la página de contraseñas del sitio.

Ten en cuenta que todos los formularios emergentes y flyouts publicados en tu cuenta aparecerán en esta página una vez que instales Klaviyo.js, a menos que especifiques que no se muestren en la URL concreta. 

WooCommerce

1. Abre tu panel de WooCommerce.
2. Haz clic en Customize Your Site (Personaliza tu sitio).
3. Ve a la página a la que quieras añadir el formulario integrado.
4. Haz clic en Add a Widget > Custom HTML (Añadir widget > HTML personalizado).
5. Pega el código de integración en la sección de contenido.
6. Pulsa el botón Publish (Publicar) para publicar los cambios.

Otras plataformas 

Para que un formulario integrado de Klaviyo funcione, debes contar con dos fragmentos de código en tu página: el código Javascript de Klaviyo y el código de integración del formulario. Muchas de las integraciones predeterminadas de Klaviyo (por ejemplo, Magento y Magento 2) inyectan automáticamente el archivo Klaviyo.js en el sitio. Comprueba la configuración de integración de la plataforma que usas para asegurarte de que esta opción esté seleccionada. 

Si la plataforma no tiene una integración nativa en Klaviyo, añade nuestro .js de forma manual mediante estas instrucciones. 

Una vez instalado Klaviyo.js, puedes pegar el código de integración del formulario en el código fuente o HTML del sitio en el que quieras que aparezca. Si prefieres que una persona experta edite el código del sitio por ti, contacta con un socio de Klaviyo. 

Recursos adicionales

• Introducción a los formularios de registro
• Cómo instalar Klaviyo.js para publicar formularios de registro
• Cómo integrar un formulario en tu página de confirmación de pedidos
• Cómo añadir un formulario integrado de Klaviyo a tu sitio de BigCommerce