# What is Polyflow The best tool to translate your Webflow site Polyflow is a tool created exclusively for [Webflow](http://webflow.com/), 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. Whether you are building a new web or already have millions of visitors, you can use Polyflow to: * Generate language versions of your content using folders and not subdomains. * Translate your site into multiple languages without duplicating pages. * Add an unlimited number of languages to your Webflow in a simple way. * Customize or hide content to your users based on their language. * Internationalise your site on Webflow while respecting all the SEO standards. ### Getting started resources With Polyflow, you can keep track of all your translations in one place. Nor only the single source of truth for your content, we make sure that to do it in an SEO friendly way, ensuring that the performance of your site is always optimised. Here are a few ways to get started: * Adding translation to an existing project? Jump right in with our [Quickstart Guide](https://guides.polyflow.co/). * Already have an translation app with translations? The mMgration Guide is useful if your moving your's existing translations to Polyflow.
### How it works? 1. Create your account in [Polyflow](https://app.polyflow.co/login). 2. Install[ our browser extension ](https://chrome.google.com/webstore/detail/polyflow/oodggemakpengpkkihcnmlicoiiedmmc)in your Chrome browser. 3. Send your [Webflow](http://webflow.com/) project to Polyflow. 4. Create alternatives for your website pages, translate text, images, customize urls and much more! 5. Set up your custom domain, and publish the project! Visit our [pricing page ](https://www.polyflow.co/en/pricing)to find out more about the plan that suits your needs! {% embed url="" %} # Quickstart Get up and running with webflows translations This guide will walk you through how to quickly set up and use translations in Webflow. 1. [Creating your account](#1.-creating-your-account) 2. [Install our Chrome extensión](#2.-install-our-extension) 3. [Sync your Webflow project](#3.-sync-your-webflow-project) 4. [Translate your project](#4.-translate-your-project) 5. [Publish your project](#5.-publish-your-project) ### 1. Creating your Account We recommend using a valid email address when [creating an account](https://app.polyflow.co/signup) with Polyflow and configuring the project to avoid losing access. At the moment Polyflow does not allow you to invite collaborators to your account. If you consider it important, don't hesitate to propose it for our [Roadmap](https://guides.polyflow.co/). ### 2. Install our extension To use Polyflow you need to have the Chrome browser installed in your computer and also add our extension to the browser, you can [**find it here**](https://chrome.google.com/webstore/detail/polyflow/oodggemakpengpkkihcnmlicoiiedmmc?hl=es).. Once you have installed it you will have to add the Polyflow extension to Chrome. 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. {% embed url="" %} ### 3. Sync your Webflow project Open your Webflow project in designer mode, click on the Polyflow tab in the Webflow sidebar menu, log in to your Polyflow account and send your project by clicking on the button that appears in the Polyflow tab dialogue ("Sync now" button). \ Make sure your project is published in Webflow before synchronizing it with Polyflow. {% embed url="" %} ### 4. Translate your project Once the syncronization process is finished, the project will be opened in Poliflow. The first step is to create the alternative languages for the pages, once added, we need to add all the new content in that language. {% embed url="" %} ### 5. Publish your project When the content is translated you will be able to generate a preview to review it. Once reviewed we can publish in our own domain as long as we have it configured. # Create your account Throughout this guide, you will find the basic principles for the Polyflow platform.\ First of all, [create your Polyflow account ](https://app.polyflow.co/login)(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](https://chrome.google.com/webstore/detail/polyflow/opjokcajilekgpjkcikhdfoankdjjnli). Please, **check the instructions below.** # Install our browser extension ### 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**](https://support.google.com/chrome/answer/95346?hl=en\&co=GENIE.Platform%3DDesktop\&oco=0) 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.
### In**stall Polyflow browser extension** Add our extension to your Chrome browser, you can [**find it here**](https://chrome.google.com/webstore/detail/polyflow/oodggemakpengpkkihcnmlicoiiedmmc?hl=es). 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. {% embed url="" %} # Send your project to Polyflow Once you have created your **Polyflow** account and installed our extension, you will need to open your **Webflow** project and make sure that: {% hint style="info" %} 1. 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. You can find the Webflow guide here: 2. **Your project is published** so that it can be send to Polyflow. {% endhint %} You then have to open your Webflow project in designer mode, click on the Polyflow tab in the Webflow sidebar menu, log in to your Polyflow account and send your project by clicking on the button that appears in the Polyflow tab dialogue ("Sync now" button). The process can take a few minutes, just wait for the synchronisation to finish and you will be able to manage your entire project from Polyflow! {% embed url="" %} # Create language alternatives {% embed url="" %} ### ⚠️ Component limitations when translating #### To apply text styles, you need to use rich text instead of plain text If you need to style your paragraphs (**bold, italics, line breaks...** ) you will need to implement a **"Rich Text"** element since, for now, Polyflow cannot detect styles applied to a "plain text" or paragraph element. # Add a custom domain To add a custom domain, go to the project settings in your Polyflow project. {% hint style="info" %} If you have already set up a domain in Webflow, delete the records in Webflow to continue with Polyflow {% endhint %} {% embed url="" %} 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". If you had a custom domain configured in Webflow delete it there, as you only need to have your custom domain in Polyflow. # Polyflow first use How to start translating your site in the easiest way possible {% hint style="info" %} Remember that to start working with Polyflow, you need to have created an account and have our extension installed. * [Create an account](/getting-started/create-your-account) * [Install our browser extension](/getting-started/install-our-browser-extension) {% endhint %} ### 1. Open your Webflow project Select the project you want to translate in your Webflow Dashboard
### 2. Publish your project The first step is to publish your project in Webflow, so we can get all the HTML elements. ![](https://assets.website-files.com/5e6622c5af400279c5aaae33/63932c45b61a6c6bfee2c492_webflow%20publish.png) ### 3. Sync with Polyflow Bring your impressive webflow project to polyflow by synchronizing pages, symbols and CMS collections. ### 4. Translate in Polyflow Create versions from the languages you need to add, and translate your Webflow project pages. \ ![](https://assets.website-files.com/5e6622c5af400279c5aaae33/63932ae5cea6fb3194603bcb_Translation%20changes%20and%20publish.gif) ### 5. Publish in Polyflow Once you have added all the translations you can publish, both on the main domain and on the staging domain which is used to preview how your website looks like. \
# Edit in Webflow ### 1. Edit elements in Webflow Edit all necessary elements (texts, images, style changes, etc...) ![](https://assets.website-files.com/5e6622c5af400279c5aaae33/63932b75b2d1c95f4458622f_Webflow%20changes%20and%20publish.gif) ### 2. Publish in Webflow Publish your project in Webflow, so we can get all the HTML elements. \ ![](/files/GHWNkUrBX2bPPgNFf5Vg) ### 3. Sync with Polyflow Bring your impressive webflow project to polyflow by synchronizing pages, symbols and CMS collections. \ ![](https://assets.website-files.com/5e6622c5af400279c5aaae33/63932afc3e7c3aef59f0ff7a_Sin%20t%C3%ADtulo.png) ### 4. Publish in Polyflow Once you have added all the translations you can publish, both on the main domain and on the staging domain which is used to preview how your website looks like. # Edit in Polyflow ### 1. Modify a translation If you need to modify a translation, you can do it directly in Polyflow ![](https://assets.website-files.com/5e6622c5af400279c5aaae33/63932ae5cea6fb3194603bcb_Translation%20changes%20and%20publish.gif) ### 2. Publish in Polyflow Once you have added all the translations you can publish, both on the main domain and on the staging domain which is used to preview how your website looks like.\ ![](https://assets.website-files.com/5e6622c5af400279c5aaae33/63932afc3e7c3aef59f0ff7a_Sin%20t%C3%ADtulo.png) # How to show different contents depending on the language version? The **"polyflow-only"** attribute allows you to show or hide content depending on the language version, so you can customize content for your different audiences. To show content only in one language, you just need to add the attribute **"polyflow-only"** to the section and indicate as value the ISO code of the language in which you want to show it, as you can see in the following video: {% embed url="" %} {% hint style="info" %} ISO is a standardized nomenclature used to classify languages, each language is assigned a two or three-letter lowercase abbreviation. Check out here for a list of ISO codes as you will need to use them to create your language versions: {% endhint %} So for example, if we only want to show a block of content for the English version, we will add "polyflow-only = en" to that block in the custom attributes and publish our project on Webflow. In the production version we will see that this content is only shown in English and does not appear in the other languages of our website. # 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. {% embed url="" %} Remember to select the **default option** in the language selector settings of your project.
# Language selector as buttons or links {% embed url="" %} To add a language selector as buttons or links, you must to select the **"disabled"** option in the language selector in the Polyflow app, then, you must create each button or link and add the following custom attribute to it: "**polyflow-link**" = "**\[LANG ISO CODE]"**
{% hint style="info" %} ISO is a standardized nomenclature used to classify languages, each language is assigned a two or three-letter lowercase abbreviation. Check out here for a list of ISO codes as you will need to use them to create your language versions: {% endhint %} For example, if you want to link the English version you must add the following custom attribute to the link element: **"polyflow-link" = "en"**\ Also, 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. Find [here](/language-custom-content/how-to-show-different-contents-depending-on-the-language-version) more information about our attributes, to show or hide content depending on language version. # Custom language selector {% embed url="" %} 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 \
    it would be the \
  • element, but it can be any other element. This will have the attribute **data-polyflow-switcher="alternative".** If you want the language names to be written in their corresponding language, you must also add the following attribute: **data-polyflow-switcher-lang="self".** {% hint style="info" %} If you need to hide the custom language selector on pages that do not have language alternatives, add this attribute to the div containing the entire structure: **data-polyflow-switcher="wrapper"** {% endhint %}
    The next element will be the \ link, this could be the previous element itself (for example in the case of having a list of \ inside a \
    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 \ 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: ```html ``` Example with a 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>
    # How to translate CMS content with Polyflow (step 1) In this guide we are going to show you how to translate dynamic content by duplicating the CMS items in Webflow and displaying the appropriate version with Polyflow. {% embed url="" %} 1\. First of all we need to add to the collection an **Options field "Language" with the ISO codes of the different languages in the options** we need. {% hint style="info" %} Remember: ISO is a standardized nomenclature used to classify languages, each language is assigned a two or three-letter lowercase abbreviation. Check out here for a list of ISO codes as you will need to use them to create your language versions: {% endhint %}
    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!
    ‍ # How to prepare the CMS page template for the language selector to work properly? (step 2) {% embed url="" %} # How to modify the url of your Webflow collection items (step 3) {% embed url="" %} # How to exclude contents from being sent to Polyflow {% embed url="" %} # Styles in plain text Webflow allows you to include styles within plain text from this menu:
    Webflow introduces a **span** to which it applies the style. With Polyflow it is currently **not possible to apply styles to these spans**, so if you need to add styles within text (bold, italics... ) you will have to create that text as rich text and not plain text. On the other hand, if you have for example **colour styles applied to plain text**, you can create this element in Webflow, one for each language, translate it in Webflow and apply the **"polyflow-only" attribute**. Here you can see how to use the attribute: [How to show different contents depending on the language version](/language-custom-content/how-to-show-different-contents-depending-on-the-language-version) # Country language subdirectories At the moment Polyflow only allows to have language subdirectories **per language, not per country**. Therefore, it would not be possible to have subdirectories for the English language of this type: "/en-uk/", "/en-us/" # Options field in forms Polyflow cannot translate an option field of a form, in any case, you can solve this by creating as many option fields in Webflow as languages you want to translate, and add the polyflow-only attribute for each language. Here you can find out how to use the attribute: [How to show different contents depending on the language version](/language-custom-content/how-to-show-different-contents-depending-on-the-language-version) # Multiple nested Collections on the same page If your project has nested collections, Polyflow may not be able to meet your needs, as Webflow has some limitations when it comes to displaying many collections on the same page. # Backups If you use Polyflow, and you make backups in your Webflow project, you may lose the synchronisation of the project, since Webflow modifies the identifiers of the elements in each backup. # Missing Polyflow extension If you do not see the Polyflow extension in the Webflow sidebar correctly, check that your Chrome browser is up to date. # Missing pages If after synchronising your project you can't find your new page in Polyflow, you can create it from the "Create new page" button. By clicking on this button you will be able to select the template of your new page and create it in Polyflow for translation.
    # Redirects Custom redirects cannot be included in Polyflow at this time, however, you can request that we add them in this [email](mailto:hi@polyflow.co). However, we cannot guarantee to prioritise this task.