The widget configurator generates Zendesk Widget configuration code based on the Web Widget API.
This tool allows you to change colors, text and buttons. You can show or hide specific interface elements, fill in form fields, translate the interface or rebrand the widget to match your brand and style.
Check out our YouTube demo
You can find a full list of supported changes on widget.guide. We support
- Color, location
- Change labels and button text
- Prefilling form fields
- Hide Channels
- Filter Guide search to specific categories or sections
- Show or hide Chat, Talk, Answer Bot, Guide, Support
- Translate the widget
How to use the tool
- Enter your Zendesk domain to start
- Use the wizard to change button text, colors, position
- You can make changes to any Zendesk channel, or hide a channel completely if you want to offer a different experience to the customer.
- When you're happy about your setup, you can get the necessary code to embed the custom widget on your website.
Use case examples
- Change the button text from Support to Contact on Sales pages.
- Show both Chat, Talk and Contact Form buttons when a user clicks 'contact us'.
- Hide the Guide Search function when loading the widget on an FAQ page.
- Offer Chat on a sales page, but hide it on the support page.
- Translate the widget dynamically based on the language of the page loaded.
- Nudge the widget a bit to the left so it doesn't overlap with a 'back to top' page.
- Show Answer Bot on your homepage, but a classic contact form on the Support pages.
How does it work
The Widget uses the Zendesk widget API to generate the code. Every option available there is configurable, but instead of writing code, you can play around in a wizard and see what happens.
Since we still use the official API the tool is compatible with any future changes Zendesk will make.
Installing the app
- Install the app from Zendesk Marketplace in your Zendesk instance
- You can find widget.guide in the left sidebar
- Enter your Zendesk subdomain (or the subdomain of one of your brands when using Support Enterprise)
- Use the configuration wizard to make changes to your Zendesk widget.
- You can see al changes happen live in the Zendesk environment.
Installing the widget on your website
- Once you're happy with your setup, use the Get Code button to get your custom HTML code.
- Open the source code of your website and paste the code within the HEAD section of your code.
You can use this support article from Zendesk for full guidance.