10. Style

The Style Tab lets you customize the appearance and behavior of the WhatsApp Chat Help popup and bubble. This ensures the chat widget fits seamlessly into your website’s design.

Style Settings #

1. Auto Open Popup
   • Toggle ON to make the chat popup open automatically when a visitor lands on the page.
   • Toggle OFF if you want users to open it manually by clicking the chat button.
2. Auto Open Popup Timeout
   • Set the delay (in milliseconds) before the chat popup opens automatically.
   • Example: 5000 ms = 5 seconds.
   • Works only when Auto Open Popup is enabled.
3. Select Animation for Bubble
   • Choose how the chat bubble animates when appearing.
   • Options include styles like Fade, Bounce, Slide, Random etc.
   • This helps grab visitor attention without being intrusive.
4. Select Bubble Layout Mode
   • Choose a visual mode for the chat bubble:
     • Light Mode – default white background.
     • Dark Mode – dark theme for modern look.
     • Night Mode – optimized for very low-light browsing.
5. Custom Bubble Trigger
   • Use CSS selectors (like .classname, #idname) to trigger the chat popup when a user interacts with a specific element on your site.
   • Example: setting .contact-btn will open the chat popup whenever someone clicks your “Contact Us” button.
6. Color Settings
   • Set Primary and Secondary colors for the chat bubble and popup.
   • Primary color often controls button backgrounds, while secondary controls highlights or accents.
   • Helps match the widget with your site’s branding.
7. Send Button
   • Customize the appearance of the Send Button inside the chat popup.
     You can set:
     • Color – default color of the send button text/icon.
     • Hover Color – color when hovering over the button.
     • Background – background color of the button.
     • Hover Background – background color when hovering.
   • This helps you fully brand the send button to match your site’s design.
8. Typography
   • Select the font family used inside the chat popup.
   • Ensures the chat design is consistent with your site’s typography style.