HOW TO ADD A CUSTOM CSS TO THE WIDGET
Creation Date: April 12, 2024
Customizing your TicketingHub widget with CSS makes it look like it's part of your website.
Here's how to do it in a few easy steps:
Below are images showing how a custom CSS can change the appearance of your widget. Notice how the customization aligns the widget’s design with the website’s aesthetics.
Sample No. 1
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/sample-02-1_1wvxyxl.png)
Sample No. 2
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/sample-01-2_i2jhuo.webp)
Create a CSS file with the styles you want for your widget. Once ready, upload this file to your server.
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-01-1_45qk2n.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-02-1_hubn9.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-03-1_10uy0tr.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-04-1_suswca.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-05-1_1dock4o.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-06-1_10de219.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-07-1_1vkvo2d.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-08-1_mvuxdl.png)
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-09-1_1dc11s7.png)
Customizing your TicketingHub widget with CSS makes it look like it's part of your website.
Here's how to do it in a few easy steps:
ADD A CUSTOM CSS TO THE WIDGET |
---|
Sample custom widgets by TicketingHub clients |
Add the custom CSS. |
SAMPLE CUSTOM WIDGETS
Below are images showing how a custom CSS can change the appearance of your widget. Notice how the customization aligns the widget’s design with the website’s aesthetics.
Sample No. 1
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/sample-02-1_1wvxyxl.png)
Sample No. 2
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/sample-01-2_i2jhuo.webp)
ADD CUSTOM CSS TO WIDGET
1. Create and Upload Your CSS
Create a CSS file with the styles you want for your widget. Once ready, upload this file to your server.
2. On your TicketingHub dashboard, click on Widgets
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-01-1_45qk2n.png)
3. Click on Channels
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-02-1_hubn9.png)
4. Click on Web Integrations of the widget you want to edit
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-03-1_10uy0tr.png)
5. Click on the tour's widget
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-04-1_suswca.png)
6. Go to Settings
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-05-1_1dock4o.png)
7. Find Custom CSS URL box. Here, copy + paste the CSS url.
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-06-1_10de219.png)
8. Preview and adjust
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-07-1_1vkvo2d.png)
9. When done, click on Publish Changes 🎉
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-08-1_mvuxdl.png)
10. Click on Confirm to finalize changes
![](https://storage.crisp.chat/users/helpdesk/website/8763f2492c8ae000/step-09-1_1dc11s7.png)
Updated on: 12/04/2024
Thank you!