Multibrand Setup (Part 1): Legacy Zendesk Chat (standalone)

• Multibrand Setup (Part 1): Legacy Zendesk Chat (standalone)
• Multibrand Setup (Part 2): Zendesk Chat-Support Integrations (Phase 3)
• Multibrand Setup (Part 3): Best Practices

Introduction

Your business may have different product lines spread across multiple brands. To ensure you offer consistently high quality support to all your customers, you’ll need to consider your multibrand strategy. Being a multibrand company essentially means you sell, market, and support two or more products under the same parent brand. Managing the different functions for each of these brands can be a challenge. Fortunately, Zendesk helps you centralize your support functions in one location.

In this guide, we’ll cover scenarios where a single parent organization is managing multiple product lines, brands, or even different regional websites. For example, a business might have just one product, but 10 different websites (with different languages and timezones) selling globally. Multibranding then becomes crucial as they will need to provide consistent and centrally managed support for those 10 websites.

Note: 

Step 1: Add Chat to your websites

No matter how many websites you have, you can use the same Zendesk Chat account for all of them.

But, before you can start using Chat for multiple brands or websites, you’ll need to add the same Zendesk Chat embed code to all your websites.

Step 2: Create a department for each brand

Once the embed code has been added, you’re ready to start setting up the multibrand workflow.

The first step is to set up departments for your brands. To do so, create a unique department for each website.

For example, if you have the following brands/websites: “Obscura, Boomerang, Jubilee” you can create three departments called “Obscura”, “Boomerang”, “Jubilee”.

Step 3: Add agents to each department

Now that you have the various brand departments set up, it’s time to organize your agents. Assign agents who have expertise in a specific brand to the corresponding department.

Depending on the volume of traffic you get to your websites, you may want to have a different number of agent for each department. Also, consider the skill and knowledge required for the different websites/departments when assigning agents.

Step 4: Route Chats to departments

After creating the departments and adding your agents you’ll need to use our JavaScript API to automatically route incoming chats from each of your brands’ websites to its corresponding department.

Here’s the API script you will need to add to your websites HTML code. In this case, the example illustrates the code for the “Obscura” brand:

<script>

window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=

d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.

_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute("charset","utf-8");

$.src="//v2.zopim.com/?ABCDEFGH";z.t=+new Date;$.

type="text/javascript";e.parentNode.insertBefore($,e)})(document,"script");

$zopim(function() {

$zopim.livechat.setOnConnected(function() {

var department_status = $zopim.livechat.departments.getDepartment('Obscura');

if (department_status.status == 'offline') {

// 1 - Set the account status to 'offline'

$zopim.livechat.setStatus('offline');

// 2 - hide the widget

$zopim.livechat.hideAll();

} else {

// The Department is Online (At least one agent is Online)

// 3 - Hide the Drop-down list option in the Pre-Chat Form to select the Department

$zopim.livechat.departments.filter('');

// 4 - Automatically set the Department

$zopim.livechat.departments.setVisitorDepartment('Obscura');

}

});

});

</script>

This API script does the following:

If all agents in the department are offline then:

• 1 - The status is set to offline
• 2 - The widget is hidden

This ensures the widget is hidden and chats are not transferred to departments without any online agents (e.g. if “Obscura” had no online agents, the widget on “obscura.com” would be hidden).

If agents in the department are online then:

• 3 - The department drop-down is hidden
• 4 - The chat is automatically routed to the corresponding department

The pre-chat form lets customers enter their personal details and select a department. However, we are automatically routing customers to specific departments, so the API removes the option to select them.

The last part of the script automatically routes chats to agents in the ‘Obscura’ department.

Step 5: Customize the Chat widget

Different brands will have their own individual logos and appearance.

To customize your Chat widget for each brand and its website, you’ll need to use our JavaScript API.

• You can change the color using the setColor parameter
• Or you can add a different image using the setImage parameter
• You can also change the design of the chat window by using the setColor, setSize, and SetTitle parameters.

Example:

You can use the following API script to change the color of the chat widget on different pages:

<script>

$zopim(function() {

$zopim.livechat.theme.setColors({badge: ‘#FFFFFF‘, primary: ‘#000000‘});

$zopim.livechat.theme.reload(); // apply new theme settings

});

</script>

Using this script you can change the color of the chat badge (“badge”) or of the minimized chat widget (“primary”). The color you choose must be inserted in hexadecimal format.

Similarly, you can also change the color scheme of the chat window:

<script>

$zopim(function() {

$zopim.livechat.window.setColor(‘#FFCC00‘);

$zopim.livechat.theme.reload(); // apply new theme settings

});

</script>

Our JavaScript APIs offer a variety of customization options.

Next: Multibrand Setup (Part 2): Zendesk Chat-Support Integration (Phase 3)