Bonjour la communauté Discourse,
J’espère que vous allez tous très bien !
J’ai mis en place un chatbot avec une persona IA (LLM GPT-4 Omni-Mini), et cela fonctionne à merveille ! Mais j’ai remarqué que les interactions clients sont assez faibles. Actuellement, pour discuter avec le bot, ils doivent cliquer sur cette petite icône de robot dans la barre supérieure, et je pense que ce n’est pas très évident.
J’ai créé un sujet expliquant comment le trouver, mais il semble toujours un peu caché. Je me demandais s’il existait un moyen de créer une icône de widget de chat plus grande dans un coin de l’écran pour qu’elle ressorte davantage ?
J’ai lu des articles sur l’intégration de Help Scout ou Zendesk, mais je préférerais utiliser ce que j’ai déjà dans Discourse sans frais supplémentaires ni complications.
Avez-vous des astuces ou des conseils à partager ? J’apprécierais tous les éclaircissements que vous pourrez m’apporter ! Je suis encore en train de maîtriser tout cela, donc toute aide est la bienvenue.
Merci Lilly, c’est une très bonne idée !
cela ne fonctionnerait pas vraiment pour notre forum, j’ai retiré la barre latérale, pensant la rendre moins encombrée… Je la ramènerai peut-être si je ne trouve pas d’autre solution
Évidemment, je ne serais pas contre une petite mise à l’échelle…
Je pensais utiliser ma propre image pour ce bouton (je l’ai déjà ajoutée à mon thème), mais je ne sais pas comment rappeler cette image personnalisée comme icône dans les options du composant (GitHub - literatecomputing/discourse-custom-components )
De plus, je n’arrive pas à changer la position non plus… dois-je créer une section personnalisée dans le code du thème ??
Voici comment j’imagine le bouton pour le chatbot :
Après quelques recherches ici et là, ChatGPT m’a aidé à atteindre -presque- mon objectif
J’ai ajouté le bouton comme Lily l’a suggéré, et j’ai aussi passé pas mal de temps à lire les alternatives ici et là. Finalement, j’ai demandé à ChatGPT de m’aider à écrire le code pour créer un tel bouton, ou plutôt un « avatar » flottant basé sur une image que j’ai téléchargée dans mon thème.
Je mets le code que j’utilise ici au cas où cela pourrait aider quelqu’un d’autre à l’avenir !
HTML :
<a id="chatbot-avatar" href="https://YOUR_URL_HEREs" title="AI chatbot">
<img src="https://YOUR_IMAGE_URL_HERE__" alt="Chatbot Avatar" />
<div class="tooltip">Start a conversation with the AI Chatbot</div>
</a>
CSS :
#chatbot-avatar {
position: fixed; /* Fixe l'avatar en place */
bottom: 50px; /* Distance par rapport au bas de la page */
right: 50px; /* Distance par rapport à la droite de la page */
cursor: pointer; /* Change le curseur en pointeur au survol */
z-index: 1000; /* Assure que l'avatar est au-dessus des autres contenus */
text-align: center; /* Centre le texte de l'infobulle juste en dessous de l'avatar */
}
#chatbot-avatar img {
width: 200px; /* Ajustez la taille selon les besoins */
height: 200px; /* Ajustez la taille selon les besoins */
transition: transform 0.3s; /* Effet de survol fluide */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* Agrandit légèrement l'avatar au survol */
}
.tooltip {
visibility: hidden; /* Caché par défaut */
width: 200px; /* Largeur de l'infobulle */
background-color: #000C34; /* Couleur de fond de l'infobulle */
color: #fff; /* Couleur du texte de l'infobulle */
text-align: center; /* Centre le texte */
border-radius: 5px; /* Coins arrondis */
padding: 8px; /* Marge intérieure de l'infobulle */
position: absolute; /* Positionnement absolu */
bottom: 220px; /* Positionné au-dessus de l'avatar */
right: 50%; /* Alignement centré avec l'avatar */
transform: translateX(50%); /* Ajustement pour le centrage */
opacity: 0; /* Transparent par défaut */
transition: opacity 0.3s; /* Transition fluide */
z-index: 999; /* Placé juste en dessous de l'avatar */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* Affiche l'infobulle */
opacity: 1; /* Rend l'infobulle complètement visible */
}
Voici à quoi cela ressemble sur la page (Le texte « start a conversation… » apparaît uniquement au survol de l’avatar.
Il y a une seule chose que je n’ai pas encore réussi à faire, c’est de le faire apparaître uniquement sur la page d’accueil. Pour le moment, il apparaît sur toutes les pages, y compris la page de discussion du chatbot IA, où il est clairement redondant… J’ai essayé d’ajouter un script pour identifier la page et le bloquer partout sauf sur la page d’accueil, etc. Ça n’a pas fonctionné jusqu’à présent. Je verrai si je peux faire plus demain !
Mais j’ai remarqué que les interactions clients sont assez faibles. Actuellement, pour discuter avec le bot, ils doivent cliquer sur cette petite icône de robot dans la barre supérieure, et je pense que ce n’est pas très évident.
