Universally Documentation

Step-by-step guides, multilingual SEO tips, and best practices to help you translate and scale your WordPress website.

Install on Lovable

A Lovable project connects to Universally with one script tag in the shared <head> that every page renders. You can ask Lovable to add it with a prompt, or paste it yourself in Code mode. The tag renders the language switcher and translates each page in the visitor's browser, so your URLs stay the same in every language with no DNS to change. JavaScript serving mode explains how the translation works and what it leaves out.

Before you start

  • A server-rendered project. Your published pages must include their text in the HTML sent by the server. Content rendered only in the browser, such as in a client-rendered Vite app, is not supported yet.
  • The Owner or Admin role in your Universally workspace, to create the project and see its snippet. Editors see "Ask a project admin for this project's installation snippet." instead of the line.
  • A published project on your own domain. The connection check only sees what is published.

Create the project

  1. Start a new project. Under Select Your Technology, pick Lovable.
  2. Fill in Domain, the fully qualified domain your project is published on, such as example.com. If the domain does not resolve yet, you see a warning, and you can still continue.
  3. Fill in Project Name, check Source Language (English (US) by default), and click Next.

Lovable projects have no serving mode to pick, so the next screen is Add the snippet. Language subdomains are not available for Lovable sites yet: your site is translated by the snippet, on its own addresses.

Add the snippet

The Add the snippet step draws your line inside an example page. The dashboard fills in your project's key:

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

Ask Lovable to add it. Click Copy prompt, open your project in Lovable, and paste the prompt into the chat. It uses one Lovable credit. The prompt ends with your line:

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>

Or paste it yourself in Code mode. On a paid Lovable plan, click Copy line, switch to Code, and put the line in your app's <head> in the shared root layout or document used to render every page. No credit is spent.

The Mark as complete buttons on the screen are stored in your browser and gate nothing.

Publish and check the connection

  1. Publish your project in Lovable. The preview is not the published site, and the check only sees what is published.
  2. Back in Universally, click Check connection.

The check loads your home page and looks for the line. Found it means the line is on your domain, it belongs to this project, and there is nothing else to install. Check connection confirms the script is installed. It does not check whether your content can be translated.

Nothing changes for your visitors yet. The line only loads the Universally file, and your site starts serving translations once you add languages in the next step.

Continue and I will do this later both move on to Add Languages, and nothing waits on the check. The line stays on the project's Setup page, under The line your site needs.

Add languages

  1. On Add Languages, answer "Which languages do you want to translate into?" with at least one target language.
  2. Click Finish. It stays disabled until the project has a language.

The language dialog still shows URL Format, but the value is unused on Lovable because your URLs never change. Each language row on All Languages has a Live switch. See Add and remove languages.

Verify it worked

  1. Open your published site in a private window. A first-time visitor is matched to their browser language automatically, so a browser set to one of your target languages sees the page translated.
  2. Find the language switcher in the top-right corner, with flags and language names.
  3. Pick a language. The page reloads in it, at the same address.

To see how much of a page was translated, add ?uni_debug=1 to its URL and open the browser console.

If it does not work

  • We loaded your domain but the line was not in the page: the change was not published, or the line went somewhere other than the shared <head>. Publish and re-check. The check only looks at your home page.
  • Found it, but the page stays in the source language: the text is rendered only in the browser, so it is not in the HTML the server sends. That is not supported yet.
  • That line belongs to a different project: another project's line is on the site. Replace it with the line on this project's Setup page, then check again.
  • No switcher appears: the project has no live target language yet. Add one, or turn on its Live switch.

More cases are in Translations are not appearing and The switcher is not visible.

Was this helpful?