Mustache variable for language preference in deepviews?

Question

My company is running an email campaign for app downloads using branch.io. As users may open a given link on a desktop OR on their phone we need to support both cases.

We've implemented a branch "Deepview" because we love the ease of the text-to-download feature. The problem is, there doesn't seem any way to provide a localized version of this view, and we support many different languages.

Because I can't run scripts in the custom deep view (branch.io strips them out, I assume for security reasons), and because I don't have access to a language mustache variable, I can't change content by locale.

Is there any way to localize deepviews based on a URL param or (ideally) based on window.navigator.language(s)? If I just had a mustache variable exposed for language_code of the user, everything could work.

Here was my attempt at hacking it in:

.lang-en .phone-number-label:after {
    content: "Phone Number";
}
.lang-en .btn-submit-label:after {
    content: "Send Me The App";
}

<div class="container lang-en">
  <h3 class="phone-number-label"></h3>

  <input name="phone" id="phone" placeholder="+1 (123) 123-1234" type="text" class="phone-input"></input>

  <button id="phone-submit" type="submit" class="phone-submit">
    <span class="btn-submit-label"></span>
  </button>
</div>

The 'lang-en' is intended to be generated as follows:

<div class="container lang-{{language_code}}>...</div>

I briefly got this to work by highjacking $og_description from the url:

https://bnc.lt/my-branch-link?$og_description<language_code_provided_as_query_param>

but after awhile, the {{link_data.$og_description}} stopped coming through at all into the mustache template (when passed as a url param). This also is probably not great practice. Let me know if anyone has a solution here, or if branch.io devs are willing to expose this variable in their mustache template data.

Answer 1

I have good news! Branch Deepviews use Handlebars, utilizing this will allow you to set the "Get the App" -- "See this content immediately after install" and other variables with your deep linked values. Let me show you some code and a screenshot from an example that I just built for you.

Code example:

<a href="{{action}}" class="cta-button text-light{{#unless app.og_image_url}} cta-button--no-app-icon{{/unless}}{{#if no_data}} cta-button--no-app-icon{{/if}}">{{#if link_data.cta_text_localized}}{{link_data.cta_text_localized}}{{else}}Get The App{{/if}}</a>

The Handlebars come into play for the "Get the app" Button here:

{{#if link_data.cta_text_localized}}{{link_data.cta_text_localized}}{{else}}Get The App{{/if}}

To spell it out, if the deep link value "cta_text_localized" exists within this link, then use that String for the "Get the App" button, otherwise use "Get the App." You can configure deep link data from the marketing section of your Dashboard, at the bottom of an "add link" dialog, attached screenshot:

Screenshot of my ES customized Deepview, note the altered "Get the App" button:

As you can see, using a liquid tag that grabs text from my deep link value "cta_text_localized" I set the "Get the App" button to a custom String. Using this method you would create a link for every language that you wanted to display, setting your deep link values accordingly, while your template always pulled from the same variable.