Cómo añadir un formulario incrustado de Klaviyo a tu sitio BigCommerce
Aprox. 4 min. de lectura
|
Actualizado el 7 ago 2025, 12:00 a.m. EST
Objetivos de aprendizaje
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 incrustado en Klaviyo, primero debes integrarte con BigCommerce y, a continuación, activar 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í:
- En Klaviyo, selecciona la pestaña integraciones.
- Haz clic en BigCommerce.
- Marca la opción Añadir automáticamente el javascript de Klaviyo en el sitio web.
- Haz clic en 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.
- 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 & .
- 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.
- Navega hasta Marketing > marketing por correo electrónico
- Marca la casilla Permitir suscripciones al boletín. Esto te permite 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.
- Abre tu panel de control de BigCommerce y ve a Storefront > Temas.
- 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.
- 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 de página.html.
- Utiliza el atajo de búsqueda (Comando+F en Mac o Control+F en Windows) para buscar la palabra "boletín" dentro del archivo de pie de página.
- 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}}.
- 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 predeterminado 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>.
- Resalta todo lo que hay entre la apertura y el cierre del <form> formulario <> etiqueta, y luego pega el código de incrustación que has copiado de Klaviyo para sustituir el texto resaltado.
- 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 con actividad Tema 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.
Siguientes 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
Aprende a crear una secuencia de correos electrónicos enviados directamente después de que alguien se suscriba para recibir noticias de tu marca. Se trata de un momento crítico en el ciclo de vida del cliente, porque es tu oportunidad de presentar tu empresa y tu oferta de productos a nuevos clientes potenciales interesados. Con una serie de bienvenida, debes aprovechar esta muestra de interés.
- Cómo desactivar/inhabilitar la notificación de correo electrónico enviada por BigCommerce
Aprende a desactivar/inhabilitar diferentes tipos de notificaciones de correo electrónico enviadas por BigCommerce. Si actualmente estás enviando determinados correos electrónicos con BigCommerce -como carrito abandonado o estado del pedido correo electrónico- y plan vas a empezar a enviarlos a través de Klaviyo, tendrás que desactivar/inhabilitar estos correos electrónicos en BigCommerce para evitar enviarlos dos veces.
¿Te resultó útil este artículo?
Usa este formulario solo para enviar comentarios sobre el artículo. Más información sobre cómo contactar al equipo de asistencia.