Hallo Discourse-Community,
Ich hoffe, es geht euch allen gut!
Ich habe einen Chatbot mit einer KI-Persona (LLM GPT-4 Omni-Mini) eingerichtet und er funktioniert wunderbar! Aber mir ist aufgefallen, dass die Kundeninteraktionen ziemlich gering sind. Im Moment müssen sie auf dieses kleine Roboter-Symbol in der oberen Leiste klicken, um mit dem Bot zu chatten, und ich denke, das ist vielleicht nicht sehr offensichtlich.
Ich habe ein Thema erstellt, das erklärt, wie man es findet, aber es scheint immer noch etwas versteckt zu sein. Ich habe mich gefragt, ob es eine Möglichkeit gibt, ein größeres Chat-Widget-Symbol in einer Ecke des Bildschirms zu erstellen, um es besser hervorzuheben?
Ich habe von der Integration von Help Scout oder Zendesk gelesen, aber ich würde lieber das verwenden, was ich bereits in Discourse habe, ohne zusätzliche Kosten oder weiteren Aufwand.
Haben Sie Tipps oder Tricks, die Sie teilen können? Ich wäre dankbar für jeden Hinweis! Ich lerne das alles noch, daher bedeutet jede Hilfe viel.
Danke Lilly, das ist eine sehr gute Idee!
Es würde für unser Forum nicht wirklich funktionieren, ich habe die Seitenleiste entfernt und überlegt, sie weniger überladen zu gestalten… Ich werde sie vielleicht wieder einführen, wenn ich keine andere Lösung finde
Offensichtlich würde ich es nicht ablehnen, ein wenig zu skalieren…
Ich habe darüber nachgedacht, mein eigenes Bild für diesen Button zu verwenden (ich habe es bereits zu meinem Theme hinzugefügt), aber ich weiß nicht, wie ich dieses benutzerdefinierte Bild als Symbol in den Komponentenoptionen aufrufen kann (GitHub - literatecomputing/discourse-custom-components )
Außerdem kann ich die Position nicht ändern… muss ich einen benutzerdefinierten Abschnitt im Theme-Code erstellen??
Nach einiger Recherche hier und da hat mir ChatGPT –fast– geholfen, mein Ziel zu erreichen
Ich habe den Button wie von Lily vorgeschlagen hinzugefügt und auch ziemlich viel Zeit damit verbracht, hier und da nach Alternativen zu suchen. Schließlich habe ich ChatGPT gebeten, mir beim Schreiben des Codes für einen solchen Button zu helfen, oder genauer gesagt, für einen schwebenden „Avatar“ basierend auf einem Bild, das ich in mein Theme hochgeladen habe.
Ich stelle den Code, den ich verwende, hier zur Verfügung, falls er jemandem in Zukunft helfen kann!
HTML:
<a id="chatbot-avatar" href="https://DEINE_URL_HIERs" title="AI chatbot">
<img src="https://DEIN_BILD_URL_HIER__" alt="Chatbot Avatar" />
<div class="tooltip">Start a conversation with the AI Chatbot</div>
</a>
CSS:
#chatbot-avatar {
position: fixed; /* Fixiert den Avatar an Ort und Stelle */
bottom: 50px; /* Abstand vom unteren Seitenrand */
right: 50px; /* Abstand vom rechten Seitenrand */
cursor: pointer; /* Ändert den Cursor beim Überfahren mit der Maus zu einem Zeiger */
z-index: 1000; /* Stellt sicher, dass der Avatar über anderen Inhalten liegt */
text-align: center; /* Zentriert den Tooltip-Text direkt unter dem Avatar */
}
#chatbot-avatar img {
width: 200px; /* Größe nach Bedarf anpassen */
height: 200px; /* Größe nach Bedarf anpassen */
transition: transform 0.3s; /* Sanfter Hover-Effekt */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* Vergrößert den Avatar beim Überfahren mit der Maus leicht */
}
.tooltip {
visibility: hidden; /* Standardmäßig ausgeblendet */
width: 200px; /* Breite des Tooltips */
background-color: #000C34; /* Hintergrundfarbe des Tooltips */
color: #fff; /* Textfarbe des Tooltips */
text-align: center; /* Zentriert den Text */
border-radius: 5px; /* Abgerundete Ecken */
padding: 8px; /* Innenabstand des Tooltips */
position: absolute; /* Absolute Positionierung */
bottom: 220px; /* Position über dem Avatar */
right: 50%; /* Zentriert mit dem Avatar */
transform: translateX(50%); /* Passt für die Zentrierung an */
opacity: 0; /* Standardmäßig transparent */
transition: opacity 0.3s; /* Sanfter Übergang */
z-index: 999; /* Knapp unter dem Avatar platziert */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* Zeigt den Tooltip an */
opacity: 1; /* Macht ihn vollständig sichtbar */
}
So sieht es auf der Seite aus (Der Text „Start a conversation…“ erscheint nur, wenn man mit der Maus über den Avatar fährt.
Es gibt nur eine Sache, die ich noch nicht geschafft habe: ihn nur auf der Startseite erscheinen zu lassen. Im Moment erscheint er auf jeder Seite, einschließlich der Diskussionsseite des KI-Chatbots, wo er eindeutig redundant ist… Ich habe versucht, ein Skript hinzuzufügen, um die Seite zu identifizieren und sie überall außer auf der Startseite usw. zu blockieren. Bisher funktioniert es nicht. Ich werde sehen, ob ich morgen mehr tun kann!
Aber mir ist aufgefallen, dass die Kundeninteraktionen ziemlich gering sind. Im Moment müssen sie auf dieses kleine Roboter-Symbol in der oberen Leiste klicken, um mit dem Bot zu chatten, und ich denke, das ist vielleicht nicht sehr offensichtlich.
