- Overview
- Configuring Zendesk Chat
- Configuring Zendesk Support
- Branding the Widget
- Future Possibilities
Overview
Multibrand works well with the new embeddables widget and Zendesk Chat. You can customize the Chat widget depending on the brand center it is embedded in, and manage all of the tickets within your primary instance of Zendesk Support. Having one Chat account embedded on multiple different sites for your agents to work out of can help increase efficiency and saves on administrative minutiae.
This article assumes you have Multibrand, Zendesk Chat, and have set up branded Help Centers. If not, I highly recommend you check out our Multibrand setup documentation to get started!
Configuring Zendesk Chat
A Chat account on an Advanced plan is needed to take advantage of unlimited triggers and departments. Here's a Zendesk Chat setup walkthrough ! We are also going to take advantage of the Zendesk Support integration for Zendesk Chat to automatically create tickets when chats end and for offline messages. Configure the departments you would like available for each of your brands and allocate your agents accordingly.
Configure the triggers you'll be using for each brand -- you can key off the page or site URLs & names in your conditions . Would you like to know more ?
Configuring Zendesk Support
A widget with chat enabled for each brand should be created -- this is especially helpful if you'd like to shepherd your users to a Help Center search before leaving a message. It is possible to forego the use of the Zendesk Support widget and just embed the Zendesk Chat widget on your sites, but you will lose some really useful functionality (Help Center searches before chat/ticket submission, brand placement on ticket creation).
Triggers
While requests made via the Web Widget contact form will automatically create the ticket under the appropriate brand, chats do not currently recognize the brands they're installed on. So, we need to tell Zendesk Chat which brand each should be associated with! We do this by keying off the user agent string passed through in each ticket via internal comment.
Since all requests originating from that brand will have the subdomain as part of the URL, our trigger is light weight and automatically routes the chat request to the appropriate brand.
I won't go into the full details of modifying notifications as they differ depending on the needs of the company, but as it stands when tickets are created via chat they will fire off the "Notify Requester of Received Request" default trigger. That notification will appear as coming from the default brand support address. To prevent those notifications from sending out to chat-created tickets, you can add a condition to the "Notify Requester of Received Request" trigger where Channel is not chat . You would then be free to create new triggers where Channel is chat to send follow-up notifications.
Branding the Chat Window
The Web Widget code is embedded in the <head> section of your Help Center (or external page). Any sort of modifications to the web widget itself can be done through the Embeddables API , but the primary modifications needed are through the Chat API .
Here's an example of the same Zendesk Chat instance with widgets branded for different purposes:
In these examples, I have filtered the departments available, changed the concierge avatar image/name, varied the prechat form greeting, and set a new title for the chat window.
You will need to add a code block to the JS tab of your Help Center under the line
$(document).ready(function() {
which initiates the Zendesk Chat APIs and performs your customization changes:
In text form:
zE(function() {
//Zopim API
$zopim( function() {
$zopim.livechat.departments.filter('Haven Hobbies Support', 'Haven Hobbies Sales');
$zopim.livechat.concierge.setTitle('Hierophant Hobbyist');
$zopim.livechat.concierge.setName('Helley Haven');
$zopim.livechat.concierge.setAvatar('Image URL');
$zopim.livechat.window.setTitle("Helley's Haven Hobbies");
$zopim.livechat.prechatForm.setGreetings("Need a new hobby? We've got your hobbies right here!");
$zopim.livechat.theme.reload();
//End Zopim API
});
});
Publish your changes, refresh your Help Center, and the new changes will take effect.
Looking to the Future
These are current limitations which may be alleviated by future Multibrand/Zendesk Chat updates:
- Window is determined by the Web Widget settings and overwrites the Chat API
- Only one email template for Zendesk Support notifications
- User welcome emails originate from the default brand
- Chats do not recognize brand
Comments
14 comments
Hello,
I'm trying to decide if I should use the Zopim Widget or Zendesk's Web widget, can you provide some pro and cons, or arguments for choosing either?
Sorry if this falls outside of the scope of this article. Any help is appreciated, thanks!
Kr,
Jacob.
Hi Jacob,
It depends on how you want your customers to interact with you.
The Zopim Widget you would normally use if you intend to offer only the chat service via it + potentially, the possibility to leave an offline message in case if non of the chat agents is Online.
The Web Widget in addition to the above functionalities also offers the possibility for the end-users to search in the Knowledge Base for articles based on the inserted keywords, BEFORE getting access to the menu option to initiate a chat session. A very efficient way to reduce the number of potential chat requests.
Plus, in the Contact Form, in the Web Widget, you can add 2 Zendesk custom fields (not possible via the Zopim widget)
Kind Regards,
Hi Sergui,
Thanks a lot for the clarification!
For our current needs it seems the Zopim widget is sufficient, but who knows what future needs may come.
What about styling and language options for the Zendesk widget?
Hi Jocob,
Both widgets can be customized and localized via the UI and the API:
Web Widget API:
https://developer.zendesk.com/embeddables/docs/widget/api
Zopim Widget JS API:
https://api.zopim.com/files/meshim/widget/controllers/LiveChatAPI-js.html
Kind Regards,
Thanks Sergui!
Howdy!
We use the Hub and Spoke process for many reasons as the 3 end user/client facing products are completely different.
Would I be able to have chat accounts for each product? We cant use the Hub either to manage all the tickets. It has to be each product.
Thank you for any help !
Hi @Mark!
Good news/bad news in this situation! The good news is that you absolutely could subscribe to Zopim in each of your Spokes (as well as your Hub). The bad news is that they would each require their own subscription, so this would get a bit more costly.
I have branded our chat window differently on our help desk so it appears different then it does on our ecommerce site since they are two different brands. I went onto the JS script in the help center and changed just the color and the greeting, but now it appears that two different chat windows now load. The altered one ends up on top, but if you click it to open the chat, the other one in the original color is then visible. Here's snip of it:
The script I added under the JS tab is just:
zE(function() {
//Zopim API
$zopim( function() {
$zopim.livechat.window.setColor('#728F41');
$zopim.livechat.prechatForm.setGreetings("We're here to help!");
$zopim.livechat.theme.reload();
//End Zopim API
});
});
How do I make sure that the only chat window that appears is the one with the altered color and greeting?
Hi Jeniffer,
Most probably you've enabled the Chat option in the Help Center Settings:
https://mycompany.zendesk.com/hc/admin/general_settings
If that is the case, please uncheck that checkbox, and do it manually: place you Chat script + the API code into the JS section of your Help Center theme.
Hi Justin!
Good article! We tried setting up this in an environment with two different languages but it sort of fails.
We have two brands, each with it's own language, and we would like to be able to keep separate chats online (i.e. when the swedish chat is online, the finnish chat should not even pop up). Is this possible using this method?
Regards,
Thomas
Hi Thomas,
We have a use case similar to yours. I did a post about how we solved the multilingual/multibrand chat setup here - it's not exactly the same, but it should get you started.
Hope that helps.
Thank you Jacob! We will try that!
Hi Thomas,
This is documented here:
https://chat.zendesk.com/hc/en-us/articles/218624817-Recipe-Automatically-route-chats-based-on-department-online-status
https://support.zendesk.com/hc/en-us/articles/115000566208-Web-Widget-Chat-advanced-customization
valid for both Web Widget or Chat widget.
Thanx for the quick replies!
Please sign in to leave a comment.