Botón de chat web: ¿Cómo personalizarlo?

Puedes personalizar tu botón de chat tanto antes como después de añadirlo en tu web.

Justo después de crear un nuevo botón, puedes seleccionar tus ajustes. Si deseas cambiar un botón existente, simplemente ve a Leads > Automatiza, y selecciona el botón como una fuente de leads en el lado izquierdo.

En la pestaña de Ajustes generales, puedes agregar o quitar fácilmente apps de mensajería haciendo clic en sus iconos. Puedes seleccionar entre:

• Messenger
• Telegram
• Viber
• WeChat
• Skype
• Instagram
• WhatsApp
• Mensajes de Apple
• Chat en vivo

Si seleccionas un app de mensajería que aún no está configurada en Kommo, se abrirá una ventana emergente para ayudarte a instalarla.

Puedes ver cómo se verá tu botón en dispositivos móviles y de escritorio directamente desde la vista previa a tu derecha, antes de lanzarlo.

Existen varias formas para editar la apariencia del botón. En la ventana del botón de chat web, encontrarás las pestañas de Ajustes generales y avanzados, cada una con su propio conjunto de características de personalización entre las cuales puedes elegir.

Ajustes generales

Además de configurar los canales de mensajería, en esta pestaña puedes modificar cómo se mostrará tu botón de chat en línea. Puedes cambiar:

• Animación: añade ondas, temblores, sacudidas, o mantenlo estático.
• Posición: elige la ubicación ya sea al lado izquierdo o derecho de tu web.
• Estilo: ajusta el tamaño y la forma, desde circular hasta cuadrado.
• Color del tema: selecciona un color para tu botón que coincida con tu marca.
• Agrega un mensaje de bienvenida: puedes personalizar un mensaje emergente de bienvenida, para así iniciar una conversación con tus visitantes y captar su atención.

Configuración avanzada

Cuando hayas terminado de configurar los ajustes generales, puedes abrir la pestaña de Ajustes avanzados para más posibilidades de personalización. Podrás cambiarle a tu botón :

• Diseño de canales: mostrar u ocultar iconos de las apps conectadas.
• Orientación de los canales: elige entre vertical u horizontal para los iconos de chat, que se muestran al hacer clic en el botón de chat.
• Margen derecho e inferior: al ajustar las márgenes para posicionar perfectamente el botón en tu web.
• Mantener visible el botón al desplazarse: para fijar el botón, si tu sitio web es desplazable, dejar esta opción ‘encendida’ permitirá que el botón permanezca en su lugar durante el desplazamiento.
• Aplicar degradado a tus botones de Facebook e Instagram: haz tus botones aún más atractivos habilitando gradientes en ellos.

¿Quieres explorar más sobre cómo aprovechar al máximo tu botón de chat en línea con el Chat en vivo? Lee nuestro artículo sobre Chat en vivo aquí.

Puedes añadir disparadores de acción en la sección de Acciones clave, y aquí es donde se puede ver el verdadero potencial del botón de chat en línea. Aquí, puedes configurar reacciones basadas en condiciones específicas, dándole a tu botón de chat un poco más de inteligencia. Echa un vistazo a las condiciones que puedes usar:

• Tiempo en sitio: dispara una respuesta después que un visitante haya estado navegando por un tiempo.
• Píxeles recorridos: activa una acción cuando un visitante llega a una parte específica de la página.
• Páginas visitadas: reacciona en función de cuántas páginas visite un usuario.
• Página visitada: toma acción cuando un visitante llegue a cierta página.

Una vez que hayas elegido una condición basada en el comportamiento de tus visitantes, es hora de elegir una reacción. Personaliza tu botón de chat para responder de diferentes maneras o automatizar procesos:

