1. Mailjet
  2. Ayuda
  3. Documentación

Widget de suscripción

Resumen

¿Cómo funciona?

El widget de suscripción de Mailjet está compuesto por un formulario de suscripción, un email de confirmación y una página de confirmación. Cuando alguien se suscribe en tu sitio web, recibe un email de confirmación con un enlace a la página de confirmación. Una vez confirmada la suscripción, su dirección de email y otros datos recopilados mediante el formulario de suscripción se añadirán a tu lista de contactos.

¿Lo mejor de todo? Solo tienes que diseñar y personalizar el formulario, el email y la página en el creador de widgets. Mailjet generará el código del formulario de suscripción y se encargará del flujo de trabajo.

¿Esta su pagina en funcionamiento con WordPress? Quizas quiera chequear Mailjet’s WordPress Plugin que le permitira crear un formulario de subscripcion, organizar sus contactos, crear emails and ver estadisticas en tiempo real directamente desde su administrador WordPress.

Widget de suscripción

Crear un widget

Ve a la página Contactos y haz clic en el enlace 'Widget de suscripción'.

Widget de suscripción

Llegarás a la página de gestión de widgets, donde aparecerá una lista con todos los widgets que has creado.

Ahora haz clic en el botón 'Crear un widget nuevo'.

Widget de suscripción

El primer paso es decidir qué tipo de widget te gustaría crear:

¿Prefieres un formulario de suscripción incrustado directamente en tu sitio web o mejor un formulario que se abra en una ventana emergente al hacer clic en un botón o en un enlace?

Widget de suscripción

En este ejemplo, seleccionaremos un widget emergente.

La página para crear un widget consta de tres partes principales:

  • los parámetros del widget;
  • los campos que tus suscriptores deberán completar;
  • y el editor de diseño de widgets.

Widget de suscripción

Ahora vamos a pasar por cada seccion.

Parámetros del widget

Widget de suscripción

En esta sección, deberás introducir:

  • Nombre del widget
    Escribe el nombre de tu widget (es un nombre interno que solo tú podrás ver).
  • Lista de contactos
    Selecciona la lista de contactos a la que se añadirán los nuevos suscriptores.
  • Idioma
    Puedes crear tu widget en un idioma diferente.
  • Crear un botón para abrir el widget (por defecto)
    Utiliza el diseñador de widgets para personalizar el botón de suscripción y generar el código HTML automáticamente. De lo contrario, si desmarcas esta opción, tendrás que generar el código HTML para abrir el widget emergente.
  • Página de confirmación
    Cuando alguien se suscriba en tu widget, recibirá un email de confirmación con un enlace para validar (confirmar) su suscripción. Por defecto, este enlace remite a la Página de confirmación interna que puedes diseñar con el editor de widgets. Si prefieres crear tu propia página de confirmación en tu sitio web, puedes introducir la URL de tu página de confirmación externa.

[arriba]

Campos y mensajes
Campos del widget

Widget de suscripción

Los campos del widget están vinculados a tus propiedades de contactos personalizadas. Puedes añadir hasta 10 campos a tu formulario de suscripción para recopilar datos adicionales como el nombre, la ubicación o el sexo del suscriptor. Para consultar tus propiedades de contactos actuales, ve a tu página de 'Contactos' y haz clic en ‘Propiedades de contactos’.

Añadir un campo
Selecciona el campo que quieras añadir de la lista desplegable y haz clic en 'Añadir campo'.

Widget de suscripción

Editar nombre del campo
El nombre del campo es lo que aparecerá en el formulario de suscripción. Puedes editar el nombre del campo escribiendo en el recuadro del campo correspondiente.

Establecer un campo obligatorio
Marca la casilla 'Obligatorio' situada junto al nombre del campo.

Widget de suscripción

Ordenar los campos
Es el orden en el que aparecerán los campos en el formulario de suscripción. Puedes mover un campo haciendo clic en el icono con tres barras y arrastrándolo a su nueva ubicación.

Widget de suscripción

Eliminar un campo
Para eliminar un campo del formulario de suscripción, haz clic ‘x’.

Recoge el consentimiento explícito de tus suscriptores para cumplir con el RGPD

Incluye una casilla de consentimiento en el widget que los usuarios deben marcar para apuntarse a tu newsletter.

