Customise the chat widget UI using CSS
You can only do this if you are on the Business or Enterprise plan.Currently, you can only modify the ‘Modern’ theme chat widget
Although i-genie offers two different themes to choose from, using the CSS edit feature, you can change the look and feel of the chat widget.
You can access it on the Channel Configuration → Web → Appearance page of your account.
Here are the classes that you can modify on the chat widget.
| Field | Class Name |
| Pop-up message | .avatar .popup-message .popup-close-button |
| Header Text | .bot-title |
| Header Logo | .avatar–title |
| Meta date information | .meta-info .meta-info–label |
| Text message in the chat section | .text-message |
| Time-stamp & typing indicator | .timestamp |
| Options / Buttons dialog | .option-button |
| Carousel Title/ Subtitle / Buttons | .carousel-title .carousel-subtitle .carousel-button |
| Calendar Submit Button | .submit-button |
| Carousel Image | .card-view-image |
| Slider title and submit button | .popup-title .submit-button |
| File Upload , Submit, Add more button | .popup-title .submit-file .add-file |
| Home Button | .home–button .reset–button |
| Action Buttons | .action-button |
| Input box on the chat widget | .chat-input |
| Avatar for title | .avatar |
| Header of the chat widget | .message-screen-header |
| Carousel Root, Image , Carousel slider frame, | carousel & carousel-image: .slider-frame .card-image |
| File List item Root and Classes for title , icon | file-preview: label: .filepond–root .iconwrap textwrap file listitem: .filepond–file-wrapper .filepond–action-remove-item |
| Form Input | .form-input |
| Phone Input, Seach box for country dropdown , Country list | .phone-input: .search-box-sub-container .country-list |
| Google Calendar Drawer | .google-calendar |