First create a custom theme. Even if you don’t intend to customize your theme, you need to create a custom theme in order to add the language toggle to the front facing site. The easiest way to create a custom theme is to select a theme that you already like and then clone it.  

Under Website > Theme, choose “New custom theme” and have it clone your current theme.

Do all of the customization that you want to the theme. Any changes you make after you clone this theme and start translating it will be twice as much work so I recommend you go crazy now.

One bit of customization to do now: adding the language toggle. You can put the language toggle wherever you like on your front facing website. Below, I am showing how to put it into the main top navigation of your website.  

Within Theme > Templates , find:

“_nav.html” and edit it.  

Just before...

</ul> </nav>

lines and just after

{% endfor %}

...insert this code:

<li class="nodrop">

<a href="http://FrenchVersionOfYourSite.nationbuilder.com{{ page.url }}">Français</a>

</li>

The important thing here is the HTML href attribute - this is telling the English site that you want a link it to the same page on the French site.

The first part of that href should be replaced with the actual host/domain name of the French version of your site. Within you nation, it will be the website slug followed by a hyphen followed by your nation name.

Example:

<a href= "http://FrenchVersionOfYourSite.nationbuilder.com{{ page.url }}">French</a>

If you’re using a custom domain, check out this helpful FAQ and decide whether to use two different domain names or two subdomains of the same domain.

The second part of the url is {{ page.url }}. This is a variable that will contain a forward slash and the slug of that page. If you assign the same slug to the same content in different languages, then someone following that link should go to the corresponding page in the other language.

Now would be a good time to edit:

page_not_found.html template under Current custom theme > Templates

Just to make sure that people who follow a language change link to a missing page can find their way again.

When your theme is the way you like it, it’s time to create a new site, of the same type as the first one. In this case I am creating a French site. Go to Website > +Add new site. 

Once the site is created, switch your French site to the custom theme we just finished creating. Click on “Switch to a custom theme” and select the theme of the English site.

We don’t want the two sites to have the same theme, we are just using the English theme as a starting point. Immediately click on “New custom theme” before you edit anything, and clone that English theme and call it a French theme.

Now comes to all translating we need to do.

Under “Templates”, “Email  autoresponses” and “Email notifications” there are many different files. Examine them one by one for text, which will mostly show up in white in NationBuilder’s built-in editor. In actual fact the majority of files don’t have any text that needs translating, or won’t be used in your site, but it’s worth the extra minutes to check them all.

Pro tip: you can carefully use the machine translation engines of Google or Bing on the entire file. These engines will generally preserve the html code, but they do a poor job preserving the Liquid syntax, the things in curly brackets. Anything in curly brackets will have to go back to the way it was originally.

Start with the “_nav.html” file and make this site’s copy of the language switch that you had inserted in the other theme’s template point back to the English site by changing the domain name and the name of the language.

Next, edit the “layout.html” file.  In the “<html” tag, change

xml:lang="en" lang="en"

from “en” to the standard language code for your language.  If the lang attributes aren’t there, add them. This will change the language of the Twitter widgets -- the Twitter FAQ lists currently supported language codes.  It will also allow you to use the :lang(nn) pseudo-class in css style sheets.

In the same file, change

{{ content_for_footer }}

to

{{ content_for_footer | replace: 'en_US', 'nn_NN' }}

Where nn_NN is the supported Facebook locale.  Facebook maintains a Facebook Locales XML file listing supported locales. 

Next, go to Website > Pages and check every page that is there, to provide translations for the pages that you want to keep.

For each of the pages, go through:

• Settings – Page settings:
• Change the Name, Title, Headline, tags  
• Do NOT change the slug
• Reformat the date to the right language
• For the ones that have subpages, repeat for subpages
• Some page types have extra settings that sometimes contain text

Settings – SEO:

• Change the Title, Headline, Excerpt (if not already done)
• Do NOT change the slug
• Settings – Social media:
• Change the Default post (if not already done)

Content:

• Change Content and excerpt

Later, when you create new pages on the English site, you will have to go through a similar process to recreate similar pages on the new site, remembering that the slug on the different language version should be the same. However, unlike the theme files, pages are not copied over automatically.  

If your original site already has some content and you want to copy the site’s content as well as the theme, then before you create the second language site, on the English site go to

Site settings > Sharing, check “Share this site”

Then fill in the name of the site (for your reference), a short description, and enter your own nation’s name under “Share with nation." When you create a new site for the other language as we did above, select the custom site type you just created.

For the control panel, you can change the default language by going to Settings > Defaults > Basic, but this affects the entire nation, not just one web site or person.

Other things to consider: you will also have to determine whether you want to have one or two broadcasters, whether to connect them to the same Facebook and Twitter accounts or separate ones, whether to make bilingual posts on social media or separate ones, and whether to tag people according to the language of the site they interacted with.

You should be well on your way to creating a multilingual nation!