Cuando un usuario se suscribe a tu newsletter, la información de consentimiento que incluye el nombre del widget y el texto de la casilla de suscripción será añadida a su perfil de contacto.

Widget de suscripción

[arriba]

Notificaciones

Widget de suscripción

Puedes activar mensajes de notificaciones personalizados que aparecerán en las siguientes situaciones cuando una persona haga clic en el botón de suscripción de tu formulario de suscripción:

  • Suscripción realizada correctamente: aparece cuando una persona envía correctamente el formulario en tu sitio web. Recuerda que la persona debe hacer clic en el email de confirmación para poder incluirla en tu lista de contactos.
  • Error en la suscripción: aparece cuando una persona ya está suscrita a tu lista de contactos.
  • IP en lista negra: Mailjet limita el número de suscriptores por dirección IP para evitar el spam en tu lista. Este mensaje aparecerá cuando se alcance dicho límite.

Para activar estos mensajes, marca la casilla correspondiente y añade tu mensaje personalizado.

Widget de suscripción

Diseño del widget

Widget de suscripción

Ahora empieza lo divertido: ¡diseñar tu widget! Nuestro sencillo editor con función arrastrar y soltar te permite personalizar fácilmente:

Widget de suscripción


TEXTO: Haz clic en cualquier parte del texto para editar el aspecto

Widget de suscripción

COLOR: Elige un color de la barra de herramientas y arrástralo a un elemento. Puedes añadir nuevos colores a la barra de herramientas haciendo clic en “+”

Widget de suscripción

Widget de suscripción


DISPOSICIÓN: Selecciona una disposición horizontal o vertical para tu widget

Widget de suscripción


MODO EXPERTO: Utiliza HTML para personalizar tu widget en lugar de la interfaz de arrastrar y soltar. Recuerda que, una vez que pases a Modo Experto, no podrás deshacerlo

[arriba]

Botón

Widget de suscripción

La opción Botón solo está disponible para los widgets emergentes. El botón aparecerá en tu sitio web y, al hacer clic en él, se abrirá el formulario de suscripción.

Para el botón, puedes:

  • Editar y dar formato al texto del botón
  • Elegir el color de fondo
  • Redondear (radio) los bordes del botón (0 = bordes cuadrados)

Formulario

Widget de suscripción

Diseña tu formulario de suscripción para que se ajuste a tu sitio web cambiando los colores de cada sección del formulario (texto, botón, fondo) y personaliza la fuente.

Puedes configurar la disposición del formulario de tu widget incrustado:

Widget de suscripción

El widget emergente tiene también dos tipos de disposición, ambos horizontales:

Widget de suscripción

[arriba]

Email de confirmación

Widget de suscripción

Puedes personalizar el email que se enviará a tus nuevos suscriptores para que validen su suscripción a tu boletín de noticias. Este email incluirá un botón con el enlace que remitirá a la página de confirmación.

Puedes editar el encabezado y el texto del cuerpo del mensaje. Recuerda que el mensaje solo debe utilizarse para validar la suscripción: debe ser claro y conciso para que no sea demasiado engorroso para tus suscriptores.

Página de confirmación

Widget de suscripción

El email de confirmación enviado a los nuevos suscriptores contendrá un enlace a la página de confirmación. Si has seleccionado la opción 'Utilizar página de confirmación interna' en la sección Parámetros del widget, puedes usar el editor con función arrastrar y soltar para:

  • Personalizar el color del encabezado, del fondo y del texto
  • Editar el encabezado de la página y el texto principal para comunicar al nuevo suscriptor que su confirmación se ha realizado correctamente

Una vez que hayas personalizado cada elemento, haz clic en el botón 'Siguiente' para continuar.

[arriba]

Modo Experto (Modo de HTML avanzado)

Solo se recomienda el Modo Experto para usuarios que sepan programar en HTML.

Con el Modo Experto podrás ver y editar el código HTML del widget y añadir elementos avanzados al formulario como listas desplegables, botones de opciones y casillas de selección. El Modo Experto no dispone de interfaz de arrastrar y soltar. El editor de widgets son ventanas de HTML:

Subscription Widget

Para pasar al Modo Experto, haz clic en el botón < / > en la barra de herramientas de diseño. Recuerda que una vez que cambies al Modo Experto no podrás volver a la interfaz de arrastrar y soltar.

Subscription Widget

Crear una lista desplegable

