Web widget
Let visitors report problems, request features, and get help without leaving your site.
The widget is a small launcher on your site. It opens a panel where visitors can report an issue, request a feature, chat with the assistant, read help articles, and see your news. It needs no account and runs in its own Shadow DOM, so your styles and its styles never mix.
How can we help?Send feedback to Acme StoreThe application in your embed snippet determines where these reports arrive.
Set it up
- Register the website or product in Applications.
- In the sidebar, open Integrations, choose In-app complaint widget, then click Setup.
- Select the application that should receive complaints.
- Customize the widget, then click Save customization.
- Copy the generated embed snippet and add it once before the closing body tag of your website.
Settings are saved per application, and installed widgets pick them up the next time they load. You do not need to replace the snippet after changing the appearance.
Install the snippet
Add the script once, in the shell every page shares. The setup page generates it for HTML, Next.js, and React.
<script
src="https://app.complaintr.com/widget.js"
data-app="Acme Store"
defer
></script>Place it before the closing </body> tag.
Customize
| Setting | Options |
|---|---|
| Position | Bottom right, bottom left, top right, top left |
| Primary color | Header color. Choose a preset gradient (Orange, Emerald, Violet, Sky, Rose, Slate) or any hex color. |
| Home title and message | The greeting and the assistant's first message |
| Launcher icon | Complaintr logo, chat bubble, bug, megaphone, or chevron |
| Launcher button | Accent gradient, white, or dark |
| Announcement banner | Title, short text, and link. Leave the title empty to hide it. |
Click Save customization to apply.
Script attributes
Everything can also be set on the script tag. Saved settings take over when the widget loads.
| Attribute | Purpose |
|---|---|
data-app | Required. Your registered application name. |
data-position | bottom-right, bottom-left, top-right, or top-left |
data-color | Hex color for the header |
data-title | Home title, up to 80 characters |
data-welcome | Home message, up to 240 characters |
data-banner-title, data-banner-text, data-banner-url | The announcement banner |
data-launcher-icon | complaintr, chat, bug, megaphone, or chevron |
data-launcher-style | gradient, white, or dark |
data-ask-examples | Up to 8 example questions separated by ` |
data-locale | Widget language: en or tr. Defaults to the browser language. |
data-endpoint | A different API origin, for local testing or a proxy |
News and help
Widget news publishes announcements to the widget's News tab. Each item has a title, date, badge, summary, content, and a type of News or Changelogs.
Widget help publishes articles to the Help tab. Each article has a title, summary, category, read time, icon, and up to 20 sections, each with a heading, body, and optional code block.
Both belong to the selected application and appear without redeploying your site.
What visitors can do
- Report an issue: a short form with an optional email. It files directly.
- Request a feature: filed as a complaint marked as a feature request.
- Ask or chat: a conversation with the assistant. It asks follow-up questions and files once it has enough detail, without a separate approval step.
- Rate the experience from 1 to 5 on the home screen.
- Messages: every conversation is kept on the visitor's device. Deleting one asks first.
The widget accepts text only. It never exposes your workspace.
Test it
Open a real page with the widget installed. The setup preview does not send anything. Report a test issue, wait for the confirmation, and find it in Complaints with the Web widget source.