Square Online - Integration / Setup

This article explains how to setup Weglot to make your Square website multilingual.

1. Create an account on Weglot (~ 1 minute)

This account is where you’ll be able to view and manage all of your translations. Simply create a Weglot account here.

**If you install Weglot from App Marketplace, this step may have already been completed.

2. Create your project

After you validate the email, you will arrive on the setup page of Weglot.

Enter your "Project Name" and "Website Technology" (Square Online) information for your website and click on Next.

3. Setup (Choose your languages)

After you created your project, you will arrive on the getting started page of Weglot.
On the first step, select the original language of your website (the current language of your website) and the languages you want to translate into.

In this example, the original language of the website is English and the translated language is French.

Click "Next".

4. Add the Weglot snippet

Finally, you will see the Javascript snippet code to include in your website.

It’s quick and easy, you just need to follow the steps below:

Go to your Square Online Dashboard, then click on "Settings" > "Tracking Tools":

In the "Add custom header code" section, click on "Add new code".
"Custom code name" field: here name the custom code “Weglot”.
"Custom code" box: here copy-paste the JavaScript snippet provided to you on your Weglot account.
"Where would you like to place this code?": select <head> for the placement.

Finally, click on "Save".

5. Check the Weglot snippet implementation

Go to your website, and you’ll see the language switcher button appear at the very bottom right. You can try changing the language, and you’ll see your translated pages:

6. Final step

In this final step, you'll add Square Online dynamic elements. These elements will help to dynamically translate the dynamic content on your website.

Go to your Weglot Dashboard > “Settings”, and copy-paste the two CSS selectors code below in the "Dynamic elements" box:

.w-wrapper
.w-container

Finished! You can now manually edit all of your translations via your Weglot Dashboard > "Translations” tab on the menu bar.