Translate your Squarespace site with Localize

If you do not have a project yet, signup here!

1) Scroll down the left sidebar and click on "Settings".

2) Scroll down the left sidebar again and click on "Advanced".

3) Click on "Code Injection".

4) Add Localize to your website

Copy and paste the following code into into the “Header” box on Squarespace’s code injection page.

<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"],t=0;t<e.length;t++)a.Localize[e[t]]=function(){}}}(window);</script>

<script>
 Localize.initialize({
  key: '[[app:key]]',
  rememberLanguage: true,
  blockedClasses: ['sqs-frontend-overlay-editor-widget', 'sqs-edit-mode-controller', 'sqs-frontend-overlay-editor-widget', 'sqs-frontend-overlay-editor-widget-host', 'cke', 'sqs-configuration-menu-header', 'sqs-block-editor-button-container', 'sqs-frontend-node-header-widget', 'sqs-layout-insert-block-menu', 'sqs-widget', 'sqs-block-editable']
 });
  
// Add a listener to check for any querystring changes that include 'ljs'.
// This allows a custom language switcher to be built in the header of the site.
// To create a language switching link simply set the link URL to: '/?ljs=es', 
// where 'es' is the language code.
document.addEventListener('click', function(e) {
  var link = e.target.getAttribute && e.target.getAttribute('href');
  var requestedLang = (link || '').split('?ljs=')[1];
  if (requestedLang) {
    e.stopImmediatePropagation();
    e.preventDefault();
    var currentUrl = window.location.href.replace(/\?.*$/, '');
    window.location.href = currentUrl + '?ljs=' + requestedLang;
  }
}, true);

</script>

5) Click the “Save” button on the Squarespace Code Injection page.

Localize is now successfully installed on your Squarespace website!

Optional - Add links to switch language

You can either use the default Localize widget to allow your users to switch languages, or you can provide links for visitors to change the language of the page, as follows.

NOTE: This functionality was modified in August, 2019 after Squarespace removed the ability to add Javascript directly in the links in the header. To use the following solution, you must also update the code snippet that you previously copied into your Squarespace site. The code snippet has also been updated above in this help doc.

1) Click "Pages" in the left sidebar.

2) Click the “Add page” icon in the left sidebar,

3) Click the "Link" icon in the pop out menu.

4) A "Configure link" window will appear.

Enter the name of the language you want to translate your website to in the "Link Title" field.

5) Next, copy and paste the code below into the "Link" box as shown above.

Change "en" to the language code for this language.

/?ljs=en

6) Click "Save" as shown in the screenshot from step 4.

7) Reload your website.

Visit your website in a browser in your target language and refresh the page.
Localize will automatically begin to detect new content on the page.

8) Approve phrases

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

That’s it!

If you opted to use language links instead of the Localize widget, just click the links you added and you site will be instantly translated!

9) 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.

---

Need Help? Contact us for custom integration help or troubleshooting!