Mostrar una floating bar en la web

En este artículo te enseñaremos a crear un contenido web de tipo "Floating Bar" y a construir el workflow para mostrarlo a tus contactos.

 Una "Floating bar" (barra flotante) es un tipo de contenido web que se mostrará en la parte superior o inferior de tu página, ocupando el ancho completo de la misma. Además, una "Floating Bar" se quedará siempre fija en la misma posición, independientemente de que los usuarios naveguen hacia abajo o hacia arriba en la página.

caso-de-uso---floating-bar.gif

Puedes encontrar más información sobre este tipo de contenido web aquí.

 

Imaginemos que queremos mostrar a nuestros contactos este tipo de contenido para intentar que visiten una landing page donde aparecen las mejores ofertas de una campaña que acabamos de lanzar en nuestra página web, por ejemplo, la campaña "Rebajas de verano 2020". 

 

Cómo crear un contenido web de tipo "Floating Bar"

En la barra lateral de Connectif, selecciona "Contenidos" y, a continuación, haz clic en el apartado "Web" para ir a la ventana de creación de contenido web:

Crea_un_contenido_web_de_tipo_Popup_-_1.png

 

Pulsamos "CREAR NUEVO CONTENIDO WEB" y elegimos el tipo "Floating Bar". Podemos cambiar el nombre si lo deseamos, nosotros vamos a poner el nombre "Rebajas de verano 2020":

 Crea_un_contenido_web_de_tipo_Floating_bar_-_1.png

 

Nosotros queremos mostrar una "Floating Bar" sencillo, con un texto que llame la atención de nuestros contactos y, si es posible, consiga que hagan clic para que visiten nuestra página de ofertas. Arrastramos un componente de tipo "Texto" a nuestro contenido:

Crea_un_contenido_web_de_tipo_Floating_bar_-_2.png

 

En la pestaña "GENERAL" vamos a cambiar el color de fondo para que resulte más llamativo y también vamos a elegir la posición de nuestro contenido web. En este caso lo vamos  situar en la parte inferior de la página, para que no tape el menú superior de nuestra web:

Crea_un_contenido_web_de_tipo_Floating_bar_-_3.png

 

Una vez definido el color de fondo y la posición de la "Floating Bar" vamos a configurar nuestro texto. Hacemos doble click en el componente "Texto" de nuestro contenido y se nos abre el editor. Escribimos el texto que queramos. Nosotros hemos elegido "Rebajas de Verano 2020 - Hasta el 50% de dto- ¡Haz clic para ver nuestras ofertas!". Además, queremos que la gente vaya a la página de ofertas al hacer clic en "¡Haz clic para ver nuestras ofertas!" por lo que seleccionamos ese texto en el editor y le añadimos el enlace:

Crea_un_contenido_web_de_tipo_Floating_bar_-_4.png

Crea_un_contenido_web_de_tipo_Floating_bar_-_5.png

 

También vamos a cambiar el color del texto para ponerlo de color blanco:

Crea_un_contenido_web_de_tipo_Floating_bar_-_14.png

 

Además, editamos los márgenes internos del texto para que nuestro contenido web se vea centrado en nuestra página (esta parte puede requerir retoques cuando el contenido esté desplegado en nuestra web):

Crea_un_contenido_web_de_tipo_Floating_bar_-_6.png

 

Este es el resultado final tal como se muestra en previsualizador de Connectif:

Crea_un_contenido_web_de_tipo_Floating_bar_-_7.png

Nota: es habitual que un contenido web no se vea exactamente igual en el previsualizador de Connectif que en tu página, ya que tu web tendrá definidos estilos propios que pueden modificar los estilos del contenido web. Por esta razón se recomienda siempre hacer pruebas en entorno real antes de desplegar un contenido para todos tus contactos.

 

Solo nos falta crear un workflow para configurar cuándo y cómo vamos a mostrar este contenido web a nuestros contactos:

Cómo crear un workflow para mostrar una "Floating Bar" en mi web

En primer lugar tenemos que ir a la sección de workflows:

Crea_un_contenido_web_de_tipo_Popup_-_11.png

 

Una vez estamos en esa sección pulsamos en "CREAR NUEVO WORKFLOW":

Crea_un_contenido_web_de_tipo_Popup_-_12.png

 

y, a continuación, en "Crear workflow en blanco":

Crea_un_contenido_web_de_tipo_Popup_-_13.png

 

Lo primero que debemos hacer es cambiar el nombre de nuestro workflow y añadir una descripción si queremos. Además, podemos añadir etiquetas que nos ayuden a categorizar o clasificar nuestro workflow:

Crea_un_contenido_web_de_tipo_Floating_bar_-_8.png

 

A continuación vamos a editar nuestro nodo "Inicio". En este caso, vamos a configurar el nodo para que se dispara para toda nuestra lista de contactos, existentes y nuevos:

Crea_un_contenido_web_de_tipo_Popup_-_16.png

 

Seguidamente, a continuación del nodo "Inicio", añadimos un nodo de tipo disparador "Al visitar página":

Crea_un_contenido_web_de_tipo_Floating_bar_-_9.png

 

y lo editamos para elegir dónde se mostrará nuestro popup y dónde no. En este caso, queremos mostrarlo en todas las páginas excepto en la landing de rebajas (si el objetivo de nuestro contenido web es llevar a los contactos a esa landing no tiene sentido mostrarlo ahí):

Crea_un_contenido_web_de_tipo_Floating_bar_-_9.png

 

Dejamos la limitación del nodo tal como está por defecto, para que la "Floating Bar" solamente se muestre la primera vez que el contacto visita nuestra web. De esta forma no saturaremos a nuestros contactos con múltiples impactos del mismo contenido (ten en cuenta que las barras flotantes no se pueden cerrar, por lo que pueden molestar a algunos contactos si las mostramos demasiado):

Crea_un_contenido_web_de_tipo_Popup_-_18.png

 

Finalmente, añadimos el nodo de tipo acción "Enviar contenido web":

Crea_un_contenido_web_de_tipo_Floating_bar_-_10.png

 

y lo configuramos, seleccionando nuestra "Floating Bar":

 

 

Si pulsamos "SIGUIENTE" podremos elegir cuándo se mostrará el contenido web al contacto que visite nuestra página. Tenemos varias opciones para seleccionar, nosotros vamos a elegir la opción "Tras unos segundos" para que el "Slide In" se muestre a los 5 segundos de que el contacto llegue a nuestra web:

Crea_un_contenido_web_de_tipo_Slide_In-_13.png

 

En este ejemplo dejaremos este nodo con la limitación que viene por defecto (el contenido web se muestra una sola vez por contacto): Crea_un_contenido_web_de_tipo_Slide_In-_15.png

 

Aunque podríamos quitarla, ya que el nodo "Al visitar página" también está limitado y solo dejará pasar a los contactos una vez.

Ya lo tenemos todo listo, solo nos falta arrancar el workflow y definir cuándo debe finalizar. Si sabemos cuándo terminarán las rebajas en nuestra tienda podemos añadir esta fecha al workflow para que se finalice automáticamente cuando termine la campaña de rebajas:

Crea_un_contenido_web_de_tipo_Slide_In-_14.png

 

Y esto es todo, esperamos que este ejemplo os sirva para empezar a practicar con los nuevos contenidos web de tipo Popup. Seguro que pueden ayudar a mejorar el engagement de los contactos en vuestra web.

 

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 0 de 0