Ejemplos de WhatsApp Widget

Insertar WhatsApp en WebFlow – Tutorial

Webflow es un editor muy potente que te ofrece funcionalidades similares a las que puedes encontrar con WordPress pero en un entorno Cloud con el que te puedes despreocupar de toda la instalaci贸n y publicaci贸n.

Webflow ofrece una versi贸n gratuita completa que te permite publicar hasta siete p谩ginas web dentro de un mismo site con el que puedes empezar a probar el funcionamiento de este editor.

Y si ves que el dise帽o, la herramienta y funcionalidades son las que esperabas, puedes pasar a una versi贸n premium para mejorar el dise帽o y acabado de tu p谩gina web.

Y puedes a帽adir el complemento de WhatsApp a tu p谩gina de web de dos maneras. Puedes crear un link a WhatsApp y a帽adirlo a botones en p谩ginas espec铆ficas de tu sitio web. Por otro lado puedes optar a a帽adir el widget de WhatsApp que te dar谩 una funcionalidad m谩s avanzada.

Te explicamos paso a paso c贸mo conseguirlo.

Inserte un widget de chat de WhatsApp en su sitio Webflow

Aprenda a incrustar un widget de chat de WhatsApp en su sitio web de Webflow en 4 pasos:

  • Crear widget de WhatsApp
  • Copia el c贸digo del Widget
  • Pegue el c贸digo en Webflow
  • Publicar y probar tu Widget de WhatsApp

Si a煤n no has creado nuestra cuenta, cree una y obtenga acceso a varios widgets. Vaya a la p谩gina de la aplicaci贸n y crea tu widget. Luego, haga clic en la opci贸n de chat de WhatsApp para crear el widget. Una vez que tenga el widget de WhatsApp y el c贸digo ve a tu p谩gina de WebFlow y pega el c贸digo usando la opci贸n de HTML EMBED.

Funcionalidad del widget de WhatsApp

  • La foto de perfil que se muestra cuando se abre el chat
  • El nombre que se muestra junto a la foto de perfil
  • Una leyenda que aparece debajo del nombre
  • Mensaje de bienvenida
  • Al hacer clic en el bot贸n del mensaje de bienvenida, se muestra la barra lateral para ingresar el mensaje de apertura de su chat.

Bot贸n de iniciar chat en Webflow

Al hacer clic en el bot贸n Iniciar chat, se muestra la barra lateral para ingresar el texto que inicia WhatsApp. Tambi茅n puede alternar para mostrar u ocultar el icono de WhatsApp en su bot贸n.

Configuraciones del Widget de WhatsApp para Webflow

La opci贸n Configuraci贸n le permite personalizar:

Posici贸n
Configuraci贸n de pantalla de chat
Activadores de chat abiertos
Notificaciones
Posici贸n

Al hacer clic en el bot贸n Posici贸n, se muestra la barra lateral donde puede personalizar la posici贸n de su widget para:

Burbuja flotante
Insertar burbuja
Insertar ventana de chat
Tambi茅n puede centrar o alinear a la izquierda / derecha su widget.

Configuraci贸n de visualizaci贸n de chat

Si desea personalizar cu谩ndo el widget est谩 visible, use la configuraci贸n de visualizaci贸n del chat para activar / desactivar el widget seg煤n las restricciones espec铆ficas.

Despu茅s de realizar los cambios, aseg煤rese de guardar.

Copia el c贸digo de inserci贸n

Para agregar su widget a su proyecto de Webflow.

Despu茅s de guardar sus cambios en el 煤ltimo paso, aparece un modal con el c贸digo de inserci贸n: haga clic en el c贸digo para copiarlo autom谩ticamente en su portapapeles.

Pegue el c贸digo de WhatsApp en Webflow

Hay dos formas de agregar el widget a su proyecto de Webflow: en todo el proyecto, en cada p谩gina o en p谩ginas individuales.

Nota: Los scripts personalizados solo aparecer谩n en el sitio publicado.
Publicar y probar

Ahora puede publicar y probar el nuevo widget:

Haga clic en Publicar
Elija los dominios en los que desea publicar
Publicar en dominios seleccionados

Publicar su proyecto en Designer

鈥峆ublicar su proyecto desde la Configuraci贸n del proyecto