Configure the chat widget's appearance, branding, position, business hours, and display behavior.
The General Settings panel is where you control how the Helpon chat widget looks, feels, and behaves on your website. From branding and colors to business hours and display rules, every visual and behavioral aspect of the front-end widget is configured here.
To access these settings, navigate to Helpon → Settings → General in your WordPress admin dashboard. The panel is organized into tabs: Appearance, Branding, Position, Business Hours, Custom CSS, Display Rules, and Notifications.
Most appearance changes include a live preview panel on the right side of the settings screen. Changes are not applied to your live site until you click Save Settings.
The Appearance tab controls the overall visual style of the chat widget, including colors, sizing, border radius, and shadow effects. These settings apply globally to both the chat launcher button and the open chat window.
Use the color pickers to define your Primary Color (used for the header, send button, and launcher) and Secondary Color (used for visitor message bubbles and accents). Both accept HEX, RGB, or HSL values.
Select from three size presets: Compact (360px wide), Standard (400px wide, default), or Large (450px wide). This sets the width of the chat window when open.
The Border Radius slider controls the roundness of the chat window corners (0px for sharp, up to 24px for fully rounded). Toggle the Shadow switch to add or remove a drop shadow effect behind the widget.
The Branding tab lets you personalize the chat widget with your business identity. These elements appear in the chat header and greeting area, giving visitors a familiar and trustworthy experience.
Click the Upload Logo button or drag and drop an image file. Supported formats are PNG, JPG, SVG, and WebP. Recommended size is 200x60px. The logo appears in the chat window header.
The Business Name is displayed prominently in the chat header below or beside your logo. The Tagline appears as a subtitle, such as "We typically reply in a few minutes" or "Your health, our priority."
Upload separate avatars for the AI Assistant and Human Agent. These appear next to each message in the chat. Square images (80x80px or larger) work best. If no avatar is uploaded, Helpon uses the default bot icon for AI and the agent's Gravatar for humans.
Control exactly where the chat widget appears on the screen and how the launcher button is styled. These settings help you integrate the widget seamlessly with your existing site layout.
| Setting | Options | Default | Description |
|---|---|---|---|
| Position | Bottom Right, Bottom Left | Bottom Right | Which corner of the screen the widget anchors to |
| Horizontal Offset | 0 – 100px | 20px | Distance from the left or right edge of the viewport |
| Vertical Offset | 0 – 100px | 20px | Distance from the bottom edge of the viewport |
| Z-Index | 1 – 2147483647 | 999999 | CSS stacking order; increase if the widget appears behind other elements |
| Launcher Style | Bubble, Bar | Bubble | Bubble shows a circular floating icon; Bar shows a wider pill-shaped button with text label |
| Launcher Text | Any text (max 30 chars) | Chat with us | Visible only when Launcher Style is set to Bar |
If your site has a cookie consent banner, floating action button, or other fixed-position elements at the bottom of the page, increase the vertical offset to prevent overlap. A value of 80–100px usually provides enough clearance.
Define your business operating hours so the widget can automatically switch between online and offline modes. When outside business hours, visitors see an offline message and can leave a contact request instead of starting a live chat.
Toggle the Enable Business Hours switch to activate scheduled availability. When disabled, the widget is always treated as online (or follows agent availability if live chat is enabled).
For each day of the week, toggle whether that day is active and set opening and closing times using the time pickers. You can set different hours for each day or mark specific days as closed.
Select your Timezone from the dropdown to ensure hours are calculated correctly. Set the Offline Message text shown to visitors outside business hours, and optionally enable an Auto-Reply that sends an automated response when no agents are available.
For advanced customization beyond the built-in settings, Helpon provides a CSS code editor where you can inject custom styles directly into the widget. This is useful for matching specific brand guidelines, adjusting font sizes, or overriding default styles.
Navigate to Helpon → Settings → General → Custom CSS to open the code editor. Styles entered here are scoped to the Helpon widget container and will not affect your main site styles.
/* Change the chat launcher bubble color */
.helpon-launcher {
background-color: #1a73e8 !important;
box-shadow: 0 4px 12px rgba(26, 115, 232, 0.4);
}
/* Customize the chat header */
.helpon-header {
background: linear-gradient(135deg, #1a73e8, #0d47a1) !important;
border-radius: 16px 16px 0 0;
}
/* Style the visitor message bubbles */
.helpon-message--visitor .helpon-message-bubble {
background-color: #e3f2fd !important;
color: #1a237e;
border-radius: 16px 16px 4px 16px;
}
/* Adjust the send button */
.helpon-composer-send {
background-color: #1a73e8 !important;
border-radius: 50%;
}
Helpon's built-in styles use moderate specificity. In most cases you should not need !important. If a style is not applying, try increasing the selector specificity (e.g., #helpon-widget .helpon-header) before resorting to !important.
Display rules give you granular control over where and to whom the chat widget is shown. You can target specific pages, post types, user roles, and device types. Configure these at Helpon → Settings → General → Display Rules.
| Rule | Description | Default |
|---|---|---|
| Show on all pages | Display the widget globally across the entire site | Enabled |
| Hide on specific pages | Enter comma-separated page IDs or slugs to exclude | None |
| Show only on specific pages | Only display the widget on listed pages (overrides global setting) | Disabled |
| Post types | Select which post types display the widget (e.g., Posts, Pages, Products, Custom types) | All types |
| User roles — Show | Only show the widget to users with specific roles (e.g., Subscriber, Customer) | All roles |
| User roles — Hide | Hide the widget from users with specific roles (e.g., Administrator, Editor) | None |
| Hide for logged-in users | Hide the widget for all authenticated WordPress users | Disabled |
| Desktop visibility | Show or hide the widget on desktop devices (screen width ≥ 1024px) | Show |
| Tablet visibility | Show or hide the widget on tablet devices (768px – 1023px) | Show |
| Mobile visibility | Show or hide the widget on mobile devices (screen width < 768px) | Show |
| URL contains | Show or hide the widget when the page URL contains a specific keyword or path segment | None |
When conflicting rules are set, more specific rules take priority. For example, "Show only on specific pages" overrides "Show on all pages," and role-based hide rules override role-based show rules. Device rules are always evaluated last.
Configure how you and your visitors are notified about new messages. Sound alerts and desktop notifications help agents respond quickly, while email notifications ensure offline messages are never missed.
Desktop notifications require the visitor's browser to grant permission. Helpon will prompt for permission when a user first opens the chat. If the user declines, desktop notifications will not work until they manually enable them in their browser settings.
Below are the most common issues related to General Settings and how to resolve them.
If the chat widget appears broken or unstyled, your theme or another plugin may be injecting global CSS that conflicts with Helpon's styles.
* { box-sizing: border-box; } or div { margin: 0; } that may affect the widget.If you change your primary or secondary colors but the widget still shows the old colors, clear all caching layers: browser cache, WordPress caching plugin, server-side cache (e.g., Varnish, Cloudflare), and any CDN cache. Helpon appends a version query string to its CSS, but aggressive caching may still serve stale files.
If the widget shows on pages where it should be hidden (or vice versa), verify that you are using the correct page IDs or slugs. You can find a page's ID by hovering over its title in Pages → All Pages and checking the URL. Also ensure there is no shortcode override on the page that forces the widget to display.