The Web Widget, it’s been around a while - that’s for sure. Zendesk first introduced the Web Widget over ten years ago. As customer service solutions go, there can hardly be a more iconic collection of pixels than that little speech bubble popping up in the bottom corner of your screen, asking “How can I help”?

Zendesk actually has two Web Widgets. The original Web Widget (Classic) and the messaging Web Widget. In this article, we’ll be focussing on how to customize the latter.

The messaging Web Widget, hereon referred to as just the Web Widget, is Zendesk’s newer version of the classic tool.

Whilst the Web Widget is a brilliant tool, without some careful tweaking it can easily be a victim of its own success.

That’s because the Web Widget is so widely used across industries around the world that it’s become almost too recognizable, and many customers will associate it with generic, under-staffed customer support experiences.

Our challenge then, is to spruce up the Web Widget; to give it a new lease of life and to leave it looking as unique as your brand. 

Customizing your widget allows the customer to stay engrossed by the messaging and branding of the rest of your website, rather than being rudely alerted by the trigger warning that another dreadful experience with an automated bot might await them!

Our aim then is to customize the Web Widget such that customers don’t recognize it as anything other than a proprietary part of your UI, despite undoubtedly having used hundreds of other Zendesk-based Web Widgets historically.

Let’s get going!

Adjusting the Launcher Location

Head over to the Admin Centre > Channels > Messaging and Social > Messaging or navigate to https://YOURDOMAIN.zendesk.com/admin/channels/messaging_and_social/channels_list

On this page, select the name of the channel’s Web Widget that you want to edit. Here, I’ve set up a Sandbox with just one channel. 

On the next page, you can change the name of the channel if you wish, although you likely already set this when first setting up the Web Widget.

Go ahead and click on the Style section.

The first section you see allows you to choose whether your Web Widget launch button (AKA the Launcher) lives in the bottom left or bottom right of your website. Bottom right is selected by default. The choice is really yours, just remember to consider which other elements of your website the widget may be floating over or clashing with.

The next step is to change the colors to make sure they match your brand.

Changing the Widget to your Brand’s Colours

‍

At this stage, unless you’ve done some impressive prep already, you might need to jump out of Zendesk and visit your website to pick up the exact colour codes we need. For this example, let’s imagine we’re building a Web Widget for the Salto website.

First things first, let’s head over to the Salto website and grab a screenshot of the page. We’re doing this so we can copy the colours that Salto already uses on their site, and feed them into our Web Widget. Remember, the aim here is to not give customers the slightest reason to question the branding of their experience.

Take a screenshot of the page. I use a tool called Greenshot, but both Windows and Macs have built in tools for capturing screenshots.

Select an area that contains all the key colors of Salto's brand. Here, I can see a dark/grey blue at the top, a purple button, as well as some yellow and green.

The easiest option here is to copy this screenshot directly to your clipboard, but saving it as a file also works.

With the image copied to your clipboard, head over to a website that will tell you the exact color codes of the pixels on Salto’s site. I used this one, but you can use any that comes up when searching “paste image color selector”.

Once the page has loaded, simply hit Ctrl/Cmd + V to paste the image.

‍

‍

As you can see, the color selector tool has pasted our screenshot, ready for us to pick out the colors we want to use in our Web Widget.

Hovering your cursor over any part of the pasted image will allow you to click and be shown the hex code (color code) of any pixel. I can see that the dark blue appears to be the main colour that Salto uses for headers, so I’m going to select any area of the image with that color.

‍

As you can see, selecting the dark blue header at the top has produced a hex code underneath the image (highlighted in blue). Now, copy and paste that code (in this case it’s #2D3748, in case you want to follow along).

Now let’s head back over to the Web Widget settings and paste that code in as our Primary color.

Watch as the color of our Web Widget changes from the default…

‍

… to our very own customized color! Note that the launcher button (what you see before the Widget opens) will also have changed color - more on the Launcher in Part 2).

‍

Now go ahead and do the same for the message color and action color. Pay close attention to which colours your brand uses for action buttons, and try to use that color for your Widget buttons.

For example, in our example screenshot we can see that Salto uses the purple for its most important call to actions, so let’s use that for our buttons.

Pasting this hex code into our Web Widget settings really starts to bring things to life.

‍

There’s our purple!

‍

In terms of the Message color option, my recommendation is to leave it as it is, use the same color as in your header, or choose a brand color that’s not too loud.

Here, I’ve used the turquoise from Salto’s website, which I think is just about suitable for a message background but, if it was any brighter, I’d consider otherwise.

Nice work, you’ve now dressed your Web Widget in your brand’s colors - looking sharp!

With your colors updated, you’re now ready for the subtler but equally important customizations.

Stay tuned for Part 2 - we’re going to make this Widget really shine. We’ll add your company’s logo (including a neat hack to quickly pull this from any website), add a fitting title and helpful pointers for your users and make the final changes that will leave your customers feeling like your developers and designers built the perfect CS tool from scratch, just for them.