Creating a multilingual registration page

Please make sure you are using the latest available versions of the following modules: Registration page, Agenda, Speakers, Sponsors, and that the webapp-skeleton library is updated to the latest version. Please also make sure that these modules are updated in your workspace templates.

How does a multilingual registration page work?

If you have a multilingual audience/event you can now set up a fully multilingual registration page.

When multiple languages are configured in your registration page, registrants can view the registration page in any of the languages that you configure.

This is what a registrant will see:

• Registrant’s default browser language matches one of your translations?
  Great, they will see the registration page in that language.
  
  
• Registrant’s default browser language doesn’t match any of your translations?
  No problem, they will see the registration page in your workspace default language.
  
  
• Registrant wants to see the registration page in a different language than what they landed on? All good, they can pick one of your translations from the landing page and view the page in that language.

Please note that currently multilingual registration pages are not supported when the registration page is embedded on another website.

Requisites for setting up a multilingual registration page

In order to be able to configure your registration page as multilingual, you will first need to make sure that:

• You are using the latest versions of the following modules in your workspace by updating them in the Marketplace: Registration page, Agenda, Speakers, Sponsors.
• The webapp-skeleton library is updated to the latest version in your workspace. This can be done via the Marketplace > Installed modules > Libraries tab.
• You have ALL the registration page languages set up in your workspace settings.
• You have all the registration page content translated according to our recommended step-by-step guide.

How does a multilingual registration page look?

Example of a registration page with multiple languages available, on desktop:

 

Example of a registration page with multiple languages available, on mobile:

Recommended step-by-step guide when translating a registration page

To ensure that all the content in the registration page is fully translated into all the necessary languages, we recommend that you follow the below steps:

1. Check that your workspace is configured as multilingual, with ALL the languages you will need.
2. Create any additional (custom) metadata that you will use for the registration page, via the metadata manager.
3. Translate any “translatable fields” that are located in the sessions, speakers, sponsors, and that will be used in the registration page only.
4. Follow the instructions in the article below to translate all content in the registration page:
   - Translate the registration landing page, pre-registration page, and registration forms.
   - Translate the app and registration page header and footer (if relevant).
   - Translate the registration landing page footer in the design section of the registration page (if relevant).
5. Make sure all the translation keys present in the workspace are translated, via the Translation manager. You can export all the translation strings in an Excel file, translate the strings into the necessary languages, and then re-upload the translations. More information

Tip: If you discover any onscreen text in your registration page that is not being translated properly, you can follow the guidelines in the How to identify the translation key for an onscreen text in the registration page section below to translate it.

How can I set up my registration in multiple languages?

Please refer to the requisites listed above, and make sure they are applied before adding languages to your registration page.

Please also make sure that you follow the step-by-step approach that is provided above to ensure that the registration page is fully translated.

Important: As you follow the steps below to add translations to the descriptions in the agenda sessions, sponsors (and sponsor levels), and speakers, these translations are applied only to these items visible on the registration page, and not in the app itself. The translations in the app have their own dedicated translation keys, and the app always uses the device's default language.

Note: Only text, text-multiline, and HTML field-kind metadata are translatable. You can also edit the information that is displayed on the registration page via the representation in the metadata manager.

Adding translations for the agenda session information visible in the registration page

When you include agenda sessions in your registration page, the information that pertains to the sessions and that is displayed there can also be translated.

This is done via the individual session details pages in Backstage:

Here you can see that the Title and Description fields are marked as "Translatable field":

Once the translations are added, hit Save.

Adding translations for the speaker information visible in the registration page

When you include speakers in your registration page, the information that pertains to the speakers and that is displayed there can also be translated.

This is done via the individual speaker details pages in Backstage:

Here you can see the fields that you can add translations for, that are marked as "Translatable field":

Once the translations are added, hit Save.

Adding translations for the sponsor information visible in the registration page

Translating the sponsor information

When you include sponsors in your registration page, the information that pertains to the sponsors and that is displayed there can also be translated. This includes the sponsor levels (if applicable).

This is done via the individual sponsor details pages in Backstage:

Here you can see the fields that you can add translations for, that are marked as "Translatable field":

