🥳 Celebrate Our Launch With a $200 LIFETIME Discount OFF The Premium Plan Use: BIRTHDAY2024
This offer expires 9/30/2024, at 11:59 PM EST
How to Customize the Chat Widget
Customize the BizStackPro chat widget to match your brand, improve visibility, and enhance the visitor experience— from styles and colors to messages, icons, and avatar optimization.
Making Your Chat Widget Feel Like Part of Your Brand
A generic or poorly placed chat widget can feel disconnected from the rest of a website and may reduce trust or make visitors less likely to start a conversation.
BizStackPro allows chat widgets to be customized with different styles, colors, positions, prompts, icons, greetings, avatar settings, and branding adjustments to better match your website experience.
Without consistent customization, chat widgets can block important content, create visual clutter, or deliver a less professional experience across funnels and websites.
This guide explains how to customize chat widget styles, configure positioning, change icons and messages, adjust branding settings, optimize avatars, and improve the overall visitor experience inside BizStackPro.
Before adjusting colors, prompts, and branding details, it helps to understand how the chat widget customization system is organized inside BizStackPro.
Overview
A well-designed chat widget helps your site look more professional and makes it easier for visitors to contact you. In BizStackPro, you can customize the widget’s appearance, position, messages, and technical settings so it aligns with your brand and supports better engagement.
Tip: Start with your brand colors and an on-brand greeting, then adjust position and prompt style based on what feels best on your most important pages (home, sales, and booking pages).
1) Create a New Chat Widget
- Go to: Sites → Chat Widget.
- Click: Create New Chat Widget.
-
Select channels (based on your needs):
- All-in-One chat
- SMS
- Live chat
Example: If you want the widget to feel simple, start with Live Chat only. If you want more options, use All-in-One chat.
2) Customize Widget Styles
- Chat Prompt: Turn on/off the small prompt message to invite visitors to chat.
- Chat Window Style: Choose the layout and message styling that fits your site.
- Bubble Image: Show/hide an image in the chat bubble for a more personal look.
Good to know: If your widget feels “too busy,” try disabling the prompt and using a clean icon instead.
3) Adjust Widget Position
Place your chat widget where it’s visible but doesn’t block key page elements.
- Bottom left
- Bottom right
- Top left
- Top right
Recommendation: Bottom-right is the most common default because it’s familiar to visitors. Test bottom-left if you have sticky buttons or popups in the bottom-right.
4) Change Chat Icons and Images
Personalize the chat icon so it feels like part of your brand.
- Predefined icons: Choose a built-in icon style.
- Custom icons: Upload your own icon/image.
- No image: Use a minimal look without an image.
5) Select Themes and Colors
- Set the chat bubble color.
- Adjust the chat window background.
- Customize buttons and avatar colors.
- Use pickers to match brand hex values if needed.
Tip: Use your primary brand color for the bubble and a neutral/light background for the chat window to keep messages easy to read.
6) Customize Messages
Acknowledgement message
Set an automatic confirmation message (example: “Thanks for reaching out—someone will reply shortly.”).
Greetings
Create greetings for new visitors and returning contacts to make the experience feel more personal.
Language settings
Choose the widget language so it communicates clearly with your audience.
7) Customize the “Powered By” Text
Replace the default “Powered By” line with your own wording to reinforce your branding.
- Open your chat widget settings.
- Find the Powered By field.
- Enter your preferred text.
- Save and preview your widget.
8) Avatar Image Optimization
Avatar images are typically optimized and delivered via a CDN for faster loading. If you prefer higher-resolution avatars, you can turn optimization off (with a potential performance tradeoff).
- Open your chat widget and click its name to edit it.
- Go to the Widget tab.
- Scroll to Widget Customization.
- Toggle Image Optimization on or off.
- Save and preview.
Recommendation: Keep optimization ON for speed. Turn it OFF only if your avatar looks noticeably blurry.
9) Contact Details, Custom Fields, and Empty Messages
- Captured contact details: Details collected via email, SMS, WhatsApp, or live chat appear in Conversations for follow-up.
- Custom fields: Add fields to collect extra info (example: “Best time to call” or “Company size”).
- Empty messages: If a visitor submits only details without a message, the system records the contact info without extra filler text.
Make your chat widget feel on-brand
Small tweaks—like color, greeting copy, and icon style—can make your chat widget feel like a natural part of your website instead of an add-on.
Opens in a new tab.
Frequently Asked Questions
How can I change the appearance of my chat widget?
Customize the prompt, window style, icons, images, colors, and theme in the chat widget settings.
Where should I position the chat widget on my site?
You can place it in any corner. Many sites use the lower corners for visibility without blocking content.
Can I upload my own icon or avatar for the chat widget?
Yes. Upload a custom icon and avatar image to better match your brand.
How do I change the Powered By text on the widget?
Edit the Powered By field in the widget settings and replace it with your preferred text.
What does image optimization do for chat avatars?
It uses a CDN to deliver avatars efficiently for faster load times. Turn it off if you prefer higher-resolution images.
Make every chat interaction feel intentional
A branded widget builds trust. Customize the icon, colors, messages, and avatar settings so visitors get a smooth, familiar experience on every page.
Better branding. Better engagement.
Disclaimer: This site is NOT endorsed by Google, Facebook or YouTube in ANY WAY. All trademarks & Logo / branding are the property of their respective owners. Please Note: This site was created in BizStackPro by Ken George II (An Affiliate of BizStackPro) and may contain affiliate links.
Copyrights 2024 | AllAboutBizStackPro.Com | Pricing | About | Features | All Rights Reserved.