Esta es una opción avanzada para los usuarios que sepan programar en HTML.

Añade una lista desplegable a tu widget con el Modo Experto y código HTML.

En primer lugar, añade un campo de tipo ‘String’ que se utilizará como lista desplegable.

Widget de suscripción

Diseña y personaliza todos los elementos del widget (botón, formulario, email y página de confirmación) con el editor de widgets.

Cuando hayas terminado, haz clic en el botón Modo Experto. Recuerda que una vez que pases a Modo Experto no podrás volver a la interfaz de arrastrar y soltar.

Widget de suscripción

Haz clic en el mensaje de confirmación que aparece y pasarás a Modo Experto.

Widget de suscripción

En la ventana de código HTML, localiza la propiedad de contacto que se usará como lista desplegable para realizar cambios en el código:

Widget de suscripción

Primero, cambia la etiqueta “input” a “select”:


   <input id="w-preview-fields-content-cell-field-46229" type="text" ...

   Pasa a ser:
                     
   <select id="w-preview-fields-content-cell-field-46229" type="text" ...

Después añade el siguiente código para crear las opciones que aparecerán en la lista:

Widget de suscripción

Breve explicación del código anterior:

  • Cada línea “option” crea una entrada en la lista desplegable.
  • Entre las etiquetas “option” se encuentra el texto que aparecerá en la lista desplegable.
  • La primera opción –“Encabezado de la lista desplegable”– es una selección inactiva y proporciona información al usuario sobre la lista.
  • (opcional) El parámetro “value” se transmite al servidor de Mailjet si el suscriptor elige esa opción.

Atención, no cambies los valores "id" o "name" dentro de la etiqueta "select" o cualquier otra etiqueta del código HTML. Cualquier modificación de estos valores impedirá que tu widget transmita información del suscriptor a Mailjet. En cambio, sí puedes modificar las partes CSS del código.

Ejemplo de código para una lista desplegable de ‘rango de edad’:

Widget de suscripción

Así quedaría la lista desplegable del widget:

Widget de suscripción

No olvides probar tu nuevo widget en una zona inactiva antes de incorporarlo a tu sitio web.

[arriba]

Crear una casilla de selección

Esta es una opción avanzada para los usuarios que sepan programar en HTML.

Puedes añadir casillas de selección a tu widget con el Modo Experto. Para cada casilla que quieras incluir en tu widget, deberás añadir una propiedad de contacto de tipo ‘Boolean’.

En este ejemplo, crearemos un widget con dos casillas para elegir un tipo de boletín:

Widget de suscripción

El primer paso es añadir los campos ‘Boolean’ a tu widget.

Widget de suscripción

Diseña y personaliza todos los elementos del widget (botón, formulario, email y página de confirmación) con el editor de widgets. Cuando hayas terminado, haz clic en el botón Modo Experto.

Widget de suscripción

Recuerda que una vez que pases a Modo Experto no podrás volver a la interfaz de arrastrar y soltar.

Haz clic en el mensaje de confirmación que aparece y pasarás a Modo Experto.

Widget de suscripción

En la ventana de código HTML, localiza los campos booleanos que se usarán como casillas y realiza los siguientes cambios:

En primer lugar, cambia el tipo de entrada de “text” a “checkbox” y añade el atributo: value=”true”

   <input id="w-preview-fields-content-cell-field-46167" type="text" ...
   Pasa a ser:  
   <input id="w-preview-fields-content-cell-field-46167" type="checkbox" value=”true” ...

Luego, duplica la línea de código y cambia el tipo (type) a "hidden" y el valor (value) a "false", cómo se muestra a continuación:

Widget de suscripción

Para añadir una etiqueta de texto junto a una casilla, añade la siguiente etiqueta “label” justo después de la etiqueta “input”:

Widget de suscripción

A continuación, sustituye “Field ID” con el “id” de la etiqueta “input”:

Widget de suscripción

Para cambiar el aspecto de la casilla, edita el atributo “style” en la etiqueta “input”. En este ejemplo, se ha eliminado por completo el atributo “style” para mostrar el estilo de casilla (pequeño) predeterminado:

Widget de suscripción

No cambies los valores “id” o “name” dentro de la etiqueta “select” o cualquier otra etiqueta del código HTML. Cualquier modificación de estos valores impedirá que tu widget transmita información del suscriptor a Mailjet. En cambio, sí puedes modificar las partes CSS del código.

