Tip: How to add CSS to Web Widget

Add CSS to Web Widget

Zendesk level:  Beginner
Knowledge: Javascript, HTML, CSS, Web Widget
Time Required:  10 minutes

Documentation, customizations, and troubleshooting on GitHub: https://github.com/Ajhad1/Zendesk-Customizations/tree/main/Web-Widget/Hide-System-Fields

How it works (simplified):

Uses the default ability to run Javascript on Widget open to append CSS to the Web Widget itself.

Prerequisites:

• You must be using Zendesk Support
• You must have access to the Web Widget
• You must be able to modify the code where the Web Widget will be inserted as HTML

How to Install:

1. Copy the default Web Widget Script from the admin menu in the Agent interface.
2. Navigate to the website where you will be inserting the Web Widget.
3. Paste the HTML code into the HTML source code of the website.
4. Below where the code has been inserted, input the reference code. GitHub
5. Adjust the CSS to match your needs.
6. That's it.

Notes:

• In my example, I found the class for the Zendesk Branding and set it to be hidden. It no longer shows on the Web Widget.