Mostrar una Floating Bar en la web

Una Floating Bar (barra flotante) es un tipo de contenido web que se muestra en la parte superior o inferior de tu página, ocupando todo el ancho de la misma. Además, esta barra permanece fija mientras los usuarios navegan por la página.

En este artículo, aprenderás a crear una Floating Bar e insertarla en tu sitio web con Connectif.

  

Tiempo de implementación: 15 min.
Dificultad: Baja.
¿Cuándo utilizarlo?: Cuando quieras destacar información importante sin interrumpir la navegación del usuario.

PASO 1: Creación del contenido web de tipo Floating Bar

1. Accede a tu Tienda de Connectif.

2. Dirígete a "Contenido > Contenido web" y haz clic en   Crear nuevo contenido.

3. Selecciona el tipo de contenido Floating Bar y asígnale un nombre.

Mostrar una floating bar en tu web - 1-min.png

4. En la pestaña General, ajusta el color de fondo y selecciona la posición de la barra flotante (parte superior o inferior de la página).

Mostrar una floating bar en tu web - 2-min.png

5. En la pestaña Componentes, añade aquellos que desees y edítalos. Por ejemplo, añade uno de tipo Texto para añadir un mensaje a tu Floating Bar.

Mostrar una floating bar en tu web - 3-min.png

6. (Opcional). Añade un enlace al texto haciendo clic en el botón de Insertar enlace. También puedes añadir otros elementos, como variables, si lo deseas.

Mostrar una floating bar en tu web - 4-min.png

 

En nuestro ejemplo, añadiremos un enlace a la página de ofertas.

7. Ajusta las opciones de diseño del texto como color, tipografía, márgenes, etc.

Mostrar una floating bar en tu web - 5-min.png

8. Haz clic en  Guardar para conservar las modificaciones en el diseño de la Floating Bar.

 

PASO 2: Creación del workflow para mostrar la Floating Bar

9. Ve a la sección de Workflows y haz clic en   Crear nuevo workflow.

10. Selecciona   Crear workflow en blanco.

11. Edita el nodo "Inicio" para que se dispare para toda tu lista de contactos, existentes y nuevos, tal como se ve en la imagen.

Mostrar una floating bar en tu web - 6-min.png

12. Añade un nodo de tipo disparador "Al visitar página" y edítalo para elegir en qué páginas se mostrará la Floating Bar.

Mostrar una floating bar en tu web - 7-min.png

 

En nuestro ejemplo, la Floating Bar se mostrará en todas las páginas de la web.

13. Añade un nodo de tipo acción "Enviar contenido web" y, en su configuración, selecciona tu Floating Bar. Haz clic en Siguiente .

Mostrar una floating bar en tu web - 8-min.png

14. Configura cuándo se mostrará el contenido web al contacto que visite tu página. Por ejemplo, "Tras unos segundos", para que se muestre a los 5 segundos desde que un contacto llega a tu web. Haz clic en Siguiente .

Mostrar una floating bar en tu web - 9-min.png

15. Mantén activa la limitación del nodo por defecto para que la Floating Bar se muestre solo una vez por contacto, tal como se ve en la imagen.

Mostrar una floating bar en tu web - 10-min.png

16. Haz clic Aplicar para guardar la configuración del nodo.

17. Guarda tu workflow y actívalo para determinar cuándo debe iniciarse y, opcionalmente, cuándo deseas terminarlo, para que deje de mostrarse la Floating Bar.

Mostrar una floating bar en tu web - 11-min.png

 

En nuestro ejemplo, el workflow se iniciará automáticamente y se detendrá pasados 7 días.

 

 

¡Éxito!
Tu Floating Bar está integrada en tu página web.

 


¡Sigue aprendiendo!

Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:

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