Web chat widget

The web chat widget puts a chat button on your website. Visitors open it to talk to your AI assistant or your team, and every conversation lands in your inbox alongside your other channels. This page is for business owners and site managers. Developers who need script options or the JavaScript API should read Widget JavaScript API.

Install the widget#

1. Open Integrations in the dashboard.
2. In the channel list, choose the website chat option (Website Widget).
3. Pick the install method that matches your site: HTML, React, Next.js, JavaScript, or React Native.
4. Copy the code snippet and paste it into your website, preferably just before the closing </body> tag. On a site builder such as WordPress, Shopify, Wix or Webflow, paste it into the "custom code" or "footer scripts" area.
5. Publish your site and reload a page. The chat button appears in the corner.

Your Organization ID is shown on the same page. You need it if you write the snippet by hand:

<script
  src="https://usesela.com/widget.js"
  data-organization-id="YOUR_ORGANIZATION_ID"
  async
></script>

You can check the result before publishing to your live site by opening the page on a staging address, or by opening your site in a private browser window after you save.

Appearance#

Open Widget Customization in the dashboard to change how the widget looks. Save with Save Changes.

Available script attributes for the button are data-position, data-theme, data-primary-color, data-button-size, data-widget-icon, data-z-index and data-hide-on-mobile (hides the widget on screens 768 px wide or narrower).

Greeting and messages#

Under Messages in Widget Customization:

• Greeting Message is the first thing a visitor sees when they open the chat. Keep it short and say what the assistant can help with.
• Offline Message is shown when your team is not available, based on your business hours. It is useful for telling visitors when to expect a reply and inviting them to leave their details.

Quick suggestions#

Under Quick Suggestions, turn on Enable Suggestions and add short questions such as "Pricing information" or "Where is my order?". Visitors can tap one to start the conversation instead of typing. Use + Add Suggestion to add more and remove ones you no longer want.

Behavior settings#

Under Behavior:

• Show Powered By displays "Powered by" branding inside the widget. It can be turned off on the AI Assist add-on or higher (see Plans and billing).
• Agent Availability Status shows online or offline status based on your schedule. The widget reads the same schedule as every other channel from Business hours settings, so edit it there once. The customization page has an Open business hours settings link.
• Conversation Timeout closes a conversation automatically after a period of inactivity so the next message starts a fresh conversation. Choose a number of minutes, or Disabled to keep conversations open.
• Media Understanding (images & voice notes) lets the assistant read images and listen to voice notes, then reply. These are billed as normal AI replies. When it is off, the assistant sends a fixed message saying it cannot read media. See Credits and usage.

Phone contact#

Under Phone Contact Settings, set Contact Type to No Phone Support or Human Support Number. With a number set, customers can call your human support line from the widget. Browser voice chat with the assistant is configured in Voice Assistant, not here. See Voice assistant.

Out of credits message#

If AI credits run out, the assistant cannot answer and the widget shows a fallback message. See Credits and usage for what happens and how to top up.

Contact sessions and chat history#

When a visitor first opens the widget they are asked for their name and email (unless you use identity verification, see below). Sela creates a contact session for them and remembers it in their browser.

• History belongs to the session, not to the email address. A returning visitor on the same browser sees their earlier chat. The same person on another device starts with a new session and does not see the first device's history.
• By default a session lasts 24 hours and can be extended up to 30 days.
• The manual sign-in is limited to 20 attempts per hour for each organization and email, to prevent abuse.
• Each visitor becomes a contact in your contacts and CRM, and the conversation appears in the inbox marked as web.
• Clearing browser data or using a private window creates a fresh session.

Media and attachments#

Visitors can send photos, files and voice notes from the chat. Uploads are checked for file type and size before they are accepted, and a closed conversation does not accept new uploads. If a file is refused the visitor sees a short error. With Media Understanding on, the assistant can also read images and transcribe voice notes.

Your team sees attachments in the inbox next to the message.

Identity verification for logged-in customers#

If your website has customer accounts, you can have the widget open as the signed-in customer with no login form. Your server signs the customer's email with a shared secret. This requires the AI Assist add-on and a developer to set it up. See Identity verification (HMAC). The switch to require it for everyone (Disable Manual Login (Strict Mode)) is in the Identity Verification card on Integrations.

Troubleshooting: the widget does not appear#

Work through these in order.

1. Check the attribute name. It must be data-organization-id. If the snippet says data-org-id, change it. This is the most common cause.
2. Check the Organization ID. Copy it again from Integrations. A wrong or missing ID silently disables the widget.
3. Confirm the script is on the page. View the page source and search for widget.js. Site builders sometimes strip scripts from certain page types or require you to publish.
4. Look at the script type. It must be a normal script tag, not type="module", with the attributes written on the tag.
5. Check hide on mobile. If data-hide-on-mobile="true" is set, the widget is hidden on phone-sized screens.
6. Check your Content Security Policy. If your site sends one, it must allow https://usesela.com for scripts and https://widget.usesela.com for frames. Ask your developer or hosting provider.
7. Use Test chat. On the Integrations page, the install dialog has a Test chat button that opens your chat at https://widget.usesela.com/?orgId=<your workspace ID> in a new tab. If it works there but not on your site, the problem is the snippet or your site, not your workspace.
8. Try another browser profile. Ad blockers and privacy extensions can block the script. Test in a private window with extensions off.
9. Button shows but the chat is blank or shows an error. The organization may not match a Sela workspace, or the page blocks frames. Check the ID and your CSP.
10. Chat opens but asks for login and rejects visitors. Strict mode may be on. See identity verification above.
11. Button color, size or position did not change. Those are set by the snippet attributes, not only by Widget Customization.

If the widget still does not appear, note the page address and what you see, and contact support. For messages that are sent but do not arrive, see Delivery troubleshooting.

Related pages#

• Widget JavaScript API for developers.
• Identity verification (HMAC) for logged-in customers.
• Inbox and conversations for replying to visitors.
• Knowledge base so the assistant can answer visitor questions.