Customizing the Chat Widget Appearance
All appearance settings for Super Speedy Chat live in the WordPress Customizer, not the plugin settings page. This gives you a live preview of every change before you publish.
To access them, go to Appearance > Customize > Super Speedy Chat in your WordPress admin.
Note: The plugin settings page (under the Super Speedy Chat admin menu) handles behaviour, email notifications, and other functional options. Visual customization is handled entirely through the Customizer.
The Customizer shows a live preview with the chat widget already open, so every colour and title change is reflected instantly on the right. Nothing goes live until you click Publish, so you can experiment freely without visitors seeing half-finished styling.
Available Settings
Chat Header Image
Upload an image to display in the chat widget header bar. A recommended height of 40px works best to keep the header compact.
Chat Window Title
The text displayed in the chat header. Defaults to “Chat”. Change this to match your brand or use case (e.g. “Support”, “Ask us anything”).
Primary Color
Controls the main accent color used for the chat bubble trigger button and other accent elements throughout the widget. Set this to match your site’s brand color.
Header Background Color
Sets the background color of the chat widget header bar. This is independent of the primary color, so you can use a contrasting or complementary shade.
Keep enough contrast between the header background and any text or logo sitting on it. A mid-tone brand colour with white text usually reads well; very light headers with pale text are the most common accessibility slip.
Visitor Message Color
Controls the background color of message bubbles sent by the visitor. Useful for distinguishing visitor messages from agent replies.
Bubble Position
Choose where the chat trigger button appears on screen:
- Bottom-right (default)
- Bottom-left
Trigger Icon
Select the icon shown on the floating chat trigger button. You can choose from three built-in options:
- Chat bubble
- Speech bubble
- Headset
Alternatively, upload a custom image to use as the trigger icon.
Tips
- Use the Customizer’s live preview to test color combinations before publishing.
- Keep the header image small (40px height) to avoid pushing the chat content area down.
- If your site has a fixed footer or other bottom-positioned elements, choose the bubble position that avoids overlap. To keep the bubble off certain templates entirely, see Showing or Hiding the Chat on Specific Pages.
The Customizer covers the settings most sites need. For anything beyond it – custom fonts, spacing, animations or per-element tweaks – drop into the Widget Styling Reference (Custom CSS), which lists the widget’s CSS classes and the variables you can override.
Comments