Developer Docs >
Help Center
Try it FreeLearn MoreYour AccountSupport

Quickstart for Web

Get up-and-running with Localize For Web

Suggest Edits

Getting started with Localize For Web is simple and shouldn't take more than a few minutes. If you haven't already, first follow the instructions for Signing Up and create your first Website / Web App project.

Integration Instructions

Step 1: Install the Code Snippet

Copy and paste the following code snippet into the <head> tag in your website, in all pages that you want to localize. 

<script src="https://global.localizecdn.com/localize.js"></script>

<script>(function(a){if(!a.Localize){a.Localize={X:[]};var methods=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","setWidgetLanguages","hideLanguagesInWidget","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"];for(var i=0;i<methods.length;i++){a.Localize[methods[i]]=(function(m){return function(){a.Localize.X.push([m,arguments]);};})(methods[i]);}}})(window);</script>

<script>
  Localize.initialize({
    key: '[[app:key]]',
    rememberLanguage: true,
    // other options go here, separated by commas
  });
</script>

* Ensure that your Project Key is displayed in between the single quotes next to "key: '????'".

Alternatively, check if your website uses one of the technologies for which we have an integration guide.

Step 2: Add Initialization Options

Add any desired options to the Localize.initialize() call above, check here for the full list of possible options.

Some popular options include:

  • autoApprove - use to fully automate your translation workflow
  • localizeImages - allows for localization of images in your site

Step 3: Reload your website

  1. Visit your website (or application).
  2. Select one of your target languages using the language-switching widget.
  3. Refresh the page.
  4. Lather, rinse, and repeat, for each page on your site.

Localize will automatically begin detecting new content on the pages you visit and bring it into your dashboard.

Step 4: Approve phrases

Then head on over to the Manage Phrases page to approve phrases in the Localize dashboard.

Step 5: Phrases not showing up?

If you are not seeing phrases show up in your Pending bin in the Localize dashboard, follow the troubleshooting instructions here.


Watch this short video to learn how to get started.

What's Next?

📘

Developer Docs

If you are a developer, you can also visit our Developer Docs to find more in-depth instructions.

Troubleshooting

Localize not Working

Widget is Enabled

  • If you have the default Localize language-switching widget enabled in your Project, then does the Localize code copied into your site contain "YOUR-PROJECT-KEY" or "[[app:key]]" next to the "key: " line in the code snippet? If so, replace "YOUR-PROJECT-KEY" or "[[app:key]]" with your unique Project Key found on the Project Overview page.

Widget not Enabled

  • If you are not using the default Localize language-switching widget, another way to verify the installation is to enter the following into the browser's developer console (ask your developer if you need help):
    • Localize.v - if you don't get an error and you see a number, then Localize is installed and running.

No Translations are Displayed

  • If you are not seeing any translations on your website, perhaps you need to Approve Phrases so that translations are generated.

Source Language Seen Before Target Language

Ensure the code snippet is placed in the <head> tag and not the <body> tag. Placing the Localize code in the <body> of your site will have a negative impact on performance, and may cause other problems like your source language flashing on the screen before the target language is displayed.

Advanced Installation

Please refer to the following guides for advanced integration steps:

  • Using HTML Syntax to Prepare Phrases
    Learn how to tailor what content is brought into your dashboard. Especially useful for dynamic websites.

  • Frontend API
    Control how Localize works in your site by specifying various options.

  • REST API
    Use our REST API endpoints for managing phrases and translations on the backend.

  • CLI
    Use our Command Line Interface to streamline the importing and exporting of files.

Contact support if you have any questions. We're here to help!

Updated 2 days ago

What’s Next