Cómo añadir un formulario incrustado de Klaviyo a tu sitio BigCommerce

Qué aprenderás

Aprende a añadir un formulario de incrustación de Klaviyo a tu sitio BigCommerce, lo que requiere crear el formulario en Klaviyo, y luego pegar su código de incrustación en los archivos de tu sitio donde quieras que aparezca (por ejemplo, en el pie de página).

Esta guía muestra cómo sustituir el formulario de registro predeterminado de BigCommerce por un formulario incrustado de Klaviyo.

Antes de empezar

Antes de crear un formulario de registro en Klaviyo, primero debes integrarte con BigCommerce, y luego habilitar la funcionalidad de formulario de registro (también llamada "seguimiento in situ"). Si has marcado la opción Añadir automáticamente JavaScript in situ de Klaviyo al integrar con BigCommerce, ya está todo listo. 

Si no es así:

1. En Klaviyo, haz clic en el nombre de tu organización en la esquina inferior izquierda y selecciona integraciones.
   
2. Haga clic en BigCommerce.
3. Marque la opción Añadir automáticamente javascript in situ de Klaviyo.
4. Pulse Guardar.

El ejemplo de este artículo utiliza el tema predeterminado Cornerstone de BigCommerce. Ten en cuenta que tu tema puede diferir, junto con los nombres de algunos archivos o ubicaciones de fragmento de código.

Añadir el código de incrustación del formulario a tu sitio web

Primero, crea y publica un formulario incrustado en Klaviyo. Esta sección repasará los siguientes pasos para pegar el código de incrustación de tu formulario en tu sitio de BigCommerce para que se muestre y sincronice los datos correctamente.

1. Si aún no lo has hecho, copia el código de incrustación de tu formulario de incrustación. Puedes acceder al código de incrustación del formulario abriendo el formulario en el editor y haciendo clic en la sección de comportamiento Targeting & .
   
2. Navega hasta tu sitio web y localiza el formulario de registro predeterminado de BigCommerce. Si utilizas un tema Cornerstone, está en el pie de página del sitio.
   
   • Si no ves un formulario predeterminado en tu sitio web:
     • Abre tu panel de control de BigCommerce.
     • Navegue hasta Marketing > Email Marketing
     • Marca la casilla Permitir suscripciones a newsletter . Esto te habilita para recoger el consentimiento de correo electrónico de los visitantes de tu sitio web, y también añade una casilla predeterminada de correo electrónico Registrarse en tu sitio BigCommerce. Si esta casilla ya está marcada y sigues sin ver un formulario por defecto, es posible que tu tema no lo incluya.
3. Abre tu panel de control de BigCommerce y ve a Storefront > Temas.
4. En la sección Tema actual, haz clic en el menú desplegable Avanzado y elige Editar archivos de tema.
   
   • Si utilizas un tema predeterminado, no podrás seleccionar esta opción. En lugar de eso:
     
     • Haz clic en Hacer una copia, ponle un nombre y, a continuación, selecciona Guardar una copia. 
     • Una vez añadido a la sección Temas, selecciona los 3 puntos y luego elige Editar archivos de temas. Ten en cuenta que las modificaciones que realices sólo se aplicarán al tema que estés editando, y tendrás que aplicar el tema a tu sitio web para ver reflejados los cambios.
5. En la barra lateral izquierda, abre el archivo correspondiente al lugar donde aparecía el formulario por defecto en tu sitio. Si el formulario por defecto estaba situado en el pie de página, como en el ejemplo, navega a plantilla > componentes > común, y haz clic en el archivo pie.html.
6. Utiliza el atajo de teclado Buscar (Comando+F en Mac o Control+F en Windows) para buscar la palabra "newsletter" dentro del archivo de pie de página.
   
7. Dentro del código que hay debajo, busca la referencia al formulario. En el ejemplo, se hace referencia al formulario en una ruta de archivo diferente: {{> components/common/subscription-form}}.
   
8. En la barra lateral izquierda, sigue la ruta del archivo al que se hace referencia en el código (en este ejemplo, selecciona los componentes > common > subscription-form). A partir de aquí verás los componentes reales del formulario por defecto.
   • Como el encabezado y el idioma del formulario por defecto coinciden con el resto de estilos de nuestro sitio, sólo vamos a sustituir la entrada real del formulario. En el código fuente, puedes ver que la entrada del formulario por defecto está contenida en el elemento <form>.
9. Resalta todo lo que hay entre la etiqueta <form> de apertura y la de cierre, y luego pega el código de incrustación que has copiado de Klaviyo para sustituir el texto resaltado. 
   
10. Haz clic en Guardar y aplicar archivo para aplicar estos cambios a tu sitio web.
    • Si el botón sólo dice Guardar archivo, entonces el archivo que acabas de editar todavía no es tu Tema Actual. Tendrás que hacer clic en Guardar archivo, luego desplazarte hacia arriba y seleccionar Editar archivos de tema > Guardar > Usar como tema activo en la esquina superior derecha para aplicar el tema a tu sitio web. 

Una vez que hayas pegado el código de incrustación, guardado y aplicado los cambios en BigCommerce, navega de nuevo a tu sitio web y actualiza la página. Tu formulario de incrustación Klaviyo se mostrará en tu sitio y comenzará a añadir nuevos suscriptores a la lista Klaviyo vinculada al formulario. 

Si no ves tu formulario, consulta la solución de problemas de los formularios incrustados.

Próximos pasos

A continuación, crea una serie de flujo de bienvenida para causar un impacto inmediato en tu nuevo suscriptor.

Recursos adicionales

• Cómo crear una serie de correos electrónicos de bienvenida
• Cómo desactivar los correos electrónicos de notificación enviados por BigCommerce