Polyflow - Overview

Polyflow is a tool created exclusively for Webflow, with which you can scale your website internationally, manage text and image translations, urls, display customised content based on the user's location and much more.

How it works?

  • 1

    Create your account in Polyflow.

  • 2

    Install our browser extension in your Chrome browser.

  • 3

    Syncronize your Webflow project with Polyflow.

  • 4

    Create alternatives for your website pages, translate text and images, and customise urls.

  • 5

    Set up your custom domain, and publish the project!

Step 1

Create your account in Polyflow

Throughout this guide, you will find the basic principles for the Polyflow platform.
First of all, create your Polyflow account (it’s free!)  

After clicking on the Sing Up button, you will receive an email to the account you've provided, which will contain the activation link for your account. Sometimes this email is sent to the Spam folder. Check it out in case you cannot find it! Once the account is activated, you can access the platform.

Now that you have access to Polyflow, the first step you need to take is installing our browser extension. Please, check the instructions below.

Step 2

Install our Chrome browser extension

2.1. Download & install Google Chrome browser

To use Polyflow you need to have the Chrome browser installed in your computer and also add our extension to the browser. In this link you will find the instructions to install the Google Chrome browser.
Once you have installed it you will have to add the Polyflow extension to Chrome.


2.2. Install Polyflow browser extension

Add our extension to your Chrome browser, you can find it here. Open the Extensions by clicking the puzzle icon next to the three-dot icon. Click the extension pushpin icon to pin the extension to Chrome and start using Polyflow.

Step 3

Sync your Webflow project with Polyflow

Once you have created your Polyflow account and installed our extension, you will need to open your Webflow project and make sure that:

  • You have set your site’s language code in Webflow. To do this you have to go to General Settings > Localization and include the ISO code of the default language in the 'Language code' field. Here you have a list of language ISO codes.

  • Your project is published so that it can be synchronised with Polyflow.

Then, you need to open your Webflow project in designer mode, click on the extension and synchronise by clicking on the button that appears in the extension dialogue ('Sync this project now' button).

Once you have synchronized your project, Polyflow will open in a new browser tab
and you will be able to manage the content of your project from Polyflow, creating variants for different languages.


What happens if I modify the content in my Webflow project?

If you modify your project in Webflow, you will simply need to re-synchronise it to update the content in Polyflow and manage it.

Step 4

Create alternatives for your web pages

Once you have synchronised your project in Polyflow, you will see that an alternative has been automatically created with the language of your Webflow project assigned by default.You can create as many alternatives as languages you want your page to have and in each of them assign the language, customise the url and translate the contents, as well as the SEO title and description tags.

On the page of each alternative you will always have the original content (taken from your Webflow project) on the left side, and, on the right side, you can translate it for your new language version.

Step 5

How to add a language switch button?

With Polyflow you have several ways to include a language selector on your website, automatically or customised. Below are instructions on how to include the language selector of your choice.

5.1. Polyflow automatic language selector

Polyflow offers you the possibility to automatically have a language selector on your website, just activate it in the project settings, selecting the default option.

5.2. Language selector buttons

To add a language selector as buttons, you must to select the "disabled" option in the language selector in the Polyflow app, then, you must create each button and add the following parameter in the URL field, in the link settings:/__lang/[LANG ISO CODE].

For example, if you want to link the English version you must add this in the URL field:/__lang/enAlso, if you want to hide that button in the corresponding language, you will have to add a custom Polyflow attribute, "polyflow-only" = [ISO CODE], to show the button only in the correct language version.

5.3. Custom language selector

To add a custom selector, you need to create an HTML structure with specific attributes for the script to locate the elements that will make up the language selector.

One element has to be the item that will be repeated with the various languages, i.e. in the case of a list <ul> it would be the <li> element, but it can be any other element. This will have the attribute data-polyflow-switcher="alternative".

The next element will be the <a> link, this could be the previous element itself (for example in the case of having a list of <a> inside a <div> container) or else it will have to be inside the previous element with the attribute.

To specify where to display the language name and/or language code, two placeholders will be used which will have to be placed inside the <a> element (at least one of the two will have to be used).

  __LOCALE__

  __LANGUAGE__

Optionally you can display the selected language in a container that has the attribute data-polyflow-switcher="current", for example in case you want to create a button that opens the dropdown.
Inside, the same placeholders as before will be used to indicate where to display the data for the current language.

Optionally the element marked with the attribute data-polyflow-switcher="alternative" can have the attribute data-polyflow-switcher-active-class with the value of the css class that you want to use in the active item at the moment.

Examples:

Example with a list item:

<div>

  <button data-polyflow-switcher="current">

    __LANGUAGE__ __LOCALE__

  </button>

  <ul>

    <li data-polyflow-switcher="alternative" data-polyflow-switcher-active-class="active">

      <a href="">

        __LOCALE__

        __LANGUAGE__

      </a>

           </li>

  </ul>

</div>

Example with a <div> container and inside the links directly:

<div>

  <button data-polyflow-switcher="current">

    __LOCALE__

    __LANGUAGE__

  </button>

  <div>

    <a href="" data-polyflow-switcher="alternative" data-polyflow-switcher-active-class="active">

      __LOCALE__

      __LANGUAGE__

    </a>

  </div>

</div>

Step 6

Add a custom domain & publish your project

To add a custom domain, go to the project settings in your Polyflow project.


Then click on "Add domain" and enter your custom domain. After that click on "details" and you will get instructions on how to set up the DNS records at your domain register. It can take up to 48 hours for the domain to be ready, you can check the status by clicking on "check status".

You can also delete the domain to add another one.

How to translate CMS content

At the moment we cannot provide content management for Webflow collections, but it is possible to translate the content coming from the collections and display it in the correct language through our attributes.


1. First of all we need to add to the collection an Options field with the ISO codes of the different languages we need.


In this example, we have a Collection for our website FAQs, and we need to have them in English and Spanish. We are going to add an Options field to our Faqs collection with "es" and "en" options to choose.

2. Next, we will add all our faqs (in both languages) and assign each one its language in the Options field:


3. Then, we are going to create two Collection lists for Faqs collection, and we are going to Filter the items by language.


In the first list of the collection, we are going to show only the articles in English, and in the second list we are going to show only the articles in Spanish. To do this, we just need to add a Filter by the "Language" Options field.

4. Finally, we are going to add a Polyflow Custom Attribute to display each collection in the correct language on our website.


To do this, we just need to add a Custom Attribute "polyflow-only" with the ISO code of the language for each collection list.


In the collection list that includes the items filtered by the english language, let's add the following custom attribute "polyflow-only" = "en"; and in the spanish case, we are going to add "polyflow-only" = "es".


Easy!