• Botón animado: añade un movimiento sutil (ondas, temblor o agitar el botón) para llamar la atención.
• Mensaje de bienvenida: recibe a los visitantes con un mensaje amistoso desde tu bot.
• Formulario emergente: facilita a que tus visitantes compartan información.
• Añadir tarea: controle los seguimientos importantes creando tareas de CRM.
• Enviar webhook: comparte enlaces relevantes con tus visitantes.
• Editar etiquetas: organiza tus leads etiquetándolos.
• Cambiar usuario de lead: dirija los chats al miembro adecuado del equipo para obtener ayuda personalizada.
• Cambiar campo: captura detalles extra para un mejor contexto.

Con estas prácticas acciones, puedes mejorar la experiencia del usuario sin ser demasiado insistente. Imagina recibirlos con un mensaje o ajustar sutilmente el botón cuando lleven un rato explorando. Además, puedes dirigir los chats directamente al miembro del equipo correcto para una mejor asistencia. Por ejemplo, guíalos a un recurso útil si están consultando páginas específicas.

Para definir una acción clave:

1. Ve a la pestaña Ajustes avanzados > Acciones clave.
2. Ponle un nombre a tu acción clave > haz clic en Añadir una condición.
3. Elige la que más te convenga > haz clic en Guardar.
4. Haz clic en Añadir una reacción y selecciona tu acción.
5. A continuación, Guarda el botón de chat.

Imaginemos un escenario en el que el propietario de una agencia de marketing llamada Bright Ideas Marketing quiere personalizar el botón de chat en línea para que refleje claramente su marca y mejore el compromiso de los clientes.

• Elegir los canales de mensajería: Pueden empezar seleccionando los canales de mensajería que deseen integrar con su botón de chat. Podrán elegir Messenger, WhatsApp y Live Chat, ya que son plataformas que su equipo suele usar para comunicarse con los clientes.
• Ajustar la apariencia: En la pestaña Ajustes generales, añaden un toque personal al botón de chat. Seleccionan un tono azul vibrante para que coincida con la paleta de colores de su marca. También eligen una forma redonda para que el botón resulte visualmente atractivo.
• Animación de inactividad y posición: Deciden añadir una sutil animación de inactividad al botón, haciendo que palpite suavemente. Ubican el botón en la esquina inferior derecha de su página web, de modo que resulte accesible y no molesto.
• Mensaje emergente de bienvenida: Para recibir a los visitantes y captar su atención, añaden un mensaje de bienvenida personalizado: “¡Hola! ¿Cómo podemos alegrarte el marketing hoy?”. Este mensaje aparece tan pronto alguien pulsa el botón de chat.
• Foto y nombre del agente: Cargan una foto profesional del agente, junto con su nombre. Esto le da un toque personal, haciendo que los visitantes sepan con quién están chateando.
• Ajustes avanzados y acciones clave: En la pestaña Ajustes avanzados, establecen acciones clave para mejorar la experiencia del cliente. Programan el botón de chat para que aparezca un mensaje de bienvenida si un visitante pasa más de 30 segundos en el sitio. También asignan páginas específicas de su web a diferentes integrantes del equipo, para que las consultas relacionadas con servicios como SEO o marketing de contenidos vayan directamente a los expertos en esas áreas.
• Chatbots: Han creado un chatbot llamado “BrightBot” para responder a las preguntas más habituales sobre sus servicios, precios y demás. Se aseguran de que el mensaje emergente de bienvenida esté activado para activar el bot.

Ahora, los visitantes del sitio web de Bright Ideas Marketing son recibidos con un botón de chat visualmente atractivo que combina con los colores y el estilo de la marca. El mensaje de bienvenida personalizado y los detalles del agente hacen que la experiencia sea más atractiva. Con la ayuda del chatbot, los visitantes obtienen respuestas inmediatas a sus preguntas, mientras que los miembros del equipo reciben preguntas relevantes basadas en su experiencia.

Si necesitas más ayuda con la instalación o la solucionar problemas, no dudes en ponerte en contacto con nuestro chat de soporte o a través de WhatsApp. También puedes contratar a un socio de Kommo para que haga todo el trabajo duro por ti.

¿Aún no eres usuario? Regístrate en nuestra prueba gratuita de 14 días o reserva una demo gratuita.