He configurado un chatbot con una personalidad de IA (LLM GPT-4 Omni-Mini) y ¡ha estado funcionando de maravilla! Pero he notado que las interacciones de los clientes son bastante bajas. Ahora mismo, para chatear con el bot, tienen que hacer clic en este pequeño icono de robot en la barra superior, y creo que podría no ser muy obvio.
Creé un tema explicando cómo encontrarlo, pero todavía parece un poco oculto. Me preguntaba si hay alguna forma de crear un icono de widget de chat más grande en una esquina de la pantalla para que destaque más.
He leído sobre la integración de Help Scout o Zendesk, pero preferiría usar lo que ya tengo en Discourse sin costos adicionales ni más complicaciones.
¿Algún consejo o truco que puedan compartir? ¡Agradecería cualquier indicación que puedan darme! Todavía me estoy familiarizando con todo esto, así que cualquier ayuda significa mucho.
¡Gracias Lilly, es una muy buena idea!
Realmente no funcionaría para nuestro foro, he eliminado la barra lateral, pensando en hacerla menos abarrotada… Puede que la traiga de vuelta si no encuentro otra solución
Obviamente, no me importaría escalar un poco…
Estaba pensando en usar mi propia imagen para este botón (ya la he añadido a mi tema), pero no sé cómo llamar a esta imagen personalizada como icono en las opciones del componente (GitHub - literatecomputing/discourse-custom-components)
Tampoco consigo cambiar la posición… ¿necesito crear una sección personalizada en el código del tema?
Después de investigar aquí y allá, ChatGPT me ayudó a alcanzar mi objetivo, ¡casi!
Añadí el botón como sugirió Lily, y también pasé bastante tiempo leyendo sobre alternativas aquí y allá. Al final, le pedí a ChatGPT que me ayudara a escribir el código para crear dicho botón, o en realidad un “avatar” flotante basado en una imagen que subí a mi tema.
¡Pongo el código que estoy usando aquí por si puede ayudar a alguien más en el futuro!
HTML:
<a id="chatbot-avatar" href="https://TU_URL_AQUI" title="AI chatbot">
<img src="https://TU_IMAGEN_URL_AQUI__" alt="Chatbot Avatar" />
<div class="tooltip">Inicia una conversación con el Chatbot de IA</div>
</a>
CSS:
#chatbot-avatar {
position: fixed; /* Fija el avatar en su lugar */
bottom: 50px; /* Distancia desde la parte inferior de la página */
right: 50px; /* Distancia desde la derecha de la página */
cursor: pointer; /* Cambia el cursor a un puntero al pasar el ratón por encima */
z-index: 1000; /* Asegura que el avatar esté por encima de otro contenido */
text-align: center; /* Centra el texto del tooltip directamente debajo del avatar */
}
#chatbot-avatar img {
width: 200px; /* Ajusta el tamaño según sea necesario */
height: 200px; /* Ajusta el tamaño según sea necesario */
transition: transform 0.3s; /* Efecto suave al pasar el ratón */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* Agranda ligeramente el avatar al pasar el ratón */
}
.tooltip {
visibility: hidden; /* Oculto por defecto */
width: 200px; /* Ancho del tooltip */
background-color: #000C34; /* Color de fondo del tooltip */
color: #fff; /* Color del texto del tooltip */
text-align: center; /* Centra el texto */
border-radius: 5px; /* Bordes redondeados */
padding: 8px; /* Relleno interior del tooltip */
position: absolute; /* Posicionamiento absoluto */
bottom: 220px; /* Posición encima del avatar */
right: 50%; /* Alineación centrada con el avatar */
transform: translateX(50%); /* Ajuste para centrar */
opacity: 0; /* Transparente por defecto */
transition: opacity 0.3s; /* Transición suave */
z-index: 999; /* Colocado justo debajo del avatar */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* Muestra el tooltip */
opacity: 1; /* Lo hace completamente visible */
}
Así es como se ve en la página (el texto “inicia una conversación…” aparece solo al pasar el ratón por encima del avatar).
Solo hay una cosa que aún no he podido hacer, y es hacer que aparezca solo en la página de inicio, ya que en este momento aparece en todas las páginas, incluida la página de discusión del chatbot de IA, donde es claramente redundante… He intentado añadir un script para identificar la página y bloquearlo en todas partes excepto en la página de inicio, etc. No ha funcionado hasta ahora. ¡Veré si puedo hacer más mañana!
Pero he notado que las interacciones de los clientes son bastante bajas. Ahora mismo, para chatear con el bot, tienen que hacer clic en este pequeño icono de robot en la barra superior, y creo que podría no ser muy obvio.
