Quickstart for Web

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 creating your first Website / Web App project.

Integration Instructions

Step 1: Install the Code Snippet

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

<script src="https://global.localizecdn.com/localize.js"></script>
<script>!function(a){if(!a.Localize){a.Localize={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","getSourceLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);</script>

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

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

Step 2: Verify successful installation

After installing the code snippet, refresh your website/application.

If you see the Localize widget at the bottom of your site, Localize is successfully installed.
Localize will automatically begin to detect new content on the pages that you visit, and will bring it into your dashboard.

Step 3: Check for Phrases in the Dashboard

Then check your Phrases tab to review your content.

Watch this short video to learn how to get started.

What's Next?

Using HTML Syntax to Prepare Phrases
Must-read if integrating with a dynamic application!
Frontend API
Control how Localize works in your site by specifying various options.
Approve Phrases
Approve your content for translation and publication.

Troubleshooting

Widget not present

Does the 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.
If you are not using the widget, another way to verify installation is to enter the following into the browser's developer console:
- Localize.v - if you don't get an error and you see a number, then Localize is installed and running.

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.

Contact Support

If you're still having trouble, contact us for assistance!