Support

IMPORTANT UPDATE: (7th July 2017)

It has come to my attention that the [email protected] email address which was creating tickets in Jira was not notifying me of any emails. I am in the process of modifying the support process, as outlined in this article here. The Q&A system will be replaced by a better ticketing + FAQ system (avoids many duplicate Q&As). This ticketing system also replaces Jira. It will be activated over the coming days. In the meantime, any support requests, you can contact me directly on [email protected]

Support Alteration

Multilingualizer Support

Below you will find answers to all of your Multilingualizer questions as well as videos covering various common customization options. Please remember to check out our three quick install demonstration videos on the homepage.

If you don’t find the answer to your questions here, check out our Q & A section where you can ask questions and we’ll respond right away.

For videos about the Multilingualizer, check out our Multilingualizer playlist.

How the Multilingualizer Works

You write the version of text you want in one language, then you write the second language variation and so on, for however many languages you wish. The Multilingualizer removes versions of your text at display time so your users only see the language they wish.

 

How to Install the Multilingualizer

A configuration tool and full installation instructions are provided in your my-account area.

 

How to enter translations

Start your text block with …. (4 fullstops) on its own line (see image below) then your first language text then separate that with .. (2 fullstops) then your 2nd language text and so on. Once you’ve completed all translations for this block, close the block with …. (final 4 fullstops).

For example, if you are running English and Greek then for the text ‘Shipping’ you would enter the following text block:

....
Shipping
..
ΕΞΟΔΑ ΑΠΟΣΤΟΛΗΣ
....

Text blocks can be as long or as short as you need.

The Multilingualizer works for ALL languages.

entering translations11 1

How to display different images in each language

Add a caption or Alt text to the image and enter the text [english] as your caption and the Multilingualizer will only display that image for English users. Similarly, [french], [spanish], [italian], [german] etc.

Language Selector Configuration

You can leave it up the Multilingualizer to detect the language of the user, if you wish, or you can add a language selector to allow your users to choose. There are two options.

Option 1 – add the language selector to your existing menu system

  1. Click the button in your website editor to add a LINK/HYPERLINK/URL to your menu
  2. Enter a text name for your first language selector, e.g. English or EN and then instead of a URL insert the following:
    javascript:languageClicked(0);
  3. Repeat for your 2nd language – add a link/hyperlink/url, enter the text for the 2nd language selector e.g. FR except this time instead of the URL insert the following:
    javascript:languageClicked(1);

Repeat the above for all your languages, increasing the number inside the brackets by 1 for each extra language you have.

Example Adding a Link in Squarespace

configure-language-selector-menu

Option 2 – add a floating language selector

Copy and paste the code from the Language Selector Code box into your footer.

In Squarespace, Advanced -> Settings -> Code Injection -> Footer box.

In Shopify, Click Themes, Click the … button, click Edit HTML/CSS, click theme.liquid, scroll to the bottom and paste the code before the closing </body> tag.

In other platforms, paste the code before the closing </body> tag.

You can customize the appearance of this floating language selector by using the guides below.

Language Selector Code box

<div class="languagewrapper">
<div class="language"><a href="javascript:void(0);" onclick="languageClicked(0);">English</a></div>
<div class="language"><a href="javascript:void(0);" onclick="languageClicked(1);">Français</a></div>
</div>
<style>
.languagewrapper {
position:fixed;
top:0;
right:0;
z-index:999999;
background-color: black;
padding: 2px;
}
.languagewrapper .language {
float:left;
}
.languagewrapper .language {
display:block;
}
.languagewrapper .language.active {
display:block;
}
.languagewrapper .language.active a {
color:white;
font-weight:bold;
}
.languagewrapper .language a {
padding:2px 5px;
text-decoration:none;
color:white;
}
</style>

Use flags instead of text in the floating language selector

Using the floating language selector, you can replace the text with a flag image instead to allow your users to click flags instead of text.

You’ll need the URLs for your flag images – once you have these, replace the png URLs below with your own flag image URLs.

Then paste this code into Squarespace, Advanced -> Settings -> Code Injection -> Footer box.

Note: The code below forces flag images to a height of 30px (pixels). You can edit this to 40px or whatever you like if you want them to be larger. You can use any image from anywhere.

<div class="languagewrapper">
<div class="language"><a href="#" onclick="languageClicked(0);"><img src="http://yourdomain.com/englishflag.png" /></a></div>
<div class="language"><a href="#" onclick="languageClicked(1);"><img src="http://yourdomain.com/frenchflag.png" /></a></div>
</div>
<style>
.languagewrapper {
position:fixed;
top:0;
right:0;
z-index:999999;
background-color: black;
padding: 2px;
}
.languagewrapper .language img {
height:30px;
}
.languagewrapper .language {
float:left;
}
.languagewrapper .language {
display:block;
}
.languagewrapper .language.active {
display:block;
}
.languagewrapper .language.active a {
color:white;
font-weight:bold;
}
.languagewrapper .language a {
padding:2px 5px;
text-decoration:none;
color:white;
}
</style>

Change language AND change page

Create a URL link in your menu and enter the following instead of the URL:

javascript:changeLanguageAndMove(0, '/');

This will switch to language 0 (whichever you have set as language 0) and move to your home page.

or

javascript:changeLanguageAndMove(1, '/specific-page/');

