Mostrar un slide in en la web

¿Qué vamos a hacer?

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

Un "Slide In" es un tipo de contenido web que se mostrará en la parte inferior derecha o izquierda, ideal para mostrar cualquier tipo de promoción o formulario de captación de leads. Además, quedará fijo en esa posición, independientemente de que el usuario realice scroll.

caso-de-uso---slideIn.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 "Slide In"

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 "Slide In". Podemos cambiar el nombre si lo deseamos, nosotros vamos a poner el nombre "Rebajas de verano 2020":

Crea_un_contenido_web_de_tipo_Slide_In-_1.png

 

Nosotros queremos mostrar un "Slide In" sencillo, con una imagen y un botón. Arrastramos estos dos componentes a nuestro contenido:

Crea_un_contenido_web_de_tipo_Slide_In-_2.png

 

Hacemos doble click en el componente "Imagen" de nuestro contenido y se nos abre el editor de imagen:

Crea_un_contenido_web_de_tipo_Slide_In-_3.png

1. Cargamos la imagen que queremos mostrar:

2. Rellenamos los campos "Texto alternativo" (por si la imagen no se puede visualizar en algún dispositivo, es útil para indicar a los navegadores qué estamos intentando mostrar), así como el "title".

3. Puedes también añadir a la imagen una URL en el campo "Enlace" si quieres que tus contactos visiten una determinada página al pinchar en ella. Vamos a poner ahí la dirección de nuestra página de rebajas u ofertas de verano, en nuestro caso ponemos "https://www.mipagina.com/rebajas-2020".

 

Ya tenemos nuestra imagen tal como queremos, ahora vamos a configurar el botón:

Crea_un_contenido_web_de_tipo_Slide_In-_4.png

1. Escribimos un texto que llame la atención y le ponemos tamaño 14pt y en negrita. También rellenamos el texto alternativo.

2. Como enlace del botón ponemos la misma dirección que escribiemos para el enlace de la imagen: "https://www.mipagina.com/rebajas-2020". De esta forma, el contacto llegará a la misma landing page de ofertas ya sea haciendo clic a través del botón o de la imagen.

3. Ajustamos el botón al ancho de la celda.

Finalmente, cambiamos el color del botón para hacerlo más llamativo:

Crea_un_contenido_web_de_tipo_Slide_In-_5.png

 

Ya tenemos casi listo el contenido, solo nos falta ajustar algunas opciones dentro de la pestaña de opciones generales. Vamos a dar un redondeo de 5 píxeles a las esquinas de nuestro "Slide In":

Crea_un_contenido_web_de_tipo_Slide_In-_6.png

 

Y también vamos a cambiar la animación "Al mostrar" a "Opacidad gradual hacia arriba":

Crea_un_contenido_web_de_tipo_Slide_In-_16.png

 

Ahora ya tenemos listo nuestro "Slide In":

Crea_un_contenido_web_de_tipo_Slide_In-_7.png

 

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 un "Slide In" 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:

Crea_un_contenido_web_de_tipo_Slide_In-_8.png

 

Además, podemos añadir etiquetas que nos ayuden a categorizar o clasificar nuestro workflow:

Crea_un_contenido_web_de_tipo_Slide_In-_9.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_Slide_In-_10.png

y lo editamos para elegir dónde se mostrará nuestro contenido web 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 es llevar a los contactos a esa landing no tiene sentido mostrarlo ahí):

Crea_un_contenido_web_de_tipo_Popup_-_17.png

 

Dejamos la limitación del nodo tal como está por defecto, para que el contenido web 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:

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_Slide_In-_11.png

 

y lo configuramos, seleccionando nuestro "Slide In":

Crea_un_contenido_web_de_tipo_Slide_In-_12.png

 

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 "Slide In". 

 

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