All Collections
Starting with the Basics
Transifex Live
Installing the Transifex Live JavaScript Snippet
Installing the Transifex Live JavaScript Snippet

Discover the process of installing the Transifex Live JavaScript snippet onto your website.

Nina Eleftheriadou avatar
Written by Nina Eleftheriadou
Updated over a week ago

The Transifex Live JavaScript snippet is needed to publish translations and make them visible to your site’s visitors. You don’t need to install the snippet to start approving or translating strings if you plan to use the in-app (iFrame) version of Transifex Live.

However, we would recommend that you install the snippet before doing anything else to take advantage of the Transifex Live sidebar, which runs directly on your site.


Adding a website

Before you can get the JavaScript snippet to add to your site, you’ll need a website/Live resource in your web project. The resource will hold your source content and translations. Here’s how to add one if you don’t have one yet:

  1. Create a Live project if you don’t have one yet.

  2. Select your project from the project navigation in the Dashboard.

  3. Click the Add Resources button in the top right side.

  4. Type your website’s URL into the Add a website URL field and click Create resource.


Getting the snippet

📝 Note: Each site you translate with Transifex Live (i.e., each resource) has a unique snippet associated with that site’s URL.

Now that you have a web project and resource, you can get the snippet:

  1. Navigate to the Dashboard and select the project with the resource for which you want to get the snippet.

  2. Click on Resources.

  3. From the list of resources, click on the one you want to get the snippet for.

  4. Click the 3 vertical dots and select Settings.

  5. Copy the snippet from the popup.

    tx-live-snippet.png#asset:972


Installing the snippet

After you have copied the snippet, paste it before the </head> tag of each page you want to translate. And that’s it. You’ll now be able to trigger the Transifex Live sidebar on your site and approve strings for translation.

If the snippet cannot be placed in the </head> tag, you should set the manual_init parameter to a Boolean true value (more info here) and call Transifex.live.init() when you're ready for the snippet to run.

📝 Note: Some CMSs or publishing platforms might not let you edit the HTML directly. In such situations, look for a field where you can paste JavaScript (e.g., a Google Analytics snippet) and add the Live snippet there.


Using Transifex Live on a staging server

Staging servers are often used to test or preview things before going live. If you have a staging server, you can use the same JavaScript snippet for your production (live) and staging sites.

This lets you approve and translate content from the staging server before taking it live on your production server – without needing to do duplicate work. Simply return to the Settings popup you copied the snippet from, enter your staging domain, and click Save Settings.

tx-staging-domain.png#asset:973


💡Tip

Looking for more help? Get support from our Transifex Community Forum!

Find answers or post to get help from Transifex Support and our Community.

Did this answer your question?