This will switch to language 1 (whichever you’ve set as language 1) and move to /specific-page/ on your website.

Other appearance customizations

Locate the <style> tags in your floating language selector and you can edit the top: value, the background-color: value, the color: value to edit the appearance of the Multilingualizer.

Example changes to the style to alter appearance/location of the language selector:

(to move the language selector you need only edit the .languageselector CSS)

TOP LEFT (default)
.languagewrapper {
position:fixed;
top:0;
left:0;
z-index:999999;
background-color: black;
padding: 2px;
}
TOP RIGHT
.languagewrapper {
position:fixed;
top:0;
right:0;
z-index:999999;
background-color: black;
padding: 2px;
}

TOP LEFT BUT NOT STICKY
.languagewrapper {
position:absolute;
top:0;
left:0;
z-index:999999;
background-color: black;
padding: 2px;
}
TOP RIGHT BUT NOT STICKY
.languagewrapper {
position:absolute;
top:0;
right:0;
z-index:999999;
background-color: black;
padding: 2px;
}

You may edit the other CSS to alter the appearance – e.g. color, background color etc.

Translating the hard-coded text in Squarespace

If you are using Shopify, you get access to the underlying theme files to edit the translations and can use the Multilingualizer formatting to make these pieces of text bilingual/multilingual.

With Squarespace templates, you *can* get access to these files as a developer but it’s non-trivial. There are hard-coded pieces of text such as error-messages on forms, placeholders for search boxes, form titles etc.

To translate these pieces of text, please add the Squarespace Extensions file to your footer. You can find the extensions file here:

http://www.multilingualizer.com/mlcode/squarespace.extension.english.french.txt

Note: The above extensions file includes translations for most Squarespace templates from English to French. For other languages, you will need to modify the translations yourself. If you are using English and French, you can just paste the code above into your footer (below any other scripts you may already have).

Finally – you can extend the hard-coded translations script yourself if you find your theme has extra pieces of english-only text we’ve missed.

In the Squarespace extensions script, on the line following the last line which begins like this:

jQuery('*').replaceText(.......)

Add a line like the following:

jQuery('*').replaceText(escapeRegExp("Enter hardcoded text to translate here"), "Enter translation here");

You can repeat as necessary for any other pieces of hard-coded text that are missing from your specific theme.

Troubleshooting Guide

If you have any difficulties, check these troubleshooting tips to get the new multilingual features of your site working.

  • Ensure you have the script installed as per the instructions in your /my-account/ page
  • If you are using Squarespace, the translation is switched off when you are in the editor. Log out and you’ll see it working.
  • Cover pages in Squarespace are treated as completely separate pages and don’t have a copy of the footer code. Please click the cogwheel for the cover page->advanced then paste the footer.txt file into your cover page to use the Multilingualizer on them
  • If the translations seem to stop working at some point down any of your pages, it means you are missing a closing language marker (the 4 dots). I am working on a visual editor to avoid the necessity to deal with these language markers.
  • Another thing which can interfere with Multilingualizer’s code is poorly named images. Please ensure that image file names don’t have double dots anywhere – a good filenaming policy is to avoid spaces and any special characters except maybe _ and -, and only one dot at the end to determine the filetype extension.
  • Bullet points issue – There is currently a known issue with the bullet lists. For example, if you enter:
    ….
    * Bullet 1 in english
    * Bullet 2 in english
    ..
    * Bullet 1 en francais
    * Bullet 2 en francais
    ….

    You may get extra spacing appearing when you switch to French (theme dependent). To workaround this issue, please translate bullet points line by line as follows:
    * ….Bullet 1 in english..Bullet 1 en francais….
    * ….Bullet 2 in english..Bullet 2 en francais….
  • Copy/pasting text from Word can result in corrupted HTML which prevents the Multilingualizer doing its job. In Squarespace there is a button to remove formatting from your text, so try this if you are having issues. Another tip here is if you hold CTRL+SHIFT+V instead of just CTRL+V it will paste your text without formatting. Another way is to paste your text into a plain-text editor then copy it from there to paste back into your website. Just don’t paste into your website directly from Word. Note: doing this will cause all kinds of other issues, like irregular fonts, colours, sizes etc so it’s not just the Multilingualizer you’re affecting, it’s the look of your entire site.
  • Spacing issues – if you see spaces appearing in your text in some languages, please ensure you have been using full RETURNS. What we mean by that is don’t hit CTRL+ENTER when making a new line. This matters especially for the 4-2-4 dot notation. Please ensure you hit normal ENTER (without CTRL or COMMAND) on the line before the 4 dots and then at the end of the 4 dots. This makes your web editor insert a proper paragraph rather than <br> tags. To summarise – the …. 4 dots and .. 2 dots need to be in their own paragraph when doing block text translation.

Squarespace Issues

  • A very frequent issue for Squarespace users which breaks Multilingualizer and possibly other parts of the websites is corrupted HTML. The main issue which can create this is the copy/paste of phantom text from an editor such as Microsoft Word. Before you contact customer support, please have a very careful look around your code in order to determine if that is the issue. Removing this corrupted HTML should resolve your problems right away, if this is the case with you.

Other Guides

We are in the process of merging the old Q&A system into a better guide system so we don’t have the same questions asked over and over.

In the meantime, you can contact us using [email protected] and you can find additional guides below:

Optimising SEO with the Multilingualizer