Widget Colors and Styling
Design Settings exposes grouped color and text values for the header, message area, timestamps, bot avatar, input, suggestions, send button, trigger, and hints.
Design Settings writes CSS values that the plugin outputs around the compiled chat application. The controls are grouped by the part of the interface they affect—header, messages, timestamps, input, suggestions, buttons, and indicators. The embedded preview uses safe sample content and reflects unsaved changes quickly, while the real website remains the final check for theme conflicts, contrast, focus, and responsive layout.
Work through this page by starting when you open design and expand header and messages. Finish by making sure you verify on a real desktop and mobile frontend page; reset preview only resets the preview state; if that check fails, the field descriptions help identify whether the problem belongs to content, behavior, transport, or operations.
What this feature does and when to use it
Section titled “What this feature does and when to use it”Use the live preview to match brand colors without changing plugin CSS or the compiled frontend.
Use this feature in the following situations:
- You need the widget to match an approved brand palette without editing plugin source CSS.
- A message, link, input, suggestion, or button is difficult to read against the website theme.
- You need to show or hide the small avatar beside assistant messages.
Where to find it
Section titled “Where to find it”WordPress locationWordPress Dashboard → AI Website Chat → Design
Before you begin
Section titled “Before you begin”- SmartSite Assistant is installed and activated.
- You are signed in with an account that can manage WordPress options.
Set it up step by step
Section titled “Set it up step by step”- Open Design and expand Header and Messages.
- Change one color using a valid CSS color value.
- Check unsaved changes in Live Frontend Preview.
- Continue through Timestamps, Bot Avatar, Input Area, Suggestions, Send Button, Trigger Button, and Hints & Extras.
- Check light/dark-looking page backgrounds and keyboard focus visibility.
- Save Changes.
- Verify on a real desktop and mobile frontend page; Reset Preview only resets the preview state.
Fields, controls, and important values
Section titled “Fields, controls, and important values”These controls change how messages and actions look, not what the AI knows or how it reasons. Their value is practical: readable contrast, clear speaker distinction, visible focus, and an obvious Send button help visitors ask complete questions and understand the reply. Poor styling can make a correct answer feel broken or inaccessible even though the generated content itself is unchanged.
| Field, control, or status | What SmartSite Assistant does with it | How to use it and why it matters |
|---|---|---|
| Header — Gradient Start | Sets the first color used in the header background gradient. | Choose the opening header color together with Gradient End, then inspect the assistant name and icons over the complete blend. A strong swatch can still produce poor contrast midway through the gradient. |
| Header — Gradient End | Sets the second color used in the header background gradient. | Use this color to complete the header gradient rather than judging it as an isolated swatch. Preview both ends at once and make sure neither side hides the title, status, avatar edge, or controls. |
| Header — Title Color | Sets the assistant name color in the chat header. | Set the assistant name apart from the header background without making it compete with navigation controls. Check long display names and both gradient extremes before settling on the color. |
| Header — Status Text | Sets the color of the availability/status wording below the header title. | Set the short availability wording shown beside the status indicator in the chat header. Use factual language that matches actual support expectations; changing this text does not monitor OpenAI health or prove a human is online. |
| Header — Icon Color | Sets the color of header controls such as navigation or close icons. | Give back, close, and other header icons enough contrast to look interactive in every header state. Verify keyboard focus separately, because a visible icon is not automatically a visible focus indicator. |
| Header — Avatar Border | Sets the border color around the header avatar. | Use the border to keep the avatar recognizable where its edge meets the gradient. A subtle separation is usually enough; an overly prominent ring can distract from the assistant name and controls. |
| Header — Avatar Icon | Sets the foreground/icon color used inside the header avatar presentation. | Choose a foreground color that keeps the avatar symbol legible inside its own background and border. Inspect it at the small public size, where low-contrast detail disappears more quickly than in the preview. |
| Messages — Container Background | Sets the main conversation-area background behind message bubbles. | Treat this as the canvas behind the whole conversation. It must support assistant bubbles, visitor bubbles, links, timestamps, and decorative dots without making a long exchange tiring to read. |
| Messages — Dot Pattern Color | Sets the decorative dot-pattern color in the message area. | Keep the decorative pattern quieter than the messages placed over it. If the dots compete with punctuation or small text, reduce their contrast rather than changing the more important message colors. |
| Messages — Bot Bubble Background | Sets the background color of assistant message bubbles. | Pair this background with Bot Text Color so assistant replies are clearly readable and visually distinct from visitor messages. Test paragraphs, lists, code, and links—not only the short preview sentence. |
| Messages — User Bubble Background | Sets the background color of visitor message bubbles. | Choose a visitor-bubble color that distinguishes questions from answers while preserving comfortable contrast with User Text Color. Check multi-line prompts because large saturated blocks can become visually heavy. |
| Messages — Bot Text Color | Sets the text color inside assistant message bubbles. | Read a full assistant response against the bot bubble before approving this color. Fine contrast matters here because answers may contain long explanations, emphasis, lists, and linked sources. |
| Messages — User Text Color | Sets the text color inside visitor message bubbles. | Make typed questions effortless to reread inside the visitor bubble. A question should remain clear in long messages and at reduced mobile brightness, not merely pass in a large desktop preview. |
| Messages — Generic Text Color | Sets the fallback message-area text color where a more specific color is not used. | Set a dependable fallback for message-area text that does not receive a more specific color. Compare it with the container and both bubble backgrounds so unusual states do not inherit an unreadable combination. |
| Messages — Link Color | Sets the color of links rendered in assistant Markdown and automatic links. | Make links recognizable inside assistant Markdown without relying on color alone. Check visited, hovered, and keyboard-focused links against the bot bubble, especially when the answer contains several references. |
| Messages — Font Size | Accepts a CSS font-size value such as 14px for conversation text. | Choose a valid CSS size that remains comfortable for complete answers on phones and desktops. Avoid shrinking text to fit more content; scrolling is preferable to making important guidance difficult to read. |
| Timestamps — Bot Timestamp | Sets the timestamp color next to assistant messages. | Keep assistant timestamps visible enough to establish sequence without drawing attention away from the reply. Test the color beneath short and long bot bubbles in both light and dark surroundings. |
| Timestamps — User Timestamp | Sets the timestamp color next to visitor messages. | Use a subdued but readable color for the time attached to visitor messages. It should work with the user-bubble palette and remain distinguishable when two questions are sent close together. |
| Timestamps — Generic Timestamp | Sets the fallback timestamp color where a message-specific value is not used. | Provide a safe fallback for any timestamp that does not receive a speaker-specific value. Check it against the conversation background as well as bubble edges where placement can make contrast harder to predict. |
| Bot Avatar — Show Avatar | Uses flex for Visible or none for Hidden beside assistant messages. | Keep avatars when they help readers identify the assistant in a mixed conversation; hide them when space is tight or the repeated image adds clutter. Compare several consecutive replies before deciding. |
| Input — Container Background | Sets the background around the complete composer/input area. | Use this color to separate the entire composer from the message history and surrounding page. The boundary should remain clear when the text area, icons, hint, and Send button are all visible. |
| Input — Textarea Background | Sets the background inside the visitor message field. | Give the typing area a recognizable editable surface inside its container. Check empty, focused, filled, disabled, and validation states so visitors never have to guess where their question belongs. |
| Input — Text Color | Sets the color of text the visitor types. | Choose a color that keeps the visitor’s typed question readable before it is sent. This is especially important for longer prompts, where faint text makes errors and missing details harder to notice. |
| Input — Placeholder Color | Sets the color of the input hint before the visitor types. | Keep the hint clearly different from entered text while still readable. The placeholder disappears as soon as typing starts, so it should suggest an action rather than carry instructions the visitor must remember. |
| Input — Icon Color | Sets supporting icon color in the input area. | Set supporting composer icons apart from the textarea without making them more prominent than the Send action. Check their normal, hover, disabled, and focused states where those states are available. |
| Suggestions — Border Color | Sets the default border color of suggested-question buttons. | Use the default border to show that each suggestion is a separate clickable choice. It should remain visible against the suggestion background and the conversation area without resembling a disabled control. |
| Suggestions — Background | Sets the default background of suggested-question buttons. | Choose a calm surface that groups starter questions without overpowering the conversation. Read the longest saved suggestion inside it to confirm that wrapping, contrast, and the button boundary remain comfortable and clear. |
| Suggestions — Text Color | Sets the suggested-question label color. | Make every starter question easy to scan before it is sent as a real message. Check the longest label and avoid a palette that makes suggestions look like muted explanatory text. |
| Suggestions — Hover Border | Sets the border color when a pointing device hovers a suggestion. | Use the hover border to give pointer users a clear response before clicking. Keep the change noticeable but related to the normal border so the button does not appear to jump between unrelated styles. |
| Suggestions — Hover Background | Sets the background when a pointing device hovers a suggestion. | Select a hover surface that confirms which question will be submitted. It must preserve text contrast and should not be the only feedback available to keyboard or touch users. |
| Suggestions — Focus Color | Sets the visible keyboard-focus treatment color for suggestions. | Reserve this color for a clearly visible keyboard focus treatment around suggestion buttons. Test tab navigation across the complete list; focus must remain obvious even when it overlaps border and hover colors. |
| Suggestions — Toggle Color | Sets the control color used to expand or collapse suggestions. | Make the expand-or-collapse control easy to find without competing with the questions themselves. Verify both expanded and collapsed states so the chosen color remains meaningful throughout the interaction. |
| Send Button — Gradient Start | Sets the first background-gradient color of the send button. | Build the first half of the Send button background with its ending color in view. The combined gradient must keep the icon recognizable in normal, hover, focus, and disabled states. |
| Send Button — Gradient End | Sets the second background-gradient color of the send button. | Complete the Send button palette while preserving a clear primary action. Compare it with the input container and launcher so visitors do not confuse opening chat with submitting a message. |
| Send Button — Icon Stroke | Sets the outline/stroke color of the send icon. | Set the outline of the Send symbol so its shape remains clear over the full button gradient. Inspect the smallest mobile rendering, where thin low-contrast strokes can disappear. |
| Send Button — Icon Fill | Sets the filled area color of the send icon. | Use the fill to reinforce the Send icon without merging it into the surrounding stroke or gradient. Check whether the resulting symbol still reads as an action rather than decoration. |
| Trigger Button — Gradient Start | Sets the first background-gradient color of the floating launcher. | Choose the launcher’s first gradient color against the actual website background, not only the documentation preview. It should attract attention without being mistaken for a warning or blocking nearby content. |
| Trigger Button — Gradient End | Sets the second background-gradient color of the floating launcher. | Finish the floating launcher gradient and inspect the blend over several page sections. A button that works over a white hero may disappear against a similarly colored footer or mobile bar. |
| Trigger Button — Icon Color | Sets the chat icon color inside the floating launcher. | Keep the chat symbol immediately recognizable inside the launcher at its smallest size. Test contrast over both gradient ends and make sure the icon remains visible when the button receives focus. |
| Hints — Hints Text Color | Sets helper text color near the composer. | Give composer hints enough contrast to be useful while keeping them secondary to the message field. If visitors must strain to read the shortcut or help text, the hint is not serving its purpose. |
| Hints — Enter Badge Background | Sets the background of the keyboard Enter hint badge. | Set the key badge apart from the composer surface so it reads as a keyboard hint. Coordinate it with the badge border and text rather than choosing three independent colors. |
| Hints — Enter Badge Border | Sets the border of the keyboard Enter hint badge. | Use the border to define the Enter key shape against its background. The edge should remain visible without making the small badge look like the primary action button. |
| Hints — Enter Badge Text | Sets the text color inside the Enter hint badge. | Make the key label readable inside its badge at normal zoom and on a phone. Test it with the chosen badge background and border, since all three values form one visual control. |
| Hints — Typing Dot Color | Sets the animated dot color while the assistant is responding. | Choose an animation color that is noticeable while a response is being prepared but not alarming. It signals activity only; it should not resemble an error, warning, or completed state. |
| Hints — Status Dot Color | Sets the small status indicator dot in the header. | Use the header dot as a subtle availability cue and pair it with honest status wording. Color alone should not promise service health, and visitors should not need it to understand whether chat is usable. |
How to confirm it is working
Section titled “How to confirm it is working”Confirm Widget Colors and Styling with the smallest representative end-to-end test. When the result differs from the success description, keep the exact input and state so troubleshooting can identify the responsible layer without changing unrelated AI settings.
Practical example
Section titled “Practical example”Apply a brand blue to header/trigger gradients while retaining contrast between bot and user messages.
Recommended practice
Section titled “Recommended practice”- Change one part of Widget Colors and Styling at a time and keep a short record of the previous value and test result.
- Check the public widget with keyboard, touch, light, dark, desktop, and mobile conditions relevant to the site.
Important warnings
Section titled “Important warnings”Common problems and focused checks
Section titled “Common problems and focused checks”| Problem | What to check and what to do next |
|---|---|
| Widget Colors and Styling is missing or does not match this guide. | Confirm the plugin is active and the account can manage WordPress options. Compare the saved public widget with the preview and account for caching, theme CSS, and viewport width. |
| A change on Widget Colors and Styling does not produce the expected result. | Keep the exact notice and test case, then review the browser console and WordPress/PHP log. Compare the saved public widget with the preview and account for caching, theme CSS, and viewport width. |
Screen reference
Section titled “Screen reference” Screenshot capture pending /images/screenshots/appearance/design.webp
- Capture
- Show the Design screen with Header and Messages expanded and the live preview displaying sample bot/user messages.
- Show
- Collapsible style sections, color fields, Save Changes, Reset Preview, Live Frontend Preview
- Viewport
- Desktop, 1440 × 900
- Annotate
- Use numbered callouts only for controls referenced in the procedure.
- Redact
- OpenAI keys, tokens, secrets, personal information, private URLs, IP addresses, and conversation text