Channels & Integrations · Channels

Website chat widget

Add a branded chat bubble to your website. Visitors chat with your AI agent and your team, and every chat lands in the inbox.

The Inboxi widget is a chat launcher for any website. Visitors open it, ask a question and get an instant answer from your AI agent, or from your team in the inbox. Conversations are kept per visitor, so they can come back later and continue. You customize and install it from Settings › Channels › Live Chat Widget › Customize.

inboxi.app/settings/widget-customization
Widget Settings with the live preview on the right.
  1. 1Website widget, or the widget of your Inboxi Store.
  2. 2Widget Status: live on site or offline.
  3. 3AI Copilot: let an AI agent reply automatically.
  4. 4Which AI agent answers.
  5. 5Preview on mobile or desktop.

Customize the widget

Every change shows instantly in the preview. Click Save Changes to publish it to your site.

SectionOptions
Status & AIWidget Status (Live on site / Offline), AI Copilot on or off, and the AI Agent (a specific agent or the organization default).
IdentityBusiness Name, Logo, Welcome Message.
Conversation experienceTeam intro line, response time text, team avatars, an office hours banner, an email capture card, and a conversation rating at the end of the chat.
Colors & brandingPrimary brand color (launcher, visitor messages, highlights), header background and text, chat background, bot message background and text, visitor message text.
Notification messagesShort bubbles that pop up over the launcher to invite visitors, such as “Need help choosing?”.
Style & positionButton layout (Icon Only, With Bubble, Expanded), button label, position (left or right), corner shape (square, rounded, circle).
If AI Copilot is on but no agent is selected and your workspace has no default agent, the widget will not reply. Pick an agent or set a default in AI Agents.

Install on your website

At the bottom of Widget Settings, the Installation box shows your snippet with your own app ID already filled in, with tabs for HTML, Next.js, React.js and WordPress. Copy it from there. It looks like this:

HTML, before </body>
<!-- Inboxi Smart Widget -->
<script src="https://inboxi.app/widget-loader.js"
        data-app-id="YOUR_APP_ID"
        data-base-url="https://inboxi.app"
        defer></script>
Next.js
import Script from 'next/script';

<Script
  src="https://inboxi.app/widget-loader.js"
  data-app-id="YOUR_APP_ID"
  data-base-url="https://inboxi.app"
  strategy="afterInteractive"
/>
WordPress: functions.php
function add_inboxi_widget() {
  echo '<script src="https://inboxi.app/widget-loader.js" data-app-id="YOUR_APP_ID" data-base-url="https://inboxi.app" defer></script>';
}
add_action('wp_footer', 'add_inboxi_widget');
  1. 1
    Copy your snippet
    From the Installation box in Widget Settings.
  2. 2
    Paste it on every page
    Just before the closing </body> tag, in your site template, theme footer or tag manager.
  3. 3
    Publish and test
    Open your site, start a chat, and check that it appears in Inbox.

Widget for your Inboxi Store

If you use the Inboxi Store, switch to My Store at the top of Widget Settings and choose the Target store. The store widget has its own status, AI agent and design, and is added to your storefront automatically, with no code. Salla and Shopify stores have their own widgets; see Salla and Shopify.

inboxi.app/settings/widget-customization?type=store
Widget Settings › My Store.
  1. 1Choose which store this widget belongs to.
  2. 2Warning shown when AI is on but no agent will reply.

Logged-in visitors and the JavaScript API

If your site has logged-in users, you can tell the widget who they are so their chats are linked to the right contact and merged across devices, and you can open or control the widget from your own code. See the Website widget SDK and Widget identity & merge.