CMS Development

thomasvbe
Contributor

Translating the subscription page (template)

SOLVE

Hi

 

We're a multi-lingual company and we're hitting the limits of translating our email subscription preferences page. We've ended up with a mixture of two languages on our subscription page, without having the option to change the language with the HubSpot language switcher, although the components (subscription-preferences and logo) on that page are translated. We have the beta running for translated subscription types. Screenshot below:
Screenshot 2021-09-15 at 08.22.43.png

 

I've been scanning the forum the past weeks for a solution but no success. Anyone who also struggled with this problem?

 

Thanks

Thomas

0 Upvotes
1 Accepted solution
thomasvbe
Solution
Contributor

Translating the subscription page (template)

SOLVE

Thanks, everyone!
For those searching for a solution, code below:

 

 

{# Get contact language #}
{% set contactLang = contact.hs_language|lower %}

{# Check if the first language is set to Dutch #}
{% if contactLang == "dutch" %}

  {% set header = "Update je profiel" %}
  {% set unsubscribe_single_text = "Schakel de soorten e-mails uit die u niet wilt ontvangen:" %}
  {% set resubscribe_button_text = "Ja, schrijf mij opnieuw in!" %}
  {% set subheader_text = "<p><span>Hieronder kan je je contactgegevens en voorkeuren bijwerken. We gebruiken deze gegevens om je relevante e-mailcommunicatie te kunnen sturen. Je kan deze gegevens op elk moment aanpassen.</span></p>" %}
  {% set unsubscribe_all_text = "<p><span>Of kies er voor om nooit e-mails te ontvangen:</span></p>" %}
  {% set unsubscribe_all_option = "Ik krijg liever geen e-mails." %}
  {% set button_text = "Update" %}

{% elif contactLang == "french" %}

  {% set header = "Mettre à jour votre profil" %}
  {% set unsubscribe_single_text = "Décochez les types d'e-mails que vous ne souhaitez pas recevoir:" %}
  {% set resubscribe_button_text = "Oui, réabonnez-moi!" %}
  {% set subheader_text = "<p><span>Complétez les informations de contact ainsi que vos préférences pour recevoir les informations désirées. Vous pouvez modifier vos informations à chaque instant.</span></p>" %}
  {% set unsubscribe_all_text = "<p><span>Ou choisissez de ne jamais recevoir d'e-mails:</span></p>" %}
  {% set unsubscribe_all_option = "Me désabonner de toutes les listes de diffusion." %}
  {% set button_text = "Mettre à jour" %}

{% endif %}

{% if contactLang == "dutch" or contactLang == "french" %}

{% email_subscriptions
    "email_subscriptions_combell"
    resubscribe_button_text="{{ resubscribe_button_text }}",
    unsubscribe_single_text="{{ unsubscribe_single_text }}",
    subheader_text="{{ subheader_text }}",
    unsubscribe_all_unsubbed_text="{{ module.unsubscribe_all_unsubbed_text }}",
    button_text="{{ button_text }}",
    label="{{ module.label }}",
    header="{{ header }}",
    unsubscribe_all_option="{{ unsubscribe_all_option }}",
    unsubscribe_all_text="{{ unsubscribe_all_text }}"
%}

{% else %}

{% email_subscriptions
    "email_subscriptions_combell"
    resubscribe_button_text="{{ module.resubscribe_button_text }}",
    unsubscribe_single_text="{{ module.unsubscribe_single_text }}",
    subheader_text="{{ module.subheader_text }}",
    unsubscribe_all_unsubbed_text="{{ module.unsubscribe_all_unsubbed_text }}",
    button_text="{{ module.button_text }}",
    label="{{ module.label }}",
    header="{{ module.header }}",
    unsubscribe_all_option="{{ module.unsubscribe_all_option }}",
    unsubscribe_all_text="{{ module.unsubscribe_all_text }}"
%}

{% endif %}

 

View solution in original post

9 Replies 9
thomasvbe
Solution
Contributor

Translating the subscription page (template)

SOLVE

Thanks, everyone!
For those searching for a solution, code below:

 

 

{# Get contact language #}
{% set contactLang = contact.hs_language|lower %}

{# Check if the first language is set to Dutch #}
{% if contactLang == "dutch" %}

  {% set header = "Update je profiel" %}
  {% set unsubscribe_single_text = "Schakel de soorten e-mails uit die u niet wilt ontvangen:" %}
  {% set resubscribe_button_text = "Ja, schrijf mij opnieuw in!" %}
  {% set subheader_text = "<p><span>Hieronder kan je je contactgegevens en voorkeuren bijwerken. We gebruiken deze gegevens om je relevante e-mailcommunicatie te kunnen sturen. Je kan deze gegevens op elk moment aanpassen.</span></p>" %}
  {% set unsubscribe_all_text = "<p><span>Of kies er voor om nooit e-mails te ontvangen:</span></p>" %}
  {% set unsubscribe_all_option = "Ik krijg liever geen e-mails." %}
  {% set button_text = "Update" %}

{% elif contactLang == "french" %}

  {% set header = "Mettre à jour votre profil" %}
  {% set unsubscribe_single_text = "Décochez les types d'e-mails que vous ne souhaitez pas recevoir:" %}
  {% set resubscribe_button_text = "Oui, réabonnez-moi!" %}
  {% set subheader_text = "<p><span>Complétez les informations de contact ainsi que vos préférences pour recevoir les informations désirées. Vous pouvez modifier vos informations à chaque instant.</span></p>" %}
  {% set unsubscribe_all_text = "<p><span>Ou choisissez de ne jamais recevoir d'e-mails:</span></p>" %}
  {% set unsubscribe_all_option = "Me désabonner de toutes les listes de diffusion." %}
  {% set button_text = "Mettre à jour" %}

{% endif %}

{% if contactLang == "dutch" or contactLang == "french" %}

{% email_subscriptions
    "email_subscriptions_combell"
    resubscribe_button_text="{{ resubscribe_button_text }}",
    unsubscribe_single_text="{{ unsubscribe_single_text }}",
    subheader_text="{{ subheader_text }}",
    unsubscribe_all_unsubbed_text="{{ module.unsubscribe_all_unsubbed_text }}",
    button_text="{{ button_text }}",
    label="{{ module.label }}",
    header="{{ header }}",
    unsubscribe_all_option="{{ unsubscribe_all_option }}",
    unsubscribe_all_text="{{ unsubscribe_all_text }}"
%}

{% else %}

{% email_subscriptions
    "email_subscriptions_combell"
    resubscribe_button_text="{{ module.resubscribe_button_text }}",
    unsubscribe_single_text="{{ module.unsubscribe_single_text }}",
    subheader_text="{{ module.subheader_text }}",
    unsubscribe_all_unsubbed_text="{{ module.unsubscribe_all_unsubbed_text }}",
    button_text="{{ module.button_text }}",
    label="{{ module.label }}",
    header="{{ module.header }}",
    unsubscribe_all_option="{{ module.unsubscribe_all_option }}",
    unsubscribe_all_text="{{ module.unsubscribe_all_text }}"
%}

{% endif %}

 

Indra
Guide | Elite Partner
Guide | Elite Partner

Translating the subscription page (template)

SOLVE

Hi @thomasvbe,

 

Unfortunately there are no default translations within HubSpot that can be used for exept one option. That's the locale_name function. You can check it out over here: https://developers.hubspot.com/docs/cms/hubl/functions#locale-name 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution
thomasvbe
Contributor

Translating the subscription page (template)

SOLVE
What I meant was If I could pick the translations from the module in code or from translations.header or something like that 🙂
I know, I’m asking much 😁
0 Upvotes
thomasvbe
Contributor

Translating the subscription page (template)

SOLVE

Hi guys

 

Already a big thanks for the solutions provided! Building further on that, isn't there a way to grab translations in code or set the language of a component? Right now, the translations need to be filled in hard coded.

 

Thanks!

Indra
Guide | Elite Partner
Guide | Elite Partner

Translating the subscription page (template)

SOLVE

Hi @thomasvbe,

 

If you want hardcoded translations, i recommand setting default variable based on the html_lang. So your code will look like this:

 

{# if page is English #}
{% html_lang == 'en' %}
  {% set placeholder = 'Sample' %}

{# if page is German #}
{% elif html_lang == 'de' %}
  {% set placeholder = 'Stichprobe' %}

{# if page language is not avalible #}
{% else %}
  {% set placeholder = 'Voorbeeld' %}
{% endif %}

{# output variable #}
{{ placeholder }}

 

 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution
Indra
Guide | Elite Partner
Guide | Elite Partner

Translating the subscription page (template)

SOLVE

Hi @thomasvbe,

 

This indeed is something HubSpot should be working on, since multilingual is not working on all functionalities inside HubSpot.

 

My approach is to display the correct info based on the browser language. Then you should get somethink like this:

{# Get browser language #}
{% set lang = request.headers['accept-language']|split(',')|map('lower') %}

{# Check if the first language is set to Dutch #}
{% if lang[0] == 'nl' %}
  {% set header = 'Communicatie instellingen' %}
  {% set unsubscribe_single_text = 'Schakel de soorten e-mails uit die u niet wilt ontvangen:' %}
  {% set resubscribe_button_text = 'Ja, schrijf mij opnieuw in!' %}
  {% set subheader_text = '\n Als dit niet uw e-mailadres is, negeert u deze pagina, aangezien de e-mail die aan deze pagina is gekoppeld hoogstwaarschijnlijk naar u is doorgestuurd.\n' %}
  {% set unsubscribe_all_text = 'Of kijk hier om nooit e-mails te ontvangen:' %}
  {% set unsubscribe_all_option = 'Schrijf mij uit van alle mailinglijsten.' %}
  {% set button_text = 'Update e-mail instellingen' %}

{# If browser is other then dutch #}
{% else %}{# english variable #}
  {% set header = 'Communication Preferences' %}
  {% set unsubscribe_single_text = 'Uncheck the types of emails you do not want to receive:' %}
  {% set resubscribe_button_text = 'Yes, resubscribe me!' %}
  {% set subheader_text = '\n    If this is not your email address, please ignore this page since the email associated with this page was most likely forwarded to you.\n' %}
  {% set unsubscribe_all_text = 'Or check here to never receive any emails:' %}
  {% set unsubscribe_all_option = 'Unsubscribe me from all mailing lists.' %}
  {% set button_text = 'Update email preferences' %}

{% endif %}

{% module 'subscription_preferences'
  path='@hubspot/email_subscriptions'
  header='{{ header }}'
  resubscribe_button_text='{{ resubscribe_button_text }}'
  unsubscribe_single_text='{{ unsubscribe_single_text }}'
  subheader_text='{{ subheader_text }}'
  unsubscribe_all_text='{{ unsubscribe_all_text }}'
  unsubscribe_all_option='{{ unsubscribe_all_option }}'
  button_text='{{ button_text }}'
%}

 

Check the hubl tags for Email subscriptions for all options.

 

Hope this will help you solve your problem.


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Translating the subscription page (template)

SOLVE

Hi @thomasvbe

like @stefen said - it's quite "hard" right now and there is no real "easy" way.

 

If you're familiar with code you can try this:

  • clone the default subscription module to get the edit options and edit the translations of the text directly in the module(You'll find the translations almost at the bottom in the right sidebar)
  • if you're working with themes you can also setup a custom if-statement based on list-types or so(basicaly selfmade smart-rules) directly in the template with some translations like
{% if contact.country == "Netherlans"%}
{# show module/content for Netherlands #}
{% elif contact.country == "Germany" %}
{# show module/content for Germany #}
...
{% else %}
{# show module/content for fallback if contact doesn't have a country #}
{% endif %}

 

 

best, 

Anton

Anton Bujanowski Signature
stefen
Key Advisor | Partner
Key Advisor | Partner

Translating the subscription page (template)

SOLVE

@dennisedson @thomasvbe I don't think there is a way to change the code of that system template at the moment so you may have to implement/trigger a translation after that area loads with javascript. It'd be a little clumsy but should work.

Stefen Phelps, Community Champion, Kelp Web Developer
dennisedson
HubSpot Product Team
HubSpot Product Team

Translating the subscription page (template)

SOLVE

@stefen , @Anton  either of you able to assist here?

0 Upvotes