Configuring Live Agent for multiple languages can be a necessity for companies who do business around the world. Live Agent has multilingual features, but they currently don’t extend to the custom pre-chat and post-chat pages that most companies need to implement. This 2-part series will answer the following question:
“How can a company extend their custom Live Agent solution to support multiple languages?”
Teaching Scenario:
Universal Containers is currently using Live Agent in their Salesforce org. They use custom branded Start Chat, Pre-Chat, Chat Window, and Post-Chat pages. The solution currently supports English, but they would like to add support for their Spanish-speaking customers.
Solution Summary:
The Visualforce pages will display the language defined in the “apex:page” tag’s “Language” attribute. Translation Workbench and custom labels will provide the translations. The language used inside the chat window itself will be assigned by the Live Agent chat button’s “Language” field. We’ll use URL parameters on the Start Chat page to specify which language and chat button to display.
Notes:
It is highly recommended you build and test in a sandbox before deploying to production.
Disclaimer: This is the best solution at the time of this writing. Salesforce may add capabilities in the future that could offer a better solution.
Solution:
1. Create Live Agent Skills for the different languages. Live Agent Skills determine which agents an end user will be passed to when they click the Start Chat button. If an end user is on the Spanish site and they want to speak to an agent, the Start Chat button needs to pass them to the support team that speaks Spanish. Universal Containers already has a Live Agent Skill group for the existing English Live Agent solution. We’ll just add one for Spanish and assign the Spanish-speaking support reps to that Skill group. This is configured in Setup > Customize > Live Agent > Live Agent Sessions > Skills.
Creating a Live Agent Skills group for the Spanish-speaking agents.
List of Live Agent Skill groups, English and Spanish.
2. Enable Translation Workbench and activate the language we’d like to support (Spanish). Setup > Translation Workbench > Translation Settings.
This is the page where we can enable Translation Workbench.
Activating Spanish in Translation Workbench.
List of supported languages. This screenshot shows that Spanish is now active.
3. Review the Visualforce pages and make note of all the sections that display text. Create custom labels with translations for each of these sections. We will also set the Category for all these new labels to “Live Agent”, so we can quickly access them in a custom view. Setup > Create > Custom Labels.
Visualforce markup before implementing custom labels. The sections I point out will be replaced with custom labels in the next step.
A custom label and its Spanish translation.
List of custom labels for this Live Agent project.
4. Go into the existing Live Agent Visualforce pages and replace all the text with the matching custom labels. Also set the apex:page tag’s “Language” attribute to the language that page currently supports. Universal Containers’ existing pages support English, so we set the “Language” attribute to “en_US”. Test the solution by walking through a typical chat session from the Start Chat page to the Post-Chat page. Confirm the custom labels are displaying the correct values. From an end user perspective, it should look like nothing changed.
Visualforce markup after implementing custom labels. The sections I point out now use custom labels.
PostChat Visualforce page. Setting the apex:page tag’s language attribute to “en_US”, so the page will display in English.
5. We will be creating a Visualforce page for each language in a later step. In an effort to prevent redundancy, we’ll now move everything we can from the Live Agent Visualforce pages into Visualforce components. The only page that doesn’t require this step is the Start Chat page that contains the chat button.
Before:
The PostChat Visualforce page before implementing Visualforce components.
After:
Several lines of markup in the PostChat Visualforce page are now replaced with a Visualforce component.
6. Create Spanish versions of the pages. The only difference between the versions is the Language attribute. The Spanish pass will have a Language attribute of “es”. The only page that doesn’t require this step is the Start Chat page that contains the chat button.
PostChatSpanish Visualforce page. Setting the apex:page tag’s language attribute to “es”, so the page will display in Spanish.
We started with these pages:
StartChat
PreChat
ChatWindow
PostChat
We ended with these pages:
StartChat
PreChat
ChatWindow
PostChat
PreChatSpanish
ChatWindowSpanish
PostChatSpanish
7. Go to Setup > Customize > Live Agent > Chat Buttons & Invitations. Universal Containers already has a chat button for English, so we’ll add a chat button for Spanish. The new chat button will be configured almost exactly the same as the existing English chat button. Configuration below:
Everything else will be in configured the same as the existing English chat button.
Post-Chat Form Page: PostChatSpanish (Spanish version of the post-chat Visualforce page.)
Pre-Chat Form Page: ChatWindowSpanish (Spanish version of the pre-chat Visualforce page.)
Custom Chat Page: ChatWindowSpanish (Spanish version of the custom chat window Visualforce page.)
Skills: Assign the Spanish Skills group we created earlier.
Auto Greeting Spanish version of auto greeting.
Language: Spanish
Creating the Spanish chat button. I point out fields that are assigned different values than the existing English chat button.
List of Live Agent chat buttons, English and Spanish
This concludes Part 1 of our Multi-Language Live Agent series.
Check out Part 2 here, where we’ve provided the remaining steps to complete this solution!
