Welcome to Part 2 of our Multi-Language Live Agent series. Last week, in Part 1 of this series, we started to answer the below question:
“How can a company extend their custom Live Agent solution to support multiple languages?”
Today, we’ll provide the remaining steps to finalize this solution and provide Universal Containers’ customers a seamless Live Agent experience in their preferred language.
Solution (Continued):
1. Update the entry points to include the correct URL parameter. “Entry Points” are not the Live Agent Visualforce pages. “Entry Points” are the buttons and hyperlinks on the Universal Containers website that redirect customers to the Live Agent Start Chat page (the page containing the chat button). The language for the Start Chat page will be set by a URL parameter, “lang”. The URL for Universal Containers’ Start Chat page is https://universalcontainers-fieldadmin.cs60.force.com/apex/StartChat. If an end user is on Universal Containers’ Spanish website and they click a button to redirect them to the Start Chat page, the button will include “es” for the “lang” parameter and they will see the Start Chat page in Spanish: https://universalcontainers-fieldadmin.cs60.force.com/apex/StartChat?lang=es. If an end user is on Universal Containers’ English website and they click a button to redirect them to the Start Chat page, the button will include “en_US” for the “lang” parameter and they will see the Start Chat page in English: https://universalcontainers-fieldadmin.cs60.force.com/apex/StartChat?lang=en_US. The next few steps will add logic which uses the “lang” parameter to determine which language to display on the page and which chat button to display. If we want to test the “lang” parameter for these steps, we can just manually add the “lang” parameter to the URL when accessing the Start Chat page.
Setting the “lang” URL parameter to “es”. When the solution is complete, this will load the Live Agent Start Chat page in Spanish.
2. Update the Start Chat page to dynamically set the language for the page based on the “lang” URL parameter. The custom Pre-Chat, Chat Window, and Post-Chat pages all have a hardcoded language key because we can’t pass that data from page to page using the Live Agent API. Even the liveagent.addCustomDetail() method doesn’t help because we can’t access the value until after the page loads. However, we can set the URL parameter for the Start Chat page because Universal Containers directs end users to that page from buttons on their website. We will update the Start Chat page, so the apex:page tag’s “language” attribute will use a controller property: language="{!lang}". The controller’s getter, getLang(), will return the language key it finds in the “lang” URL parameter. If we want to test the new logic, we can just manually add the “lang” parameter to the URL when accessing the Start Chat page.
Dynamically setting the apex:page tag’s “language” attribute with the “lang” property.
Controller method to get the value in the “lang” URL parameter
3. Update the Start Chat page to display the correct chat button. We created a chat button for each language in a previous step. The existing English chat button fires all the English Visualforce pages. The new Spanish chat button fires all the Spanish Visualforce pages. Salesforce provides a block of code specific to each chat button: Setup > Customize > Live Agent > Live Agent Sessions > Chat Buttons & Invitations > click into a chat button to see the Salesforce-provided code. Universal Containers’ English and Spanish chat buttons each have their own version of Salesforce-provided code, but the only difference between them is the chat button Id. This means we can just put one block of chat button code on the Start Chat page and use custom labels with translations to dynamically set the chat button Id. The custom label will be named ChatButtonId. Its English value will be the English chat button Id. Its Spanish translation will be the Spanish chat button Id. The Start Chat page already has the Salesforce-provided code for the existing English chat button. We’ll replace all instances of the chat button Id with the new custom label, ChatButtonId. The chat button Id is referenced in both Visualforce markup and JavaScript, so we’ll be sure to use this new custom label in both sections. If we want to test the new logic, we can just manually add the “lang” parameter to the URL when accessing the Start Chat page.
Chat Button markup before implementing the ChatButtonId custom label.
Chat Button markup after implementing the ChatButtonId custom label.
Chat Button JavaScript code before implementing the ChatButtonId custom label.
Chat Button JavaScript code after implementing the ChatButtonId custom label.
Testing Scenario: Manually add the Spanish “lang” URL parameter “?lang=es” when accessing the Start Chat page. That should set the apex:page tag’s “language” attribute to “es” (Spanish). The custom label will return the Spanish chat button Id, so the Salesforce-provided code block will display the Spanish chat button. We’ll click the Start Chat button and confirm we are directed to the Spanish Pre-Chat form.
4. At this point, the solution is complete. Scenario: An end user is on the Universal Containers Spanish website and they click a “Support” button. That button redirects them to the Start Chat page (the page that contains the chat button). The link includes the Spanish URL parameter. The Start Chat page sees the Spanish URL parameter. It uses the URL parameter to set the page language to Spanish and display the Spanish chat button. Clicking the Spanish chat button will forward the end user to the Spanish-speaking support team and launches the Spanish Pre-Chat, Chat Window, and Post-Chat pages. The end user’s entire Live Agent experience will be in Spanish from the moment they click the Support button on the Universal Containers website.
Thanks for taking the time to read our 2-Part Multi-Language Live Agent series. Hopefully, this is the solution you were looking for. At the very least, I hope I provided some concepts you can use for other multilingual projects in Salesforce. Check out part one here.