Widget de suscripción

Ejemplo de código para dos casillas de selección:

Widget de suscripción

No olvides probar tu nuevo widget en una zona inactiva antes de incorporarlo a tu sitio web.

Resumen del widget

Widget de suscripción

En la parte superior de la página ‘Resumen del widget’ puedes revisar los parámetros de tu widget (nombre, lista de contactos, idioma). Para hacer cambios de última hora, haz clic en el botón ‘Editar parámetros’.

En la sección Información del email de confirmación, debes introducir el nombre del remitente y el asunto del email, que deberá especificar claramente que se trata de un email de confirmación.

Widget de suscripción

También puedes obtener una vista previa de la Página de confirmación y del Email de confirmación en una ventana aparte.

Cuando todo esté listo, haz clic en el botón ‘Guardar widget’ en la esquina inferior derecha.

Widget de suscripción

¡Felicidades! Ya has creado tu primer widget.

Widget de suscripción

El último paso es incorporar el código HTML del widget en tu sitio web, como se muestra en la ventana anterior. El código contiene el botón de suscripción para abrir el widget emergente. Basta con copiar y pegar el código en tu sitio web.

Recuerda: el widget emergente también puede abrirse a través de un hipervínculo, una imagen o cualquier elemento de HTML que pueda lanzar una función JavaScript. La segunda ventana más pequeña muestra un ejemplo de código para un hipervínculo.

[arriba]

Integrando con WordPress

Usted puede agregar el código HTML de la suscripción Widget directamente dentro de un post, pagina o agregarlo via un Widget de WordPress.

En el siguiente ejemplo, crearemos una nueva página y agregaremos el formulario de suscripción.

Desde el Menu, Seleccione Páginas → Añadir nueva

Widget de suscripción

Ingrese el titulo de la página, y copie el codigo de suscripcion del Widget en el campo de ‘Texto’ tab.

Widget de suscripción

Clic en ‘Publicar’ y Listo! - Su Widget de suscripción aparecerá en la nueva página.

Su formulario de suscripcion tambien podra ser agregado a la barra lateral de su página web por medio de los widgets de WordPress.

En el Menu principal, Vaya a Apariencia → Widgets

Widget de suscripción

En la página Widget, a la izquierda, usted verá la lista de widgets disponibles (archivos, calendario, menú, etc). Las secciones a la derecha son las localizaciones disponibles para los widgets. Cada Tema de WordPress tiene un número diferente de localizaciones, y en este caso, hay solamente dos disponibles: Zona principal de Widgets y Zona secundaria de Widgets.

Widget de suscripción

Para ver su formulario de suscripción, necesitamos agregar el Texto widget. Hacer clic en el nombre del ‘Texto’ widget, y seleccionar la posición deseada.

Widget de suscripción

Copiar el código de HTML de la suscripción widget en la sección “Contenido”. Luego haga clic en “Guardar”.

Widget de suscripción

Y eso es todo! - solo vuelva a su sitio web para ver su widget de suscripción.

[arriba]

Vista previa del widget

Para ver rápidamente tu formulario de suscripción, pasa el ratón por encima de la sección Gestionar y haz clic en el icono del 'ojo'.

Widget de suscripción

Ver el código del widget

Pasa el ratón por encima de la sección Gestionar y haz clic en el icono .

Widget de suscripción

[arriba]

Editar el widget

Para editar un widget existente, pasa el ratón por encima de la sección Gestionar y haz clic en el icono del lápiz.

Widget de suscripción

Duplicar un widget

Desde la página de gestión de widgets, pasa el ratón por encima de la sección Gestionary haz clic en el icono “+”.

Widget de suscripción

Podrás editar el widget duplicado de la manera habitual.

Eliminar un widget

Para eliminar un widget, pasa el ratón por encima de la sección ‘Gestionar’ y haz clic en el icono de la papelera.

Widget de suscripción

Resolución de problemas

Si has incorporado un widget a tu sitio web y de pronto deja de funcionar, comprueba que no has cambiado o eliminado la lista de contactos asociada al widget

[arriba]

Si tienes alguna pregunta sobre cómo utilizar el widget, contacta con nuestro equipo de asistencia.

¡Que tengas muchas suscripciones!

¿Quiere probar Mailjet ahora?
Abrir una cuenta - sin compromiso ni tarifas ocultas