Resumen
- ¿Cómo funciona?
- Crear un widget
- Vista previa del widget
- Ver el código del widget
- Editar el widget
- Duplicar un widget
- Eliminar un widget
- Resolución de problemas
- Documentos relacionados
¿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.
Crear un widget
En el menú, selecciona Contactos → 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'.
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?
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.
Ahora vamos a pasar por cada seccion.
Parámetros del widget
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.
Campos y mensajes
Campos del widget
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'.
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.
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.
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.
Notificaciones
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.
Diseño del widget
Ahora empieza lo divertido: ¡diseñar tu widget! Nuestro sencillo editor con función arrastrar y soltar te permite personalizar fácilmente:
TEXTO: Haz clic en cualquier parte del texto para editar el aspecto
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 “+”
DISPOSICIÓN: Selecciona una disposición horizontal o vertical para tu widget
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
Botó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
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:
El widget emergente tiene también dos tipos de disposición, ambos horizontales:
Email de confirmació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
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.
Modo Experto (Modo de HTML avanzado)
El modo experto solo se recomienda para usuarios con conocimientos avanzados de HTML, ya que no se proporcionará asistencia para solucionar problemas con el código personalizado. Sin embargo, nuestro equipo de soporte se encargará de cualquier problema relacionado con el sistema de Mailjet.
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:
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.
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.
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.
Haz clic en el mensaje de confirmación que aparece y pasarás a Modo Experto.
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:
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:
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’:
Así quedaría la lista desplegable del widget:
No olvides probar tu nuevo widget en una zona inactiva antes de incorporarlo a tu sitio web.
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:
El primer paso es añadir los campos ‘Boolean’ a tu widget.
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.
Haz clic en el mensaje de confirmación que aparece y pasarás a Modo Experto.
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:
Para añadir una etiqueta de texto junto a una casilla, añade la siguiente etiqueta “label” justo después de la etiqueta “input”:
A continuación, sustituye “Field ID” con el “id” de la etiqueta “input”:
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:
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 dos casillas de selección:
No olvides probar tu nuevo widget en una zona inactiva antes de incorporarlo a tu sitio web.
Resumen del widget
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.
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.
¡Felicidades! Ya has creado tu primer widget.
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.
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
Ingrese el titulo de la página, y copie el codigo de suscripcion del Widget en el campo de ‘Texto’ tab.
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
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.
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.
Copiar el código de HTML de la suscripción widget en la sección “Contenido”. Luego haga clic en “Guardar”.
Y eso es todo! - solo vuelva a su sitio web para ver su widget de suscripción.
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'.
Ver el código del widget
Pasa el ratón por encima de la sección Gestionar y haz clic en el icono .
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.
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 “+”.
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.
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.
Si tienes alguna pregunta sobre cómo utilizar el widget, contacta con nuestro equipo de asistencia.
¡Que tengas muchas suscripciones!