Does GrowSurf have multilingual support?

Follow the steps outlined in this article to display different languages to participants based on their language. In this tutorial, we will be saving participant metadata fields of language and country , which are custom data.

1. Use participant metadata

Referred participants:

When adding new referred participants to your campaign, you may be using the JavaScript method growsurf.addParticipant() . Here is an example of how to pass inlanguage and country attributes:

growsurf.addParticipant({ email: '[email protected]', language: 'DE', country: 'DE' });

The example above hardcodes "DE" as the language and "DE" as the country, but you can use the following JavaScript code instead to retrieve the user's browser language and country automatically:

const language = navigator.language.split("-")[0].toUpperCase();
const country = new Intl.DateTimeFormat().resolvedOptions().locale.split("-").pop().toUpperCase();
growsurf.addParticipant({ email: '[email protected]', language: language, country: country });

Direct signup participants via referral portal:

Participants can also sign up to your referral program by signing up to your referral portal. To account for these participants, follow these steps:

1. Navigate to Campaign Editor > 2. Design > Sign Up > Signup Form. Then add a new field called "Language" and another field called "Country". See the example below:

   

2. Navigate to Campaign Editor > 2. Design > Referral > Appearance, then paste the following JavaScript code into the "Custom Code > Custom JavaScript" section:

if(!window.growsurf) { window.addEventListener('grsfReady', () => { hideLanguageAndCountryInputs(); }); } else { hideLanguageAndCountryInputs(); }    
function simulateUserTyping(input, value) {
    input.value = value;
    input.dispatchEvent(new Event("input", { bubbles: true }));
    input.dispatchEvent(new Event("change", { bubbles: true }));
}
function hideLanguageAndCountryInputs() {   
    try {
        document.querySelectorAll("#grsf-signup input#language").forEach(langInput => {
            const langValue = navigator.language.split("-")[0].toUpperCase();
            simulateUserTyping(langInput, langValue);
            langInput.closest(".grsf-input-field-row").style.display = "none";
            console.log("Language was set to", langValue);
        });

        document.querySelectorAll("#grsf-signup input#country").forEach(countryInput => {
            const countryValue = new Intl.DateTimeFormat().resolvedOptions().locale.split("-").pop().toUpperCase();
            simulateUserTyping(countryInput, countryValue);
            countryInput.closest(".grsf-input-field-row").style.display = "none";
            console.log("Country was set to", countryValue);
        });
    } catch (error) {
        console.error("Error hiding language and country inputs", error);
    }
}

This code will automatically retrieve the language and country of the user's browser and set it to the participant metadata fields of language and country , respectively.

As an example, the country value could look like "US" while the language value could look like"EN" .

Participant signups via embeddable elements:

If you are using GrowSurf embeddable elements to show referral links to participants in your own user portal, pass in a custom language metadata key by setting the data-grsf-metadata object property on the GrowSurf embeddable element.

See this following HTML code example, which sets language metadata to "DE" and country to "DE" .

<div data-grsf-block-form
 data-grsf-email="[email protected]"
 data-grsf-first-name="Gavin"
 data-grsf-last-name="Belson"
 data-grsf-metadata="{ 'language': 'DE', 'country': 'DE' }"
></div>

Within your GrowSurf admin dashboard, you will be able to confirm when a participant has custom metadata fields:

2. Update your referral portal

To support multiple languages for your referral portal, use embeddable elements and override certain content using HTML data attributes (you should not use the GrowSurf-hosted referral portal).

View example code.

Please note that customization for error and success messages, such as "That is not a valid email," is not supported.

3. Customize your campaign emails

To support multiple languages for emails sent out by GrowSurf, you can personalize the email content. Here's what that could look like using the language attribute used in the example above:

Please note that email footers only support one language.

As an alternative you can disable GrowSurf emails and use Zapier, Make, or Webhooks instead to send emails on GrowSurf events.

4. Update your reward automation

Because GrowSurf campaigns are tied to a single currency, if you want to automate rewards sent to participants with different currency amounts, you should disable any reward integrations in GrowSurf. You should instead use Zapier, Make, or Webhooks.