Widget

Opineos Widget Customization

This page explains every widget setting in project detail. You can control the launcher, panel colors, texts, help items, and behavior while previewing changes in real time.

Architecture

Single Launcher Flow

Button opens a two-view panel: Help links and feedback form.

Personalization

Visual + Text + Help Links

All core parts can be adjusted per project from one settings page.

Validation

Domain Locked

Widget script serves only for matching project domain / origin.

Quick Start (5 Minutes)

Create/select your project and confirm domain.
Open Widget Settings in dashboard.
Set launcher position + icon.
Tune colors for light and dark modes.
Configure 3-5 useful help links and run live preview QA.

Launcher Settings

The launcher controls discoverability and click-through rate. Keep it visible but not intrusive.

Placement Strategy

Bottom Right: default and highest discoverability for most sites.
Top corners work for admin panels with sticky bottom actions.
Avoid overlap with chat widgets, cookie bars, and floating CTAs.

Icon Rules

Use Font Awesome classes (example: fa-regular fa-comment-dots).
Choose semantically clear icons: message, bug, support, question.
Prefer high-contrast launcher icon color over decorative choices.

Theme & Color Tokens

All widget surfaces use tokens. Keep light/dark palettes coherent and accessible.

{
  "widget_theme": "auto",
  "launcher_bg_color": "#2ad9c3",
  "launcher_icon_color": "#102236",
  "header_bg_color_light": "#c7f5eb",
  "header_bg_color_dark": "#133143",
  "panel_bg_color_light": "#f5f8fd",
  "panel_bg_color_dark": "#0d1e2f",
  "help_arrow_bg_color": "#e9f9f6",
  "help_arrow_icon_color": "#1db9a7",
  "rate_track_bg_color": "#dce9e6",
  "rate_active_text_color": "#14c8b0"
}

Token Groups

Header: icon, background, gradient end, text.
Panel: background and border.
Cards: background, border, title, description.
Inputs: background, border, text.
Feedback Rating: track, number, active state.
Help Link Icon: icon background and icon color.

Contrast Targets

Primary actions should remain obvious in both themes.
Input text must stand out clearly from input background.
Help card descriptions should never look disabled/unreadable.
Keep rating numbers readable in default and active states.

Text Content Customization

Use concise and action-driven copy. Shorter labels improve completion rates.

Home View Texts

Header title (Need Help?)
Main action (Leave Feedback)
Help item titles and descriptions

Form View Texts

Back text, rating question, category label
Contact/message labels and placeholders
Submit CTA and validation-friendly wording

Footer branding is fixed by policy: Powered by Opineos with link to opineos.com.

Help Menu Links

Use Help Menu as a fast support router: docs, support, roadmap, status, billing.

Rules & Limits

Maximum 5 items.
Each item needs title + link.
Description is optional but highly recommended.
Relative links resolve to visitor’s current origin.

Recommended Set

Documentation — setup and usage guides
Contact Support — direct support channel
Known Issues / Status — operational transparency
Roadmap — upcoming improvements

Live Preview QA Checklist

Run this full pass before going live on production pages.

Visual QA

Launcher does not overlap fixed UI elements.
Card text remains readable in light and dark.
Input/placeholder contrast is acceptable.
Help icon and rating states are visible.

Flow QA

Home → Feedback → Back transitions are smooth.
Email validation and message length errors are clear.
Help links open correct targets.
Feedback submission reaches dashboard records.

Best Practices

Do

Keep copy short and explicit.
Prioritize contrast over decorative colors.
Use meaningful feedback categories.
Test mobile first, then desktop edge cases.
Review incoming feedback weekly and refine labels.

Avoid

Overly long titles and CTA labels.
Low-contrast color pairs in dark mode.
Ignoring help link maintenance (broken URLs).
Deploying without validation/error flow testing.
Using non-matching domain/origin for script embedding.