Most bilingual sites built on NationBuilder have a full site for each language. This is easy to manage content on that putting all pages on one site.

However, when you do this, signup activity data is not shared across the sites. This means that the petition signature counts will be only for each language.

So for a single campaign, you may prefer to run the petition pages for both languages on one site. This will allow you both pages to share a combined signature count.

An example site

This example is using two languages. If you need extra languages, read the two language example and see the ‘more languages’ section at the end.

You can see an example website here. The site is in English and Cymraeg. You can switch language with the link in the right end of the top nav.

The petition page is available in both languages. Whichever language you sign the page on, the total number of signers increases on both pages. The site is live, so feel you can sign either version to see this in action.

This guide details how it works. Rather than manually make all the edits, you can download the edited theme files that work with our bootstrap theme here.

Create and tag your pages

First, you need to create a petition page in each of your languages. Then you need to tag the pages. These tags look like this:

page_lang_en or page_lang_cy to set the language of the page
Matching_slug_slug where the second italicized ‘slug’ is the slug of the page with the same content in the other language.

In our example, we are using English and Cymraeg. You will need to change the language codes to match those you are using.

Add a _lang_var.html theme file

This file sets variables for the language, based on the tags you apply to the pages. The code in the file is this:

{% for tag in page.tags %}
{% if tag.name contains "page_lang" %}
{% capture lang %}{{ tag.name | remove: "page_lang_" }}{% endcapture %}
{% endif %}
{% endfor %}

{% for tag in page.tags %}
{% if tag.name contains "matching_slug" %}
{% capture flip_slug %}{{ tag.name | remove: "matching_slug_" }}{% endcapture %}
{% endif %}
{% endfor %}

This file needs to be called in both the layout file and the page templates using this:

    {% include "lang_var" %}

Edit the _nav.html file

As your site will have duplicate pages for each content (the petition, home etc), you will want to restrict it to only show those where the language match. So you need to add code to the _nav.html file, like this:

{% for child in site.root_nav_pages %}
{% for tag in child.tags %}
{% if tag.name contains "page_lang" %}
{% capture child_lang %}{{ tag.name | remove: "page_lang_" }}{% endcapture %}
{% endif %}
{% endfor %}
{% if child_lang == lang %}

This goes at the start of the file, and means the nav item will only be shown if it's language matches that of the current page.

Then at the end of the file you can add a link to switch language. Again, this depends on the current language page. In our example, it looks like this:

<li class="nav-item">
<a href="{{ site.full_url }}{{ flip_slug }}" class="nav-link" >{% if lang == "en" %} Cymraeg {% else %} English {% endif %}</a>
</li>  
</ul>

Edit pages_show_petition.html

The petition page (and any other page you wish to include on the site) will need to be translated.

Rather than translating by replacement, you need to keep both options.

You can do this by using ‘if’ conditionals on the text sections. Here’s an example from the template:

{% if lang == "en" %}
  <h3>Thank you for signing!</h3>
{% else %}
 <h3>Diolch i llofnod!</h3>
{% endif %}

You will need to do this throughout the template so that the correct language string shows. You will need to do the same for buttons, like this:

{% if lang == "en" %}  
{% capture signature_name %}Add {{ page.petition.signature_name }}{% endcapture %}
{% else %}
{% capture signature_name %}Adio {{ page.petition.signature_name }}{% endcapture %}
{% endif %} 
{% submit_tag signature_name, class:"btn btn-primary submit-button" %}

The final thing to add is the code which pulls the number of signatures from the other petition page. This is done via another partial file - called _petition_number.html. The file contains just one line to grab the number:

{% assign other_lang_sig_count = page.petition.signatures_count | times: 1 %}

In the petition page template file this code calls that file and then adds the number to the total on that page:

{% assign this_sig_count = page.petition.signatures_count | times: 1 %}
{% subpage flip_slug with "petition_number" %}
{% assign total_count = this_sig_count | plus: other_lang_sig_count %}
<div class="lead">
 {{ total_count | number_with_commas }} {{ page.petition.signature_name }}
</div>

That's it

