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 in 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={};for(var e=["translate","untranslate","phrase","initialize","translatePage","setLanguage","getLanguage","detectLanguage","getAvailableLanguages","untranslatePage","bootstrap","prefetch","on","off","hideWidget","showWidget","getSourceLanguage"],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?

📘

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 about 2 years ago

What’s Next