Create a branded customer chat experience for your website, full-page chat site, PWA, or shared mobile SDK renderer. Open Integrations to create or select a widget.
Features
Follow the website-channel settings, visitor entry, appearance, and visitor test.
- Visitor Forms: Use the built-in contact form or select a managed form to collect details after chat begins.
- Customizable Appearance: Customize the color, position, and logo of your chat widget to match your brand.
- Custom Messages: Set custom welcome and offline messages to greet your visitors.
- AI Assistant: Assign a custom AI assistant to handle chat conversations.
- Embeddable: Get an embed code to easily add the chat widget to your website.
Creating a New Chat Widget
To create a new chat widget, follow these steps:
- Open Integrations and choose the chat widget connection.
- Click on the New Widget button.
- Configure the widget's tabs:
| Tab | Settings |
|---|---|
| General | Name, active state, visitor form behavior, allowed domains, and default assistant. |
| Appearance | Theme colour, text colour, header text, logo, and launcher position. |
| Messages | Welcome/offline messages, quick actions, slow-response threshold, voice-note duration, and audio preview. |
| Assistant | Customer-visible assistant name and avatar. |
| Support & Feedback | Handoff status labels, expected-response wording, CSAT prompt/trigger, and analytics. |
- Save and test on the website where customers will use it.
The editor does not provide an Advanced custom-CSS tab. Company subdomain, landing-page theme, PWA icons, and publication are configured separately through Subdomain & Branding.
Visitor form behavior
| Option | Information required before chat |
|---|---|
| None (Direct to Chat) | No initial contact form. |
| Require All | Name, email, and phone. |
| Require Email | Name and email; phone optional. |
| Require Phone | Name and phone; email optional. |
| Optional Contact Details | Name required; email and phone optional. |
| Custom form after chat starts | Chat begins immediately; a selected managed form appears after the configured number of visitor messages. |
Contact details are self-reported. A typed phone number is not proof of identity and never grants access to another visitor's conversation or records. Existing required settings normalize to Require All; existing optional settings normalize to Optional Contact Details.
For a custom form, select an active form owned by the widget's company and map its fields to visitor name, email, and phone where appropriate. Other answers stay in the form entry. Set Show after visitor messages to the number of messages the visitor can send before the prompt appears, including the first message.
| Custom form mode | After the threshold |
|---|---|
| Optional | Show once. The visitor can dismiss it and continue chatting. |
| Required | The visitor can dismiss it and continue chatting; it returns after each additional configured number of messages until completed. |
| Strict | Keep the form visible and pause new messages until it is completed. Guidance explains why the form is needed. |
On the full-page chat site, Log in sends a branded email verification link before you start a conversation. The email uses the company sender name and logo, with the subdomain and widget colours. Once you verify the email, that browser can open the widget's conversations associated with the same email, including chats started in other browsers. Open a conversation to read or continue it, mark it read, end it, or leave feedback. Older conversations are available through Load more conversations. The Log in control is not shown in embedded widgets. Typing an email without verifying it never unlocks another browser's conversations.
If a full-page visitor already has a phone number but no email, such as after a WhatsApp handoff, the site prompts them to add an email. They can dismiss the prompt for the current browser session and continue chatting. Submitting the address sends a verification link and keeps their existing chat attached to the same visitor. The prompt stops appearing once an email has been added.
Forms, bookings, and notifications
Configured forms and bookings can open within the shared chat experience. After records exist, visitors can review them through the conditional Forms and Bookings tabs.
The bell controls browser notification permission. Help → Receive updates and offers from this business controls separate, widget-specific marketing consent and is off by default. See Notifications and delivery and Widget campaigns.
Choose where to present the widget
The ecommerce example shows widget appearance, subdomain branding, and the customer shop.
- Embed it in an existing website using the generated script below.
- Publish a branded chat site through Subdomain & Branding. Use the configured public chat link rather than constructing a URL from an internal database ID.
- Offer installation from the full-page site where supported; see Mobile access.
- Embed the shared renderer in an existing mobile app using the mobile SDK guide.
Use widget Appearance settings for the chat interface and the company web profile for landing-page branding and SEO. Setting a custom domain in the editor alone does not configure DNS or complete domain verification.
For secure continuity from WhatsApp, use Channel handoff. For authenticated host apps, use signed mobile sessions.
Embedding the Chat Widget
Start at the installation chapter; use the snippet from your own saved widget.
Once you have created a chat widget, you can embed it on your website. To get the embed code, follow these steps:
- Go to the list of chat widgets.
- Click on the Get Embed Code button for the widget you want to embed.
- Copy the embed code and paste it into the HTML of your website.
The chat widget will then appear on your website, and your visitors will be able to chat with your AI assistant.
Opening the Widget from Your Own Button
After the embed code has been added to your website, you can open the chat widget from any button, link, menu item, or banner on the page.
The simplest option is to call openNvitiChat() from an onclick handler:
<button onclick="openNvitiChat()">
Chat with us
</button>
For a link, prevent the default navigation first:
<a href="#" onclick="event.preventDefault(); openNvitiChat();">
Need help?
</a>
If you want the widget to open directly to the chat screen and focus the message box, use:
<button onclick="openNvitiChat({ view: 'chat', focusMessage: true })">
Start a conversation
</button>
Advanced JavaScript integrations can also use the structured API:
window.NvitiChatWidget.open();
window.NvitiChatWidget.close();
window.NvitiChatWidget.toggle();
Or dispatch browser events:
document.dispatchEvent(new CustomEvent('nviti:chat-widget:open'));
WordPress Integration
Add the generated embed through your WordPress site's supported script settings, or follow the instructions for a widget plugin supplied to your organization.
To learn how to install and configure it, please see our detailed WordPress Integration Guide.
Shared customer context and private media
The full-page chat widget is a customer entry point for the same permitted conversation/customer context reviewed by staff in CRM and Helpdesk. Approved knowledge answers, forms, bookings and human handoff depend on the assistant's actual configuration. A complaint can become an owned Helpdesk ticket while a sales enquiry becomes a CRM follow-up; they remain separate records.
New uploaded chat media follows the tenant/company storage layout. Existing chat paths are retained. Published widget branding uses the intentionally public asset path; that does not make customer attachments public. Supported broadcasts can appear within the customer's widget conversation when channel consent and eligibility permit them.