Customize chatbot appearance
Chizy lets you fully customize the look and feel of your chatbot so it matches your store’s branding. You can adjust colors, fonts, chat icons, messages, product drawers, and even add custom code for advanced personalization.
You can find the settings in Chizy Admin > Settings > Appearance
This section walks you through the five customization tabs: General, Chat Icon, Chat Window, Quick View Drawer, and Custom Code.
1. General Settings
Here you can set your chatbot’s overall style.
Steps:
Go to General tab.
Choose a color for the chat button, header, and messages.
Adjust font settings:
Font for normal text (this includes text in chat message, product description)
Font for product name, price, and button labels.
Click Save to apply changes.
2. Chat Icon
This tab controls how your chat launcher looks on your storefront.
Steps:
Go to Chat Icon tab.
Choose Style (icon only or icon + label). If you choose "Icon + Label" then the Label text field will show
Edit the Label text (e.g., “Chatbox”).
Select a desktop and mobile position (bottom-right or bottom-left).
Add an Invitation Message to encourage chats (e.g., “Need help? Ask me anything!”).
Enable Smart Follow-up if you want Chizy to automatically remind visitors who don’t reply. You can set up the delay time between follow ups, and the number of follow up will be maximum 3 times.
3. Chat Window
Customize what customers see inside the chatbox.
Steps:
Go to Chat Window tab.
Set an Agent name (e.g., “Chizy Bot”). You may want to set an Agent name that relates to your brand.
Add a Welcome message (e.g., “How can I help you today?”).
Upload your logo or icon (JPG, PNG, GIF, WebP up to 2MB).
(Optional) Enable Pre-chat survey to ask visitor for their personal information (Email/name/phone)
Note: The visitor can't skip the survey and if the customer is logged in, their information will be filled in automatically
(Optional) Enable Preset Questions to suggest quick actions like “Track Order” or “View Shipping Policy.”
4. Quick View Drawer
This tab controls how the quick view drawer will look when user click on "Add to cart" button in the chatbox.
Steps:
Go to Quick View Drawer tab.
Select Image Slider Type:
Slider + Thumbnails (shows all product previews below main image).
Slider only (show images in a slider, saves space for product details in quick view.)
Choose Product Options Type:
Swatches
Dropdown
Radio button
5. Advanced
The Advanced tab allows you to control when and where the chatbot appears on your store, as well as apply custom styling or functionality.
Hide Chat Bubble on Specific Pages
You can choose to hide the chat bubble on selected pages of your store, based on device type (desktop or mobile).
Steps:
Under Hide Chat Bubble on Specific Pages, select either:
Desktop Devices, or
Mobile Devices.
Click Add URL and choose one of the following options:
Exact Address: Choose this option if you want to hide the chat bubble only on a specific page. For example, enter the full URL starting with
https://— the chat bubble will be hidden only on that exact page.Address Contains: Choose this option if you want to hide the chat bubble on multiple pages that share a similar URL pattern. For example, type
/collectionsto hide the chat bubble on all collection pages across your store.
Custom Code
Use this section to apply Custom CSS or Custom JavaScript (JS) to personalize the chatbot’s appearance and behavior.
Custom CSS
You can modify styles like colors, fonts, or layout.
Steps:
Go to Custom Code tab.
Under Custom CSS, paste your styling rules (e.g., change button color).
.chizy-product-btn-primary { background-color: red; }Under Custom JS, paste scripts to add functionality. Example:
document.addEventListener('click', () => { console.log('Click test successfully'); })
Note: Only use this if you’re comfortable with coding. For help, contact us via our live chat or email us at [email protected].
Last updated