Customize your chat widget
You can customize your chat widget to make it more personal, which resonate better with your branding when accessing Settings > Channels > Chat Widget.
Follow this instruction below:
- Go to Settings > Channels > Chat Widget and go to the section Visual Customization.
- You will have 5 options for customization:
- Primary Color: Adjust the color of the chat box to your liking or you can input your branding Hex color code to have the chat box match with your brand guideline.
- Click on the desire color for pre-existed color on Breadstack.
- For personal color:
- Click the multiple color icon
- Input your Hex code.
- Click Save.
- Widget Title: Personalize the widget header text to your liking.
When creating a Widget title, you can include letters, numbers, and even emojis. Just remember, it can be up to 25 characters long
- Display subtitle: Adjust the text below the widget header (for example: the average time a response might take). You can turn it on/off depending on your preference.
- Display Brand Logo: Tick the box if you want the logo to be displayed. There are 2 steps when you enable this feature:
- Upload file: Upload your brand logo (Breadstack only accepts jpg, png and jpeg files with file limitation to a maximum 1MB)
- Use brand logo as widget icon: The default widget icon on the storefront will be replaced with your brand’s uploaded logo. We recommend a square image for optimal display.
- Widget location: Select where widget icon and chat box will appear on the storefront website: on the bottom left or bottom right hand side of the screen.
- Click Save to the pop-up notification at the lower end of your screen to finalize any changes that you have made.
Few notes to keep in mind
Once you've changed the color of your chat widget, it will affect these elements: Visitor Form outline, Submit button, Widget header background color, The border of your department and its box border, Send message button background, Focused message box border color, The Copy Code in the Coupon window, Visitor messages, End chat button and Background of prompt & new message in minimized state.
The widget title & subtitle will display like how the admin has set in the Settings > Widget Customization until a chat is initiated (same goes for branding logo):
Widget title & subtitle would be replaced by agents name and avatar with selected department when inbound chat is initiated.
Outbound chat will not have department.
Related Articles
Customizing chat auto-responses
When a customer starts a new chat and selects their reason for chatting, they see one of two automatic responses: Offline Chat Response - Outside business hours, this message lets customers know all agents are currently offline. Online Chat Response ...Connecting the live chat widget to your website
Once you've linked your website to Breadstack as a new channel, your next step is to set up the live chat widget on your site. If your website is hosted by Wix, WordPress, Squarespace, Webflow, or Shopify, see this article for links to specific ...Changing the details the Live Chat widget requests from visitors
When a customer starts a new chat via your widget, they are required to provide their name and email address. This ensures that if they are a repeat customer, Breadstack can link the new chat to their existing profile. Or, if this is their first ...Adjusting Live Chat operating hours
You can set the days and hours your channel is "open" for live chats. Customers can still initiate chats outside these hours, but they will see your offline chat response. This ensures that their expectations about response times are managed. This ...Managing chat notification
In Breadstack, you can choose which notifications you want to receive about live chats and customize what they look and sound like To access your notification centre, go to My Account > Notification, the screen will provide the list of customizations ...