Website Widget
The OneTwoAgent widget lets customers message you directly from your website on desktop and mobile, with all chats in your Conversations inbox.
AI website chat widgetLead capture from website chatNo-code web chat setupCustomer messaging on your website
What this article covers
- How to customize widget design and behavior.
- How to install the widget on your website.
- How to apply safety settings like allowed domains and excluded pages.
1) Open Widget settings
Go to Channels -> Widget. If widget is not enabled yet, enable it first.
- Widget preview.
- Customization settings.
- Installation code.
2) Customize the widget design
You can match the widget to almost any website style.
- Widget colors: button color, background, text colors, accent color.
- Typography: font family or style presets, font size where available.
- Icon and brand elements: launcher icon, business name in header, optional subtitle or short greeting.
- Position and layout: bottom-right or bottom-left, spacing from screen edges, mobile behavior.
- Behavior: auto-open vs click-only, greeting visibility, all pages vs selected pages.
Notes
- Keep the widget minimal: simple colors, clear title, and one short greeting.
3) Install the widget on your website
Standard install (recommended).
- 1Copy widget script from Channels -> Widget -> Install code
- 2Add it to your website so it loads on every page.
- 3Best place: inside <head>, before </head>.
- 4If <head> is not available, place before </body> (works, but may load slightly slower).
Notes
- After installation and publish, widget should appear on your live site.
4) Install on popular platforms
- Shopify: Online Store>Themes>Edit code -> layout/theme.liquid -> paste before </head> -> Save
- Wix Option A: Settings -> Custom Code -> Add New Tool -> paste code -> Load on all pages -> place in Head -> Save and publish.
- Wix Option B: add script through global site scripts/plugin area and ensure load on all pages.
- Webflow: Project Settings>Custom Code>paste in Head Code -> Save and publish.
- WordPress: use header scripts plugin (Header section) or paste into header.php before </head>.
- Custom-coded sites: place script in global HTML template inside <head> or before </body>.
Or send this to your developer
6) Security and control settings
Recommended settings for safer and cleaner behavior.
- Allowed domains: prevent widget code from being reused on unrelated websites.
- Example domains: yourdomain.com, www.yourdomain.com, shop.yourdomain.com.
- Excluded pages: hide widget where it is not relevant.
- Common exclusions: checkout, order confirmation, account/login, privacy, and technical pages.
- Path examples: /checkout, /account, /thank-you.
Notes
- Start simple: enable widget everywhere first, then exclude only pages you truly do not want.
7) How widget chats work in OneTwoAgent
- When customer sends a message in widget, a new conversation appears in Conversations.
- You can always reply manually.
- If Auto Sales is enabled, the assistant can reply automatically using your setup and catalog.
Troubleshooting
- Widget not showing: confirm script is on live site (not only preview), publish changes, verify allowed domains if enabled.
- Widget appears on some pages only: check excluded page rules and confirm script is installed globally.
- Messages not coming in: verify correct OneTwoAgent business account and ensure widget is enabled in Channels -> Widget.
Related guides
Continue with the next setup steps around channels, booking, scheduling, or automation.
Common questions
Can I install the widget without a full custom integration?
Yes. The normal setup is a single widget script on your website, plus design and behavior settings inside the dashboard.
Does the widget work on mobile as well as desktop?
Yes. The widget is intended for both desktop and mobile website visitors, with conversations appearing in the same inbox.