Once the translations are added, hit Save.

Translating the sponsor level name

When your sponsors have assigned sponsor levels, the sponsor level name can also be translated.

This is done via the Sponsor level details in Backstage, where you will see a language selector dropdown that you can use to select the language and add the relevant translations for the sponsor level name:

Adding translations for the landing page

To provide your registrants with a glimpse of what they can expect at your event, and encourage them to register, you can add multiple sections with information on the registration landing page.

This can include text sections that contain images that provide a welcome message or the event details, as well as the agenda sessions, speakers, and the sponsors of your choosing (this information comes directly from the workspace which you would have translated already, you do not need to complete it again).

You can add translations for each of these sections in the landing page:

• Access your registration setup page in the workspace, and go to the Page builder section. Here you will see a Language section that contains a language selector dropdown. In the language selector, the default language is selected. In this case it is English:
  
  
  
• Select the language that you want to translate to from the language selector. Now proceed and add the translations for each of the sections present in the registration page:
  
  Remember to translate the section headers too.

The actual content that is added in the registration landing page (the descriptions, event details, etc.) is always the same for all languages. For example, deleting a specific section here while you have "English" selected as the language will delete this same section for all the other languages. You cannot add or delete a specific section for just one language.

Adding translations for the pre-registration page

You can add a pre-registration screen that will appear as the first thing that the registrant will see when they try to access the registration page, before the landing page. It can be used to share or confirm important information with the registrant before they can proceed to the actual registration page.

Translate this information via the pre-registration page setup screen:

Note: The labels for the primary and secondary buttons can be edited in the translations manager under the section "Registration / Actions". The keys are "warning_wall_accept" and "warning_wall_reject". The primary button directs attendees to the registration page, while the secondary button's destination site can be customized using the Secondary button destination URL field.

Adding translations to form elements: descriptions and session registration sections

In the registration page, after completing the landing page, registrants can access the registration forms.

Review/add translations for the metadata that you choose to use in your registrations form, via the translation manager in the workspace settings.

When using "Descriptions" and "Session registration" in your form, you must also translate this content and can do so directly in the Description and Session registration setup screens:

Adding and translating a description:

Adding and translating a session registration:

Adding translations for the header and footer visible in the registration page

If you are using a header and footer for the event app, then it will always be visible by default in the registration pages and forms.

You can translate it via the header and footer configuration page in Backstage:

In the example above we have shown how this is done for the header. To add translations for the footer, please follow the exact same approach via the Footer tab.

Adding translations for the landing page footer

If your registration landing page uses a footer that contains text that needs to be translated, you can add the translations for it via the Design section of the registration page:

How to identify the translation key for an onscreen text in the registration page

Beyond the translatable text that we have discussed in the previous sections of this article, in the registration page, unique translation keys are assigned to the core text that is visible in the registration page.

This text should all be translated after following the recommended step-by-step guide described above. If you notice any missing translations in the registration page, you can identify the corresponding unique translation key in order to add the missing translation via the translations manager.

This is done by:

1. Opening the registration page in your browser (just as if you were previewing or accessing the registration page), and by adding "?i18n=true" to the registration page URL.
   This will replace all the text visible on the screen and replace it with their unique corresponding translation keys:
   
2. The unique translation keys can now be edited to add any necessary translations. This is done via the Settings > Translations section in the workspace in Backstage.
   Here you can enter the exact registration page translation key that you are looking for, using the search bar (1), and find it in the list (2).
   Next, select the translation key in the list. The existing translations for the key will appear, per language:If needed you can edit the existing translations (here there is one in English) (3), or you can add new translations (4) via the Add a language button:
   To add a language and the translation, choose the language, complete the field with the correct translation for that language, and click Save this item.

If when searching, you notice that a translation key does not exist there, you can add it. This is done by clicking on the + Add a new translation key button:

Here you can choose a unique translation key, and add any onscreen text that will be associated with it, in the languages that are needed.

Make sure that you always add the correct onscreen text in the correct language fields. For example, the "EN" field should only ever contain text that is in English, and the "FR" field should only ever contain text that is in French.