Ir al contenido principal

Configura disparadores personalizados para formularios Popup y Flyout

Aprende a usar disparadores personalizados para tus formularios de registro de Omnisend

Escrito por Ira

Disparadores personalizados en Omnisend te permiten mostrar formularios popup o flyout solo cuando ocurre una acción específica en tu sitio web, como un clic en un botón o un evento personalizado.

En lugar de depender de retrasos de tiempo o profundidad de desplazamiento, controlas el momento exacto en que aparece tu formulario, capturando clientes potenciales en el punto más relevante del viaje del cliente.


Antes de empezar

  • Los disparadores personalizados sustituyen todas las configuraciones de visualización y configuraciones de segmentación. El formulario solo aparecerá cuando tu código personalizado lo active, independientemente del Delay, porcentaje de desplazamiento, intención de salida, segmentación de URL o filtros de Audiencia.

    • Para agregar segmentación condicional (por ejemplo, mostrar solo en páginas específicas o a usuarios registrados), necesitarás JavaScript personalizado de tu parte.

  • Formas soportadas: Formularios Popup y formularios Flyout sin un Teaser.

  • Formas no soportadas: Formularios de Landing y formularios incrustados.

¿Qué es un Trigger Personalizado?

Un Trigger Personalizado muestra un formulario cuando ocurre una acción predefinida en tu sitio, como:

  • Clicks en botones (por ejemplo, “Únete a nuestra lista de correo,” “Obtén descuento”)

  • Eventos de JavaScript personalizados (por ejemplo, finalización de cuestionarios, interacción en juegos)

  • Acciones de cierre del carrito (por ejemplo, mostrar un formulario cuando un cliente cierra el carrito)

Los disparadores personalizados te permiten mostrar formularios en el momento exacto, cuando tu visitante está más comprometido. Ya sea después de un cuestionario, un juego o un clic en un botón, puedes crear experiencias altamente interactivas que se sientan personales y oportunas.

Ejemplo de Código de Trigger Personalizado

window.omnisend = window.omnisend || []; 
window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);

El ID de formulario único (658c3b55768232c9e85d0453 en este ejemplo) se genera automáticamente cuando se crea el formulario en Omnisend. No es necesario reemplazarlo manualmente, ya que cada formulario tendrá su propio identificador único.

Proceso de configuración

Paso 1. Verificar que el fragmento de JavaScript de Omnisend esté instalado

Antes de que los disparadores personalizados funcionen, el fragmento principal de JavaScript de Omnisend debe estar instalado en su sitio web. El código del trigger personalizado depende de este fragmento para cargar y mostrar formularios.

  • BigCommerce & WooCommerce - El fragmento de Omnisend se agrega automáticamente cuando conectas tu tienda. No se necesita configuración manual.

  • Shopify: Ve a Shopify Admin Tienda en líneaTemas → Haga clic Editar tema en tu tema activo → En la barra lateral izquierda, haz clicIncrustaciones de Aplicaciones → Encontrar Omnisend y actívalo ENCENDIDO (azul) → Hacer clic Guardar.

  • Plataformas de Ecommerce Personalizadas: Agrega el Omnisend fragmento de JavaScript manualmente a su sitio web sección o antes del cierre etiqueta. Obtén el fragmento de Configuración de Tienda Integraciones en tu cuenta de Omnisend.

Paso 2. Crea tu formulario

Comienza diseñando tu formulario popup o flyout en Omnisend. Una vez creado, navega a la sección de Configuración de Comportamiento del editor de formularios.

Paso 3. Establecer la Visualización en 'Trigger Personalizado'

En Configuraciones de ComportamientoVisualización, selecciona la opción Trigger Personalizado. Esto significa que el formulario solo aparecerá cuando el trigger personalizado esté activado en tu sitio web.

Nota: Una vez que selecciones Trigger Personalizado, todas las otras opciones de visualización (retraso de tiempo, profundidad de desplazamiento, intención de salida, segmentación de URL, filtros de audiencia) están deshabilitadas.

Paso 4. Copia el Código del Trigger

En la sección Trigger Personalizado, copia el fragmento de código generado por Omnisend.

Código de ejemplo:

window.omnisend = window.omnisend || [];  window.omnisend.push(['openForm', '658c3b55768232c9e85d0453']);

Nota: El ID del formulario (658c3b55768232c9e85d0453) es único para su formulario y se genera automáticamente.

Paso 5. Inserta el Código del Trigger en Tu Sitio Web

Coloca el código en tu sitio web dentro del elemento o evento donde deseas que aparezca el formulario. Esto podría ser un clic en un botón, una carga de página o cualquier otra acción personalizada.

¿Dónde colocar el código?

  • Código de botón o enlace: Agrega donde quieras que aparezca el trigger clicable (encabezado, página de producto, publicación de blog, pie de página).

  • Función de JavaScript (openOmnisendForm()):Agrega una vez por página en una de estas ubicaciones.

    • Archivo de pie de página del tema;

    • widget HTML o bloque HTML personalizado;

    • En línea después del botón (dentro de etiquetas).

Casos de uso para disparadores personalizados en Omnisend

Formularios activados por botón

