Come posso creare un pulsante personalizzato per il linguaggio semplice?

In questo articolo scoprirai come incorporare il linguaggio semplice direttamente nel tuo sito

Utilizza un pulsante personalizzato

Oltre al pulsante predefinito, hai anche la possibilità di creare un pulsante personalizzato per la funzione "Linguaggio semplice".

In questo modo puoi personalizzare completamente il design, la posizione e l'aspetto in base al tuo sito web e configurare il pulsante esattamente come ti serve.

In linea di massima, esistono due possibilità di personalizzazione: una personalizzazione parziale o una personalizzazione completa del pulsante.

Personalizzazione parziale del pulsante

Con l'individualizzazione parziale, il tuo pulsante sostituisce quello predefinito. La funzione "Linguaggio semplice" continuerà ad attivarsi automaticamente quando gli utenti cliccano sul tuo pulsante.

Puoi scegliere tra due opzioni.

1. Pulsante personalizzato senza tooltip e icona

In questa variante non utilizzerai elementi predefiniti. Il tuo pulsante sarà interamente personalizzato e sostituirà completamente quello esistente.

Non vengono importati né i suggerimenti né le icone dal sistema.

Ecco come funziona:

Inserisci il file JavaScript fornito
Non creare un tag <easy-speech>
Invece, crea un pulsante personalizzato
Assegna al tuo pulsante l'ID " easy-speech-custom "

A quel punto verrà visualizzato solo il tuo pulsante personalizzato.

Quando gli utenti cliccano sul pulsante, viene attivata la traduzione in linguaggio semplice. Cliccandoci nuovamente, viene visualizzata nuovamente la pagina normale.

2. Pulsante personalizzato con tooltip e icona

Anche con questa variante puoi personalizzare completamente il design del tuo pulsante.

La differenza sta nel fatto che vengono ripresi i tooltip e le icone del sistema.

Questi indicano, ad esempio, se una traduzione è stata eseguita correttamente. Inoltre , passando il mouse sul pulsante, compare un tooltip che fornisce ulteriori informazioni sulla traduzione.

Ecco come funziona:

Inserisci il file JavaScript fornito
Non creare un tag <easy-speech>
Invece, crea un pulsante personalizzato
Assegna al tuo pulsante l'ID «easy-speech-custom-including-tooltip»

A quel punto verrà visualizzato il tuo bottone personalizzato.

Cliccando sul pulsante si attiva la versione semplificata. Cliccandoci nuovamente, viene visualizzata nuovamente la pagina normale.

Durante l'utilizzo vengono visualizzate ulteriori indicazioni di stato:

All'avvio della traduzione, sul pulsante viene visualizzata un'icona di caricamento
A seconda che la conversione abbia avuto esito positivo o negativo, sul pulsante compare un'icona di stato corrispondente
Passando il mouse sul pulsante, viene visualizzato un suggerimento con informazioni sulla traduzione
Se la traduzione richiede più tempo o non va a buon fine, viene visualizzato un suggerimento

Personalizzazione completa del pulsante

Con la personalizzazione completanon si utilizzano elementi predefiniti.

Puoi personalizzare completamente il tuo pulsante e gestire l'attivazione della Lingua Semplice tramite le funzioni.

In questa versione, i suggerimenti e le icone non vengono applicati automaticamente.

Ecco come funziona:

Inserisci il file JavaScript fornito
Non creare un tag <easy-speech>
Invece, crea un elemento HTML personalizzato
Aggiungi al tuo codice le funzioni per l'attivazione del linguaggio semplice

Sono disponibili le seguenti funzioni di controllo:

await EA.activateEasy()
Attiva la traduzione in linguaggio semplice.
await EA.deactivateEasy()
Disattiva la versione semplificata e ripristina la visualizzazione della pagina originale.

Sono disponibili ulteriori funzioni per interrogare le informazioni di stato relative al linguaggio semplice o per gestirne l'attivazione.

Altre funzioni disponibili

Sono inoltre disponibili diverse funzioni che ti consentono di verificare lo stato del linguaggio semplice o di gestirne l'utilizzo.

Tra questi figurano, tra l'altro:

EA.statusEasy() – restituisce lo stato attuale del linguaggio semplice
EA.isEasyActive() – verifica se il linguaggio semplice è attualmente attivo
EA.keepEasyActivated() – assicura che il linguaggio semplice rimanga attivo anche dopo il cambio di pagina
EA.scriptIsLoaded() – verifica se lo script è stato caricato correttamente

Queste funzioni ti aiutano a integrare in modo flessibile il linguaggio semplice nel tuo sito web e ad adattarlo alla tua interfaccia.