In Part 1, we talked about the importance of not leaving your Zendesk Web Widget with the default settings as customers are so accustomed to seeing this all over the web and, sadly, associate it with poor customer service experiences. In Part 2 of this series, we’ll learn a neat trick to easily add your company logo to the Widget, ensure customers feel like they’re in safe hands once they click the Launcher, and make a few other necessary tweaks to make your Widget as unique as your company’s brand.

Adding your Company's Logo

Heading back to the Style section of your Web Widget (Admin Centre > Channels > Messaging and Social > Messaging > click on your channel name), we have the option to add our company’s logo. This will appear at the top of the Web Widget. I recommend using a square version of your logo with a transparent background.

Again, if you’ve done your homework already, you might have all your brand assets ready to go in one folder (although the logo will need to be 100kb or less). For everyone else, however, I have a simple trick for you.

Look at the end of any tab you have open and you’ll see a tiny icon, unique for each website.

‍

This is called a favicon, and it’s perfect for our use case. Of course, we could just try and fit our company’s logo into the Web Widget, but Zendesk will squash whatever we upload into a square (and then crop it in a circle), so it needs to be square to begin with.

As an example, here’s what happened when I simply saved Salto’s logo from the header on their web page…

‍

… and used it as the Logo in the Web Widget.

That doesn’t look so good!

Thankfully, the designers of your website have done the hard work for you. We’re going to simply lift the favicon that is already shown on the left of the tab title. Favicons are always square, so this should save us a load of time.

To do this, copy your website URL. In this case, I’ll use https://www.salto.io/ and then head over to this page to extract the Favicon as an image we can use.

Paste your website’s URL into the Ger Favicon field and click “Go”.

This should extract the icon from your website, display it and give you its URL.

From here, save the image to your computer and then upload it in the Web Widget as below.

Note that if the Favicon is in the .ico file format, you’ll need to use a free online tool to convert it to a png.

Alternatively, or if you want to change your logo’s transparent background to a white background, simply take a square screenshot of the logo as as seen on the web page above.

Our end result is below (with a transparent background):

‍

Alternatively, I think the white background looks a bit clearer!

‍

‍

That’s looking pretty neat now, but there’s still more we can do!

Update the Title and add a Description

This setting doesn’t need too much talking through. Give your Web Widget a name that will make sense to your customers. Either simply your company name, or something like “Get in touch” or “Contact us”.

Adjusting the title, plus adding a description, really goes a long way to making the Web Widget your own.

‍

With the title and description sorted, there are only a few final (but essential) adjustments to make.

Remove the Zendesk Branding

You’ve gone to great lengths to make your Web Widget right on brand, your brand, but then what’s that your customer spies, right down at the bottom? It’s that Zendesk logo and “Built with Zendesk” line, the same one they see on every other Web Widget across the World Wide Web.

We can’t be having that, so scroll down and deselect “Show Zendesk logo”.

Before we get on to further customising the Launcher button itself, there’s one last detail to change: the name given to the persona sending the messages in our Web Widget.

‍

‍

The section below Style is Responses, and this is where you can change the name.

‍

If you’ve already got your Web Widget programmed by a Zendesk Bot, you’ll need to click that “Edit in bot builder” link to update the name.

With the Web Widget itself fully customised, it should now look something like this:

‍

‍

The final stage is to customise the Launcher itself.

Tweaking the Launch Button

The two simplest options are a square or a circle. Do note that if you select the Square option, it gives you the choice to round the corners for much more control.

That looks pretty tidy to me!

‍

The last option is to tweak the text that appears next to the Launcher (in a speech bubble), before the user ever clicks on it.

Do note that the preview of this may not show up in testing - you might have to deploy it first to see what it looks like!

I recommend something very short that does the job of telling your user what the button does. It doesn’t need to be any more complicated than that.

With that final change, we have totally revamped our Web Widget from something easily spotted all over the web to a totally unique, on-brand tool that resonates with customers as they seek out support on your website or app (yes, the Web Widget can be deployed in-app, but that’s an article for another day)!

Have a play around with the colours, get a square logo that is easily readable and generally try to emulate the style of the rest of your website. This will ensure your Web Widget does its job so well that your customers don’t even notice it’s there. Voila!