Mostrar un popup en la web

¿Qué vamos a hacer?

En este artículo vamos a crear un contenido web de tipo "Popup" de forma sencilla. Podrás mostrar este contenido a tus contactos en la página/s que quieras a través de un workflow.

caso-de-uso---popup.gif

Si quieres más información sobre contenido web de tipo "Popup" haz click aquí.

 

Para este ejemplo vamos a suponer que tenemos una página dentro de nuestra web con ofertas de productos rebajados para la campaña de verano y queremos mostrar un popup con una imagen llamativa y un botón para intentar llevar a los contactos que nos visiten a esta landing. 

 

Cómo crear un contenido web de tipo "Popup"

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 "Popup". Podemos cambiar el nombre si lo deseamos, nosotros vamos a poner el nombre "Campaña promocional - Verano 2020":

Crea_un_contenido_web_de_tipo_Popup_-_2.png

 

Arrastramos los componentes "Imagen" y "Botón enlace" al contenido:

Crea_un_contenido_web_de_tipo_Popup_-_3.png

 

Ahora importamos la imagen que queremos mostrar. Editamos el componente "Imagen" que hemos arrastrado al contenido y pinchamos en "Subir imagen" para cargar desde nuestro PC la imagen que tenemos preparada.

Crea_un_contenido_web_de_tipo_Popup_-_4.png

 

Si ya tenemos subida la imagen en alguna URL podemos cargarla desde ahí, añadiendo la URL al campo "URL de la imagen".

Crea_un_contenido_web_de_tipo_Popup_-_5.png

 

En este caso vamos a cargar la imagen desde nuestro PC. Connectif la subirá a un CDN privado (servidor de imágenes) y generará una URL. Podemos reutilizar esta URL de imagen en otros contenidos si así lo deseamos.

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". 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. En este caso vamos a dejar ese campo en blanco ya que vamos a añadir al contenido un botón que cumplirá esa misma función.

Crea_un_contenido_web_de_tipo_Popup_-_6.png

 

Ya tenemos la imagen de nuestro Popup, ahora nos falta configurar el botón. Hemos cambiado el texto y su tamaño. También hemos rellenado los campos "title" y "Enlace del botón" (para que el contacto vaya a nuestra página de rebajas en caso de que lo pulse). También hemos indicado que queremos que el botón se ajuste al ancho de la celda y lo dejamos alineado al centro:

Crea_un_contenido_web_de_tipo_Popup_-_7.png

 

Finalmente, cambiamos el color del fondo del botón, para que llame más la atención de los contactos:

Crea_un_contenido_web_de_tipo_Popup_-_8.png

 

En las opciones generales podemos configurar muchos opciones de nuestro Popup pero, en este caso, las vamos a dejar como vienen por defecto ya que se ajustan a lo que queremos:

Crea_un_contenido_web_de_tipo_Popup_-_9.png

 

Ya tenemos listo nuestro Popup, ahora tenemos que crear un workflow para elegir dónde y cómo lo vamos a mostrar a nuestros contactos.

 

Cómo crear un workflow para mostrar un popup 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_Popup_-_14.png

 

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

Crea_un_contenido_web_de_tipo_Popup_-_15.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_Popup_-_19.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 popup 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 popup 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 los popups son muy invasivos e interrumpen la navegación, hay que ser cautos con su uso):

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_Popup_-_20.png

 

y lo configuramos, seleccionando nuestro popup:

Crea_un_contenido_web_de_tipo_Popup_-_21.png

 

Si pulsamos "SIGUIENTE" podremos elegir cuándo se mostrará el popup al contacto que visite nuestra página. Tenemos varias opciones para seleccionar, nosotros vamos a elegir "Tras unos segundos" y lo configuraremos para que se dispare tras 5 segundos:

Crea_un_contenido_web_de_tipo_Popup_-_22.png

 

En este ejemplo dejaremos este nodo con la limitación que viene por defecto (el popup 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_Popup_-_23.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