Ciao community di Discourse,
Spero stiate tutti alla grande!
Ho impostato un chatbot con una persona AI (LLM GPT-4 Omni-Mini) e sta funzionando benissimo! Ma ho notato che le interazioni dei clienti sono piuttosto basse. Al momento, per chattare con il bot, devono cliccare su questa piccola icona del robot nella barra in alto, e penso che potrebbe non essere molto evidente.
Ho creato un argomento che spiega come trovarlo, ma sembra ancora un po’ nascosto. Mi stavo chiedendo se ci fosse un modo per creare un’icona più grande del widget di chat in un angolo dello schermo per farlo risaltare di più?
Ho letto dell’integrazione di Help Scout o Zendesk, ma preferirei usare quello che ho già in Discourse senza costi aggiuntivi o complicazioni.
Avete qualche consiglio o trucco da condividere? Apprezzerei qualsiasi indicazione! Sto ancora imparando tutto questo, quindi qualsiasi aiuto è prezioso.
Grazie Lilly, è un’ottima idea!
non funzionerebbe molto bene per il nostro forum, ho rimosso la barra laterale, pensando di renderlo meno affollato… Potrei riportarla indietro se non trovo un’altra soluzione
Ovviamente, non mi dispiacerebbe scalare un po’…
Stavo pensando di usare la mia immagine per questo pulsante (l’ho già aggiunta al mio tema), ma non so come richiamare questa immagine personalizzata come icona nelle opzioni del componente (GitHub - literatecomputing/discourse-custom-components )
Inoltre, non riesco nemmeno a cambiare la posizione… devo creare una sezione personalizzata nel codice del tema??
Dopo alcune ricerche qua e là, ChatGPT mi ha aiutato a raggiungere quasi il mio obiettivo
Ho aggiunto il pulsante come suggerito da Lily, e ho anche passato parecchio tempo a leggere le alternative qua e là. Alla fine ho semplicemente chiesto a ChatGPT di aiutarmi a scrivere il codice per creare un pulsante del genere, o meglio, un “avatar” fluttuante basato su un’immagine che ho caricato nel mio tema.
Ho messo qui il codice che sto usando nel caso possa aiutare qualcun altro in futuro!
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; /* Fissa l'avatar in posizione */
bottom: 50px; /* Distanza dal fondo della pagina */
right: 50px; /* Distanza dal lato destro della pagina */
cursor: pointer; /* Cambia il cursore in puntatore al passaggio del mouse */
z-index: 1000; /* Assicura che l'avatar sia sopra gli altri contenuti */
text-align: center; /* Centra il testo del tooltip direttamente sotto l'avatar */
}
#chatbot-avatar img {
width: 200px; /* Regola le dimensioni secondo necessità */
height: 200px; /* Regola le dimensioni secondo necessità */
transition: transform 0.3s; /* Effetto di transizione fluido al passaggio del mouse */
}
#chatbot-avatar:hover img {
transform: scale(1.5); /* Ingrandisce leggermente l'avatar al passaggio del mouse */
}
.tooltip {
visibility: hidden; /* Nascosto per impostazione predefinita */
width: 200px; /* Larghezza del tooltip */
background-color: #000C34; /* Colore di sfondo del tooltip */
color: #fff; /* Colore del testo del tooltip */
text-align: center; /* Centra il testo */
border-radius: 5px; /* Angoli arrotondati */
padding: 8px; /* Spaziatura interna del tooltip */
position: absolute; /* Posizionamento assoluto */
bottom: 220px; /* Posizionato sopra l'avatar */
right: 50%; /* Allineamento centrale con l'avatar */
transform: translateX(50%); /* Regola per centrare */
opacity: 0; /* Trasparente per impostazione predefinita */
transition: opacity 0.3s; /* Transizione fluida dell'opacità */
z-index: 999; /* Posizionato appena sotto l'avatar */
}
#chatbot-avatar:hover .tooltip {
visibility: visible; /* Mostra il tooltip */
opacity: 1; /* Rende completamente visibile */
}
Ecco come appare sulla pagina (Il testo “start a conversation…” appare solo passando il mouse sull’avatar.
C’è un’unica cosa che non sono ancora riuscito a fare, ed è farlo apparire solo sulla home page; al momento appare su ogni pagina, inclusa la pagina di discussione dell’AI chatbot, dove è chiaramente ridondante… Ho provato ad aggiungere uno script per identificare la pagina e bloccarlo ovunque tranne che sulla home page, ecc.. finora non ha funzionato. Vedrò se riuscirò a fare di più domani!
Ma ho notato che le interazioni dei clienti sono piuttosto basse. Al momento, per chattare con il bot, devono cliccare su questa piccola icona del robot nella barra in alto, e penso che potrebbe non essere molto evidente.
