Lovable - Integration/Setup

In this article, you'll learn to translate all your content and make your website multilingual within minutes.

Step 1: Create a Weglot account

Sign up for Weglot, confirm your email, name your project in the Dashboard, and select "Other" as the website technology.

Step 2: Add your new languages

Choose your website's original language and the languages for translation.

Step 3: Add your website details

Enter your domain name (e.g., mywebsite.com) on the new page and click "Next."

You need to choose "Subdomain integration":

Then you will have the possibility to continue the setup for subdomains, or not to use subdomains by clicking on the "Skip this step" section.

Step 4: Use Subdomains (optional)

Our subdomain integration is SEO-friendly and allows your website to be better indexed, with unique URLs for the translated versions (for example, en.website.com in English).

Your DNS settings will be displayed (the language code will differ depending on the languages you’ve added) in the "Setup DNS manually" section:

Now, go to your domain name provider account and to the section or page where you can manage the DNS (for instance, in Google Domains, it’s located under a tab on the left-side menu bar called DNS).

At this stage, you should be able to create new entries in the DNS section on your screen (in our example, it’s in the section “Custom resource records”).

Select CNAME as the type of entry.

Enter “en” (for those adding English) under the “Name” section and the value provided by Weglot under the "Data" section.

If you have any issues figuring out where to find or how to update your DNS records, we can help you. Just email us at support@weglot.com.

Once you have added and saved the entries, go back to the Weglot page. You can click on “ Check DNS” and a green check-mark icon should appear: this means everything has been successfully set up (This can sometimes take a couple of minutes or even 10, so don’t be alarmed if the green check-mark icon hasn’t appeared next to your DNS record yet). Click "Next".

Step 5: Add Weglot to Lovable

Copy and paste the Weglot snippet provided in your Dashboard into Lovable.

In your Lovable Dashboard, select your "Project", go to the chat, and ask Lovable to add the Weglot JS snippet to your website's HTML header (the code will be slightly different if you choose subdomains):

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>
<script>
  Weglot.initialize({
      api_key: 'Your API Key'
});
</script>” 

Note that using the chat will cost you 1 Lovable credit.

If you don't want to use a Lovable credit and have a paid subscription on Lovable, you can use the "Code Mode" to integrate Weglot into your website.

To do so, just click on this option at the top:

Then, go to the "index.html" file and add the Weglot script just before the ⟨/head⟩ tag:

Your website is not entirely translated? In your Dashboard> Settings add a dynamic rule with the "body" selector.

Your website is now translated!

You've now successfully translated your website. Go to your website, and you'll see a language switcher at the bottom right of your site (it may take a few minutes to appear). You can also change its position - check out our guide to find out how. 

Weglot provides you with the first round of automatic translation. To view them, log in to your Weglot account and go to your Dashboard> Translations > Languages. Here, you can review and manually edit all your translations.