Cómo añadir un formulario incrustado de Klaviyo a tu sitio de BigCommerce
Objetivos del artículo
Aprende cómo agregar un formulario insertado de Klaviyo a tu sitio de BigCommerce, lo cual requiere crear el formulario en Klaviyo y, luego, pegar su código de inserción en los archivos del sitio donde quieras que aparezca (p. ej., el pie de página).
Esta guía muestra cómo reemplazar el formulario de registro predeterminado de BigCommerce por un formulario incrustado de Klaviyo.
Antes de empezar
Antes de crear un formulario insertado en Klaviyo, primero debes integrar BigCommerce y luego habilitar la funcionalidad de formularios de registro (también llamada "seguimiento en el sitio"). Si activaste la configuración Agregar automáticamente JavaScript en el sitio de Klaviyo al integrar con BigCommerce, ya está todo listo.
Si no:
- En Klaviyo, selecciona la pestaña Integraciones.
- Haz clic en BigCommerce.
- Marca la opción Agregar automáticamente JavaScript en el sitio de Klaviyo.
- Haz clic en Guardar.
El ejemplo de este artículo usa el tema Cornerstone predeterminado de BigCommerce. Ten en cuenta que tu tema puede ser diferente, al igual que los nombres de algunos archivos o las ubicaciones de fragmentos de código.
Agregar el código de incrustación del formulario a tu sitio
Primero, crea y publica un formulario incrustado en Klaviyo. En esta sección se explicarán los siguientes pasos para pegar el código de incrustación del 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 del formulario incrustado. Puedes acceder al código de inserción del formulario abriendo el formulario en el editor y haciendo clic en la sección Segmentación y comportamiento.
- Ve a tu sitio web y ubica el formulario de registro predeterminado de BigCommerce. Si usas un tema Cornerstone, está en el pie de página del sitio.
- Si no ves un formulario predeterminado en el sitio web:
- Abre el panel de BigCommerce.
- Ve a Marketing > marketing por correo electrónico
- Marca la casilla Permitir suscripciones al boletín informativo. Esto te permite recopilar el consentimiento por correo electrónico de los visitantes de tu sitio web y también agrega una casilla predeterminada de registro por correo electrónico en tu sitio de BigCommerce. Si esta casilla ya está marcada y aun así no ves un formulario predeterminado, es posible que tu tema no incluya uno.
- Abre el panel de BigCommerce y luego ve a Storefront > Themes.
- En la sección Tema actual, haz clic en el menú desplegable Avanzado y luego selecciona Editar archivos del tema.
- Si usas un tema predeterminado, no podrás seleccionar esta opción. En cambio:
- Haz clic en Crear una copia, ponle un nombre y selecciona Guardar una copia.
- Una vez que se agregue a la sección Themes, selecciona los 3 puntos y luego elige Editar archivos del tema. Ten en cuenta que cualquier edición que hagas solo se aplicará al tema que estás editando, y tendrás que aplicar el tema a tu sitio web para ver los cambios reflejados.
- En la barra lateral izquierda, abre el archivo correspondiente a donde apareció el formulario predeterminado en el sitio. Si el formulario predeterminado estaba en el pie de página, como en el ejemplo, ve a plantillas > componentes > common y haz clic en el archivo footer.html.
- Usa el atajo de búsqueda (Command+F en Mac o Control+F en Windows) para buscar la palabra “newsletter” dentro del archivo del pie de página.
- Dentro del código 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 a la que se hace referencia en el código (en este ejemplo, selecciona components > common > subscription-form). A partir de aquí, verás los componentes reales del formulario predeterminado.
- Dado que el encabezado y el idioma del formulario predeterminado coinciden con los estilos del resto del sitio, solo vamos a reemplazar el campo de entrada del formulario. En el código fuente, puedes ver que la entrada del formulario predeterminado está contenida en el elemento <form>.
- Resalta todo entre las etiquetas <form> de apertura y cierre, y luego pega el código de inserción que copiaste de Klaviyo para reemplazar el texto resaltado.
- Haz clic en Guardar y aplicar archivo para aplicar estos cambios a tu sitio web.
- Si el botón solo dice Guardar archivo, entonces el archivo que acabas de editar aún no es el Tema actual. Tendrás que hacer clic en Guardar archivo, luego desplazarte hacia arriba y seleccionar Editar archivos del tema > Guardar > Usar como tema activo en la esquina superior derecha para aplicar el tema al sitio web.
Una vez que hayas pegado el código de incrustación, guardado y aplicado los cambios en BigCommerce, vuelve a tu sitio web y actualiza la página. El formulario incrustado de Klaviyo se mostrará en tu sitio y comenzará a agregar nuevos suscriptores a la lista de Klaviyo vinculada al formulario.
Si no ves tu formulario, consulta solución de problemas de formularios incrustados.
Siguientes pasos
A continuación, crea un flujo de serie de bienvenida para generar un impacto inmediato en los nuevos suscriptores.
Recursos adicionales
- How to create an email welcome series
Learn how to create a sequence of emails sent directly after someone subscribes to hear from your brand. This is a critical moment in the customer lifecycle because it's your opportunity to introduce new, interested prospects to your business and product offering. With a welcome series, you should capitalize on this display of interest.
- How to disable notification emails sent by BigCommerce
Learn how to disable different types of notification emails sent by BigCommerce. If you are currently sending certain emails with BigCommerce - such as abandoned cart or order status emails - and plan to start sending them via Klaviyo, you will need to disable these emails in BigCommerce to avoid sending them twice.