Dispara un formulario cuando un usuario hace clic en un botón. Útil para:

  • Proceso de suscripción – El botón "Únete a nuestra lista de correo" muestra un formulario de suscripción.

  • Ofertas de descuento – El botón "Obtener descuento" muestra un formulario de promoción con un código de descuento.

  • El contenido se desbloquea – Ofrezca eBooks, seminarios web o artículos exclusivos detrás de un formulario.

Back-in-Stock Notifications

Dispara un formulario cuando los clientes hagan clic en un producto fuera de stock. Esto les permite registrarse para alertas de reposición, capturando clientes potenciales y generando anticipación.

Nota: Necesitas crear el código del botón tú mismo – Omnisend proporciona el código del trigger, no el HTML del botón.

Cuestionarios o Juegos Interactivos

Muestra un formulario después de que un usuario complete un cuestionario o interactúe con un juego. Por ejemplo:

  • Recopilar direcciones de correo electrónico para la entrada del concurso después de una pregunta del cuestionario.

  • Ofrecer descuentos especiales después de la participación en el juego.

Ejemplo: Agregar botón "Suscribirse Ahora" en Shopify

Sigue estos pasos para agregar un botón de Suscribirse Ahora a tu tienda de Shopify que abra un formulario de Omnisend.

⚠️ Si no estás familiarizado con la personalización de temas de Shopify, trabaja con un desarrollador para implementar estos cambios de manera segura.

Paso 1. Accede a Shopify Admin.

Inicia sesión en tu panel de administración de Shopify. En el menú de la izquierda, haz clic en Tienda en líneaTemas.

Paso 2. Edita tu tema.

En la sección de Temas, encuentra tu tema activo, luego haz clic en AccionesEditar Código.

Paso 3. Encuentra la Página o Sección Deseada

  • Decide dónde quieres colocar el botón. Esto podría estar en tu página de inicio, una página de producto específica o el pie de página.

  • Busca el archivo Liquid correspondiente. Las opciones comunes incluyen:

    • index.liquid para la página de inicio.

    • product.liquid para páginas de producto.

    • footer.liquid para añadirlo al pie de página del sitio.

Paso 4. Inserte el código del botón

  • Dentro del archivo Liquid que has elegido, encuentra el lugar exacto donde deseas agregar el botón. Por ejemplo, en el index.liquid o en el product.liquid archivo.

  • Copia y pega el código proporcionado por Omnisend en tu formulario emergente/desplegable.

  • Esto creará un botón de 'Suscribirse Ahora' que abre el formulario de Omnisend al hacer clic.

Nota: Necesitas crear el código del botón tú mismo – Omnisend proporciona el código del trigger, no el HTML del botón.

Paso 5. Guarda tus cambios y prueba el botón

  • Una vez que se inserte el código, haga clic en Guardar en la esquina superior derecha del editor.

  • Visita tu tienda de Shopify y ve a la página donde agregaste el botón.

  • Haz clic en el botón 'Suscribirse Ahora' para asegurarte de que se abra el formulario de Omnisend.

Pruebas y Solución de Problemas

  • Prueba el Trigger del Formulario. Después de incrustar el código, visita tu tienda y realiza la acción del trigger (por ejemplo, haz clic en el botón) para asegurarte de que el formulario se muestre correctamente.

  • Verificar los registros de la consola – Si el formulario no aparece, abre la consola de tu navegador (clic derecho → Inspeccionar) y verifica si hay errores.

    • Si ves omnisend is not defined, verifica que el fragmento de JavaScript de Omnisend esté instalado (Paso 1).

    • Si ves openForm is not a function, verifica que el ID del formulario sea correcto y que el formulario esté publicado.

Preguntas Frecuentes

¿Por qué no aparece mi formulario de trigger personalizado después de agregar el código?

Primero, verifica que:

  1. Tu formulario está Habilitado en Omnisend (Formularios → Seleccionar formulario → Alternar Habilitar).

  2. El fragmento de JavaScript de Omnisend está instalado en tu sitio (para Shopify, habilita la integración de la aplicación Omnisend en Temas → Integraciones de Aplicaciones).

  3. Pegaste el código en una etiqueta o en un controlador onclick, no en el campo de URL de un botón.

  4. Prueba en una ventana de incógnito para descartar bloqueadores de caché del navegador o de consentimiento de cookies.


El formulario funcionaba antes, pero ahora dejó de aparecer. ¿Qué pasó?

Si tu trigger personalizado estaba funcionando y de repente dejó de hacerlo, verifica:

  1. Bloqueadores de consentimiento de cookies: Si recientemente añadiste un banner de consentimiento de cookies, puede bloquear el script de Omnisend hasta que los visitantes acepten las cookies. Prueba en modo incógnito después de aceptar todas las cookies.

  2. Estado del formulario: Verifica que el formulario siga Habilitado en Omnisend (Formularios → Tu formulario → Verifica el interruptor en la parte superior)

  3. Actualizaciones de tema: Si actualizaste tu tema de Shopify, el código puede haber sido eliminado. Vuelve a agregarlo a los archivos de tu tema.

  4. Errores en la consola del navegador: Haz clic derecho → Inspeccionar y verifica la pestaña de Consola en busca de errores de JavaScript que puedan estar bloqueando el formulario.


Si encuentras algún desafío con esta o cualquier otra función de Omnisend, no dudes en contactarnos en [email protected] o a través del chat en la aplicación. ¡Estamos aquí 24/7 para ti!

¿Ha quedado contestada tu pregunta?