Installa su Lovable

Un progetto Lovable si connette a Universally con un tag di script nella <head> condivisa che ogni pagina renderizza. Puoi chiedere a Lovable di aggiungerlo con un prompt, o incollarlo tu stesso in modalità Codice. Il tag renderizza il selettore di lingua e traduce ogni pagina nel browser del visitatore, così i tuoi URL rimangono gli stessi in ogni lingua senza dover cambiare DNS. La modalità di servizio JavaScript spiega come funziona la traduzione e cosa esclude.

Prima di iniziare

• Un progetto server-rendered. Le tue pagine pubblicate devono includere il loro testo nell'HTML inviato dal server. Il contenuto renderizzato solo nel browser, come in un'app Vite renderizzata lato client, non è ancora supportato.
• Il ruolo Proprietario o Amministratore nel tuo spazio di lavoro Universally, per creare il progetto e vedere il suo snippet. Gli Editor vedono "Chiedi a un amministratore del progetto lo snippet di installazione di questo progetto." invece della riga.
• Un progetto pubblicato sul tuo dominio. Il controllo della connessione vede solo ciò che è pubblicato.

Crea il progetto

1. Avvia un nuovo progetto. Sotto Seleziona la tua tecnologia, scegli Lovable.
2. Compila Dominio, il dominio completo su cui è pubblicato il tuo progetto, come example.com. Se il dominio non viene ancora risolto, vedrai un avviso e potrai comunque continuare.
3. Compila Nome progetto, controlla Lingua di origine (Inglese (US) per impostazione predefinita) e fai clic su Avanti.

I progetti Lovable non hanno modalità di servizio tra cui scegliere, quindi la schermata successiva è Aggiungi lo snippet. I sottodomini linguistici non sono ancora disponibili per i siti Lovable: il tuo sito viene tradotto dallo snippet, ai suoi indirizzi.

Aggiungi lo snippet

Il passaggio Aggiungi lo snippet disegna la tua riga all'interno di una pagina di esempio. La dashboard compila la chiave del tuo progetto:

<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>

Chiedi a Lovable di aggiungerlo. Clicca su Copia prompt, apri il tuo progetto in Lovable e incolla il prompt nella chat. Utilizza un credito Lovable. Il prompt termina con la tua riga:

Add this script tag to the shared document <head> of this server-rendered project so it loads on every page. Use the root layout or document for this project's framework, preserve server rendering, and keep everything else as it is:
<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>

Oppure incollalo tu stesso in modalità Codice. Su un piano Lovable a pagamento, clicca su Copia riga, passa a Codice e inserisci la riga nell'<head> della tua app nel layout root condiviso o nel documento utilizzato per renderizzare ogni pagina. Nessun credito viene speso.

I pulsanti Segna come completato sullo schermo sono memorizzati nel tuo browser e non bloccano nulla.

Pubblica e controlla la connessione

1. Pubblica il tuo progetto in Lovable. L'anteprima non è il sito pubblicato e il controllo vede solo ciò che è pubblicato.
2. Tornato in Universally, fai clic su Controlla connessione.

Il controllo carica la tua home page e cerca la riga. Trovato significa che la riga è sul tuo dominio, appartiene a questo progetto e non c'è nient'altro da installare. Controlla connessione conferma che lo script è installato. Non verifica se il tuo contenuto può essere tradotto.

Ancora nulla cambia per i tuoi visitatori. La riga carica solo il file Universally e il tuo sito inizia a servire le traduzioni una volta aggiunte le lingue nel passaggio successivo.

Continua e Lo farò più tardi procedono entrambi a Aggiungi lingue, e nulla rimane in sospeso nel controllo. La riga rimane sulla pagina Configurazione del progetto, sotto La riga di cui il tuo sito ha bisogno.

Aggiungi lingue

1. In Aggiungi lingue, rispondi "In quali lingue vuoi tradurre?" con almeno una lingua di destinazione.
2. Fai clic su Fine. Rimane disabilitato finché il progetto non ha una lingua.

La finestra di dialogo della lingua mostra ancora Formato URL, ma il valore non viene utilizzato su Lovable perché i tuoi URL non cambiano mai. Ogni riga di lingua su Tutte le lingue ha un interruttore Live. Vedi Aggiungi e rimuovi lingue.

Verifica che abbia funzionato

1. Apri il tuo sito pubblicato in una finestra privata. Un visitatore alla prima visita viene automaticamente associato alla lingua del suo browser, quindi un browser impostato su una delle tue lingue di destinazione visualizza la pagina tradotta.
2. Trova il selettore di lingua nell'angolo in alto a destra, con bandiere e nomi di lingua.
3. Scegli una lingua. La pagina si ricarica in quella lingua, allo stesso indirizzo.

Per vedere quanta parte di una pagina è stata tradotta, aggiungi ?uni_debug=1 al suo URL e apri la console del browser.

Se non funziona

• Abbiamo caricato il tuo dominio ma la riga non era nella pagina: la modifica non è stata pubblicata, o la riga è finita altrove che nella <head> condivisa. Pubblica e ricontrolla. Il controllo esamina solo la tua home page.
• Trovato, ma la pagina rimane nella lingua di origine: il testo viene renderizzato solo nel browser, quindi non è nell'HTML che il server invia. Questo non è ancora supportato.
• Questa riga appartiene a un progetto diverso: la riga di un altro progetto è sul sito. Sostituiscila con la riga nella pagina Configurazione di questo progetto, quindi controlla di nuovo.
• Non appare alcun selettore: il progetto non ha ancora una lingua di destinazione attiva. Aggiungine una o attiva il suo interruttore Live.

Altri casi sono in Le traduzioni non appaiono e Il selettore non è visibile.