¿Qué vamos a hacer?
Crear un contenido de tipo "Full Screen" con un formulario y mostrarlo, mediante un workflow, a todos los contactos que nos visiten que no tienen email.
Este será el resultado:
Si quieres más información sobre contenido web de tipo "Full Screen" haz click aquí.
Crear contenido web de tipo "Full Screen" o pantalla completa.
Para crear un contenido de tipo "Full Screen" debemos ir al área "Web" , clicar sobre "Crear nuevo contenido" y seleccionar "Full Screen".
Estructura y elementos del "Full Screen".
En este caso de uso vamos a utilizar un elemento de tipo "Texto" para el claim principal, y para el formulario un campo de tipo "email", otro de tipo "texto" y el botón de envío.
Lo primero es crear la estructura, para ello arrastraremos desde disposición 4 bloques de "1.col". y a continuación los elementos que necesitamos.
Teniendo la estructura definida, vamos a dar estilo a cada uno de los elementos. Pero antes, vamos a definir el color y la transparencia del fondo del "Full Screen".
En la pestaña "General", en "Colores" definiremos el color de fondo, en nuestro ejemplo: rgba(102, 81, 238, 0.82)".
Editamos el bloque texto, haciendo doble clic, e insertamos el copy del elemento principal del "Full Screen": "¿QUIERES UN DTO DEL 10%".
Indicamos en el editor, seleccionando el texto, "Negrita", elemento centrado, tipografía "Verdana", tamaño 36 y color blanco.
Ahora editamos los elementos del formulario:
Campo Texto:
Eliminamos la etiqueta e indicamos "Nombre:" en el campo "Placeholder" y "Tu nombre" en el "Texto de ayuda."
Ahora editamos el "Margen Interno" y "Márgenes internos" tal y como aparecen en la siguiente captura:
Elemento email:
Eliminamos la etiqueta e indicamos "eMail:" en el campo "Placeholder" y "Tu eMail" en el "Texto de ayuda."
Editamos a continuación los márgenes tal y como aparecen en la captura:
Botón enviar:
En el texto del botón introducimos "Enviar" e indicamos el tamaño del texto en 18pt. Copiamos el mismo contenido para el "Texto de ayuda".
En "Disposición", indicamos los mismos parámetros que aparecen en la captura:
Finalmente vamos a cambiar el color del botón y las esquinas. Para ello editamos el campo "Color del botón" e introducimos "rgba(235, 221, 94, 1)". Modificamos también, en "Bordes y esquinas", las esquinas del botón indicamos 10px.
Con esto ya tenemos listo lo que es la parte visual del "Full Screen", pero falta indicar qué tipo de formulario es el que acabamos de crear.
Preparando el Formulario.
Para ello, hemos de ir a la pestaña de formulario y configurar el comportamiento. En nuestro ejemplo, el objetivo es la captación del email del contacto y para ello, el tipo de formulario ha de ser de tipo "Alta", ya que de lo contrario, al realizarse el envío, Connectif no asociará el email al contacto.
Una vez finalizada la configuración del formulario, guardamos y este sería el aspecto si previsualizamos.
Más información sobre los formularios aquí
Crear Workflow para mostrar el contenido "Full Screen".
Una vez tenemos preparado el contenido, tan solo queda crear el workflow para mostrarlo a los contactos que nos visitan anónimos. Además, vamos a limitar la frecuencia en la que se muestra dicho contenido para no ser intrusivos.
Para ello creamos un nuevo workflow desde "Workflows" >"Crear nuevo workflow" y a continuación "Crear workflow en blanco".
Lo primero será modificar el nombre del workflow y añadir una descripción del mismo.
Además, es recomendable utilizar etiquetas para la organización de los workflows. En este caso indicamos el objetivo, captación, y el tipo de contenido utilizado, "Full Screen".
Este sería el workflow resultante:
Nodo "Inicio":
En este nodo hemos de indicar el target principal del workflow. En nuestro caso será "Contactos sin email" y "Todos los existentes y los nuevos.". De esta manera nos aseguramos que tanto a los contacto anónimos que ya nos hayan visitado como a los nuevos, impactará las acciones que a continuación del "Inicio".
Nodo "Al Visitar Página":
Ahora añadimos el nodo de tipo "Disparador" "Al Visitar página", que será el encargado de detectar la visita del contacto a la página.
En la configuración del nodo, haciendo clic sobre la tuerca, podremos controlar diferentes casos de uso del nodo, ya que nos va a permitir indicar si queremos que se ejecute:
- Al visitar cualquier página.
- Cualquier página que comience por
- Cualquiera de las siguientes páginas exactamente.
- Sólo páginas con categorías.
- Sólo páginas con etiquetas.
También podremos excluir e incluso indicar el tipo de dispositivo.
En nuestro ejemplo seleccionaremos "Cualquier página".
En la pestaña de "Limitaciones", vamos a seleccionar "Desactivar temporalmente tras evento" e indicamos 1 día. Así, en caso de que el contacto no envíe el formulario, deberán pasar 24h hasta que se le vuelva a mostrar de nuevo el "Full Screen". En caso de que envíe el formulario, el contacto ya no estará dentro de nuestro target "Contactos sin email" y por lo tanto no se le mostrará el contenido.
Nodo "Mostrar Contenido Web Full Screen":
Añadimos el nodo de tipo "Acción" "Enviar contenido web".
Y seleccionamos el contenido que hemos creado "Fullscreen.
Haciendo clic sobre el botón "Siguiente, se nos mostrarán las diferentes opciones de cómo mostrar el contenido. Así, podremos indicar:
- Inmediatamente
- Al abandonar la página (solo desktop)
- Al hacer scroll
- Tras unos segundos
- Tras unos segundos de inactividad
En nuestro ejemplo, seleccionamos "Tras unos segundos" e indicamos 2s.
En la pestaña de limitaciones, deseleccionamos la opción "Límite por contacto" que viene por defecto, ya que queremos que en caso de que no envíe el formulario y pasadas 24h se le vuelva a mostrar el "Full Screen".
Hacemos clic en siguiente y "Finalizar".
Lo único que queda es activar el workflow. Para ellos, simplemente tenemos que hacer clic en "Iniciar" y se nos presentará las diferentes opciones de inicio y finalización.
A partir de este caso de uso puedes crear workflows más complejos basándote en el comportamiento del contacto, por ejemplo al visitar un determinado producto o marca.