How can I build a Multi-Brand Email Widget?

Last Updated -

Desk's Multi-Brand feature allows you to create multiple support center experiences. One for each of your brands, audience types, departments, and so on. Each brand has it's own theme, content, and contact form. But what if you want each brand to have it's own Email Widget too?

The bad news first. Technically, your Email Widget is global, meaning it isn't tied to any one brand. The good news is, while it's not possible to make a widget per brand, you can use a neat trick to build a unique experience within your email widget for each of your brands. This technique does require a bit of technical experience, so you may need to grab a front-end web developer to help with this project. Only basic HTML is needed.

Your widget has a URL, such as Desk allows you to add a few extra parameters to this URL, such as specifying the customer's name (which is then auto-filled) or specifying a label you want to add to the case if the user submits the form. While you can only have one single widget per Desk account, you can use liquid if statements to evaluate which label is in the widget URL and then show a different branded experience accordingly. Read on to see exactly how to do this.

Note: For this article, we'll be using the Email widget as an example, but this works with your Chat Widget as well.

First, log into Desk and go to Admin > Channels > Email > Widget and create a new theme. Edit the theme, scroll down to the Body section 
and paste the desired code for either 2 or 3 widgets right below the following line: <div id="customer_widget_main" class="customer_widget"> 

For 2 widgets:

For 3 widgets:

Note: If you'd like to add a 4th Email widget for your Desk site, simply add an additional
elsif statement to the code. For more information on If/Else statements, please reference the Shopify documentation.

If you decided to have 3 separate Email widgets for your Desk site, the code you pasted into your Email widget Body would look like this:


Before we can test our Email widgets, make sure "Allow others to create labels" in Admin > Cases > Labels > Advanced Settings is enabled. By enabling this, Labels can be created by external sources using the API and web forms, which is what we need to have happen in order to tell which brand the case came from.

Now to test this out, in a new tab within your browser, try loading the following URLs with "mysite" replaced with your site name. 

You should see the following results: 



As you can see, we're now showing special content for ("This is Brand A", "This is Brand B",  and "This is Brand C" ) only when the URL specifies "a, b, c" as the label. You can take this basic code and extend it to each of your brands. The output within the if statement could be as simple as a logo, CSS block, or as complex as wrapping the entirety of your widget's body HTML within it. 

Here's an example of how to display a an image/logo instead of text for one of the brands. Make sure you have the images hosted somewhere so that you can reference the image source in the code.

Finally, this is how the cases will appear in Desk displaying the correct brand label.