You now have a multi language microsite. You can set each page up with it's own settings (autoresponse, tags, paths etc) that relate to the language they signed in.

More than two languages

If you want to use this system with more than two languages it becomes more complicated.

First, the matching slugs would need to be defined for each language. So if we added Dutch to our language options, you might have an English petition page that would be tagged like this:

matching_slug_cy_deiseb

matching_slug_nl_verzoekschrift

Each page would need more than one flip slug variable set in the _lang_var.html file

The code to define the flip slugs in each language would look like this:

{% for tag in page.tags %}
{% if tag.name contains "matching_slug_cy" %}
{% capture flip_slug_cy %}{{ tag.name | remove: "matching_slug_cy_" }}{% endcapture %}
{% endif %}
{% if tag.name contains "matching_slug_en" %}
{% capture flip_slug_en %}{{ tag.name | remove: "matching_slug_en_" }}{% endcapture %}
{% endif %}
{% if tag.name contains "matching_slug_nl" %}
{% capture flip_slug_nl %}{{ tag.name | remove: "matching_slug_nl_" }}{% endcapture %}
{% endif %}
{% endfor %}

You can, of course, add as many options for each language there. For every language you add, you need to repeat the for loop and change the two-letter language code in the if and capture conditionals, and in the filter on the tag.name variable.

You would also then need to modify the math code on the petition to add the signers in each language, like this:

{% assign total_count = page.petition.signatures_count | times: 1 %}
{% unless lang == "cy" %}
{% subpage flip_slug_cy with "petition_number" %}
{% assign total_count = total_count | plus: other_lang_sig_count %}
{% endunless %}
{% unless lang == "nl" %}
{% subpage flip_slug_nl with "petition_number" %}
{% assign total_count = total_count | plus: other_lang_sig_count %}
{% endunless %}
{% unless lang == "en" %}
{% subpage flip_slug_en with "petition_number" %}
{% assign total_count = total_count | plus: other_lang_sig_count %}
{% endunless %}
 <div class="lead">
  {{ total_count | number_with_commas }} {{ page.petition.signature_name }}
 </div>

Again, you need to make it do the math for each language. So you need to copy the four lines of ‘unless’ block for each language you add. You can then change the language code in the unless conditional and subpage variable. So for each language, you would add this (where XX is your language code):

{% unless lang == "XX" %}
{% subpage flip_slug_XX with "petition_number" %}
{% assign total_count = total_count | plus: other_lang_sig_count %}
{% endunless %}

Finally, your translation edits in the petition template would look like this:

{% if lang == "en" %}
      <h3>Thank you for signing!</h3>
{% elsif lang == "nl" %}
      <h3>Bedankt voor het ondertekenen!</h3>
{% else %}
      <h3>Diolch i Llofnod!</h3>
{% endif %}

For the translation liquid, the last language after the {% else %} will be displayed if the page has no language set by a tag (though that shouldn’t happen). So you should make that be your fallback language, ie the one that is most widely used or accepted among your community.

If you are running this with a lot of languages, you could replace the text strings with variables and then use a partial file to define those for each language.

In this case, you would replace the white text in the petition template with variables. So the above example would look like this:

<h3>{{ thank_you_text}}</h3>

You can do this with all the text, so change this:

  <label for="petition_signature_content">Change your comment</label>

To this:

  <label for="petition_signature_content">{{ change_comment_text }}</label>

Then in your partial file, you would define all the variables based on the page language, like this:

{% if lang == "en" %}
{% capture thank_you_text %}Thank you for signing!{% endcapture %}
{% capture change_comment_text %}Change your comment{% endcapture %}
{% elsif lang == "nl" %}
{% capture thank_you_text %}Bedankt voor het ondertekenen!{% endcapture %}      
{% capture change_comment_text %}Wijzig uw opmerking{% endcapture %}
{% else %}
{% capture thank_you_text %}Diolch i Llofnod!{% endcapture %}            
{% capture change_comment_text %}Newidwch eich sylw{% endcapture %}
{% endif %}

You would need to call this file at the start of the page template. So it would start like this:

 {% include "lang_var" %}
 {% include "translations" %}

Create and edit webpages