Skip to main content

Web Chat Setup

Add an AI-powered chat widget to your website to engage visitors and capture leads.

Accessing Web Chat​

  1. Go to Integrations in the sidebar
  2. Click Website — this opens the Web Integrations page
  3. Click New Integration

Creating a Web Chat Integration​

The creation form shows a Live Preview beside it, so you can see exactly how the widget will look as you configure it.

Integration Name​

Give your integration an internal name. This is for your reference only — useful if you have multiple web chats.

Examples:

  • "Main Website Chat"
  • "Product Pages Chat"
  • "Support Center Widget"

Domain​

Enter the domain where this chat will appear (e.g., yoursite.com).

Security

The web chat will only work on the domain you specify. If someone copies your code snippet and puts it on a different website, it will fail to load. Your snippet is safe to use.

Primary Color​

Select a color that matches your brand. It's used for the launcher, chat header, and customer message bubbles.

The form checks the contrast of your color as you pick it: white text is overlaid on this color, so the form blocks colors that are too light and asks you to pick a darker shade.

Chat Style​

Choose how the widget looks:

StyleAppearance
ClassicTraditional round chat bubble launcher
ModernPill-shaped launcher

Launcher Icon​

Choose what appears on the chat launcher:

  • Default — the standard chat icon
  • Agent Photo — your default agent's photo (you must pick a Default Agent first)

Starter Messages​

Quick options shown above the input before a chat starts — clicking one sends it. You can define them per language (English and Arabic), with up to 6 messages per language and a maximum of 150 characters each.

Example: "What are your business hours?"

Default Agent​

Pick which AI agent handles chats from this integration. You can change this anytime after creation.

Initial Form​

The Initial Form section controls what to collect from visitors before they start chatting. Visitors see it as a short "Before we start" form.

  • Enable Form — turn the form on or off
  • Collect Name
  • Collect Email
  • Collect Phone

We recommend collecting at least Name to:

  • Protect against bots
  • Give your AI agent more context
  • Allow follow-up outside the chat
note

Email and phone numbers are not verified — visitors may enter incorrect information. This is intentional to reduce friction and make it easier for visitors to start chatting.

Create Integration​

Click Create Integration to save. You'll be returned to the Web Integrations page where you can see your new integration.

Installing the Widget​

After creating your integration:

  1. Go back to Integrations > Website
  2. Find your newly created web chat
  3. Click the </> icon to open the Install Orki Webchat dialog

The dialog has three tabs, one per installation method:

HTML​

The HTML tab shows a ready-made loader snippet, already filled in with your Tenant ID, Integration ID, and the correct script URL for your environment. Copy the snippet from the dialog — don't hand-write it — and paste it just before the closing </body> tag on every page where the chat should appear.

Next.js / React​

The Next.js / React tab uses the official npm package:

pnpm add @orki/webchat-react

Drop the component in your root layout (the dialog shows this snippet with your IDs already filled in):

import { OrkiWebChat } from '@orki/webchat-react';

export default function RootLayout({ children }) {
  return (
    <>
      {children}
      <OrkiWebChat
        tenantId="YOUR_TENANT_ID"
        integrationId="YOUR_INTEGRATION_ID"
        scriptUrl="SCRIPT_URL_FROM_DIALOG"
      />
    </>
  );
}

For programmatic control (opening the chat from your own button), wrap your app in OrkiWebChatProvider and use the useOrkiWebChat() hook — the dialog includes a copyable example.

WordPress​

The WordPress tab offers a downloadable plugin — no theme edits needed:

  1. Click Download .zip in the dialog
  2. In WordPress admin, go to Plugins → Add New → Upload Plugin
  3. Upload the ZIP, click Install Now, then Activate
  4. Go to Settings → Orki Webchat and paste your Tenant ID, Integration ID, and script URL (all shown in the dialog)

Other Platforms​

For any platform that lets you inject custom HTML, use the snippet from the HTML tab:

PlatformWhere to Add Code
ShopifyThemes > Edit Code > theme.liquid before </body>
WixSettings > Custom Code > Body End
SquarespaceSettings > Advanced > Code Injection > Footer
WebflowProject Settings > Custom Code > Footer

Widget Controls​

Once installed, the widget gives visitors:

  • An enlarge button to expand the chat window
  • An unread badge on the launcher when new messages arrive while closed
  • Remembered open state — the chat stays open/closed across page navigations
  • Full RTL support for Arabic

Managing Your Integration​

Integration Controls​

Each web chat integration has these controls:

Icon/ControlAction
</>Open the install dialog (code snippet, npm package, WordPress plugin)
Pencil iconEdit settings
Active toggleEnable/disable (hides from website when off)
Trash iconDelete the integration

Default Agent​

Use the Default Agent setting to select which AI agent responds to messages.

You can change the assigned agent anytime.

Editing Settings​

Click the pencil icon to edit any of the settings above — name, domain, color, chat style, launcher icon, starter messages, default agent, and the initial form.

Changes apply immediately — no need to update the code snippet on your website.

Disabling vs Deleting​

Disable (recommended): Toggle off to hide the chat from your website. The code snippet can stay on your site — it just won't load.

Delete: Removes the integration entirely. Only do this if you're sure you won't need it again. If you need to change settings (like domain), editing is better than deleting and recreating.

Why Multiple Web Chats?​

Most customers only need one web chat. But multiple integrations are useful for:

Different Agents on Different Pages​

You might want:

  • A sales agent on product pages
  • A support agent on help/FAQ pages
  • A general agent on the homepage

Create separate web chats, assign different agents, and place each snippet on the relevant pages.

Different Websites​

If you run multiple websites, create a web chat for each domain.

A/B Testing​

Test different colors, styles, or form configurations to see what converts better.

Integration Limits​

The number of web chat integrations you can create depends on your plan. Check your limits in Settings > Billing.

Next Steps​