Interfaccia

https://app.supportfast.ai/interfaccia/

La pagina Interfaccia consente di personalizzare l’aspetto grafico del tuo chatbot, applicando i colori e il logo del tuo brand, prima di pubblicarlo sul tuo sito web tramite iframe o bolla di chat, oppure di condividerlo tramite link diretto.

La pagina si divide in due sezioni principali:

• A sinistra, l’elenco delle impostazioni di interfaccia grafica.
• A destra, l’anteprima in tempo reale del risultato grafico del tuo chatbot.

Di seguito trovi una panoramica delle configurazioni di interfaccia disponibili.

Nome Chat

Inserisci il nome visibile del tuo chatbot. Questo sarà utilizzato come titolo nell’intestazione della finestra di chat e come segnalibro sopra ai messaggi inviati dal chatbot stesso.

Messaggi Iniziali

Imposta i messaggi di benvenuto che appaiono automaticamente nella conversazione prima che l’utente inizi a interagire. Puoi inserire messaggi diversi per ciascuna delle lingue abilitate sul tuo chatbot.

È possibile utilizzare emoji per rendere i messaggi più accattivanti.
Per aggiungere più messaggi, vai a capo riga tra uno e l’altro.

NB: questo è il link per copiare le emoji

Domande Suggerite

Configura delle domande predefinite che compariranno sopra allo spazio di input, in modo che l’utente possa cliccarle per inviare il messaggio corrispondente. Anche in questo caso puoi differenziare le domande per ciascuna lingua abilitata, e abbellirle con eventuali emoji. Per inserire più domande, vai a capo riga tra una e l’altra.

Puoi anche abbreviare il contenuto visibile della domanda inserendo un titolo tra parentesi quadre subito dopo la domanda completa.

Esempio: Che servizi offrite? [servizi]
L’utente vedrà la parola “servizi” come bottone cliccabile. Una volta cliccato, in chat verrà inviato il messaggio “Che servizi offrite?”.

Nuvoletta sul Bottone

Questa opzione è disponibile solo per la bolla di chat.
Permette di mostrare dei messaggi in sovraimpressione sopra al bottone di chat, quando l’utente visita il tuo sito ma non ha ancora aperto il chatbot. È utile per attirare l’attenzione dell’utente e incentivare l’interazione con il chatbot.

I messaggi mostrati in nuvoletta sono gli stessi configurati nella sezione Messaggi Iniziali.

Puoi decidere se abilitare o meno questa opzione, e stabilire un timer di attesa in secondi dopo il quale il tuo chatbot farà comparire questi messaggi in nuvoletta.

Tema

Puoi selezionare il tema Chiaro oppure Scuro per il tuo chatbot.
La scelta del tema influisce sull’aspetto generale dell’interfaccia, in particolare sui colori di sfondo e dei testi:

• Chiaro: sfondo chiaro con testi in nero.
• Scuro: sfondo scuro con testi bianchi.

Colore dei Messaggi

Personalizza i colori utilizzati nella conversazione, sia per i messaggi dell’utente che per quelli del chatbot. Puoi configurare i seguenti elementi:

• Colore messaggio utente: colore di sfondo dei messaggi inviati dall’utente.
• Colore testo utente: colore del testo dei messaggi inviati dall’utente.
• Colore messaggio chatbot: colore di sfondo dei messaggi inviati dal chatbot.
• Colore testo chatbot: colore del testo dei messaggi del chatbot.

Tutte le impostazioni vengono gestite da un selettore colore integrato (color picker), che ti permette di scegliere liberamente un colore tramite codici esadecimali, RGB o selezione manuale.

Posizione del Bottone

Questa impostazione è valida solo per la Bolla di Chat.
Ti consente di decidere se posizionare il bottone di apertura della chat in basso a destra o a sinistra del tuo sito web. La scelta della posizione è utile per garantire la compatibilità con altri elementi o widget presenti sul sito, evitando eventuali sovrapposizioni.

Icona del Bottone

Inserisci il file per l’icona del tuo chatbot. Puoi usare il logo del tuo brand oppure un’immagine generica che richiami alla chat o al concetto di assistente virtuale.

L’icona caricata verrà utilizzata nei seguenti punti:

• Come icona del bottone nella bolla di chat
• Nell’header del chatbot, accanto al nome
• Come segnalibro visivo prima di ogni messaggio inviato dal chatbot

L’icona non è obbligatoria e può essere lasciata vuota, o rimossa in ogni momento. Se l’icona non è impostata, questa non apparirà nell’intestazione o nei segnalibri, mentre nel bottone di bolla di chat comparirà una icona standard.

Formati supportati: PNG, JPG e SVG
Formato consigliato: immagine quadrata, ad esempio 512 x 512 pixel, per una resa ottimale.

Colore Primario

Seleziona il colore principale che determinerà l’aspetto del tuo chatbot.
Questo colore verrà applicato a vari elementi dell’interfaccia, tra cui:

• Sfondo del bottone della bolla di chat
• Header della finestra di chat
• Bordi, bottoni, icone e altri componenti grafici all’interno della chat

La scelta del colore primario avviene tramite un selettore colore (color picker), che consente di impostare liberamente il colore desiderato tramite codici esadecimali, RGB o selezione manuale.

Colore Secondario

Seleziona il colore secondario, che viene utilizzato in contrasto con quello primario. Serve per garantire una buona leggibilità dei testi all’interno della chat, in particolare quando il testo appare su sfondi colorati.

Il colore secondario viene applicato automaticamente ai testi del chatbot e ad altri elementi dove è necessario un buon livello di contrasto. Puoi scegliere tra due opzioni:

• Bianco
• Nero

La scelta dipende dal colore primario selezionato, per assicurare sempre il giusto equilibrio visivo tra i colori del testo e dello sfondo.

Footer Personalizzato

In questa sezione puoi personalizzare il footer del tuo chatbot, ovvero l’area fissa in fondo alla finestra della chat. Il footer può includere un testo personalizzato e un riferimento Powered by a Supportfast oppure al tuo brand Whitelabel.

Powered By

Gli utenti che dispongono di un piano Whitelabel hanno la possibilità di sostituire il riferimento “Powered by Supportfast.ai” con un proprio testo personalizzato.
Per farlo, è necessario prima configurare le impostazioni Powered By nella sezione Whitelabel della piattaforma. Una volta configurato, potrai decidere per ciascun chatbot se mostrare o meno il tuo riferimento nel footer.

Testo Footer

Puoi inserire un testo aggiuntivo da visualizzare nel footer, utile per:

• Inserire una breve introduzione o descrizione
• Aggiungere un messaggio di avvertenza (es. disclaimer, privacy)
• Includere una call-to-action o un link utile per l’utente

Il campo supporta formattazione HTML, inclusi link, grassetti e corsivo, tramite un editor di testo dedicato. Il footer, una volta configurato, resterà sempre visibile in fondo alla finestra del chatbot durante tutta la conversazione.