إنتقل إلى المحتوى الرئيسي

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
  3. Click New Integration

Creating a Web Chat Integration​

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.

Important: Choose a dark color. The secondary color (used for text) is automatically set to a light shade, so light primary colors won't display properly.

Pre-Message Form​

Toggle this to collect information from visitors before they can chat.

When enabled, you'll see options to require:

  • Name — Toggle on to require name
  • Email — Toggle on to require email
  • Phone — Toggle on to require phone number

If a field is toggled on, it's required and will appear in the form. If toggled off, it won't appear at all.

We recommend enabling at least Name to:

  • Protect against bots
  • Give your AI agent more context
  • Allow follow-up outside the chat
ملاحظة

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 main Website page where you can see your new integration as a card.

Getting the Code Snippet​

After creating your integration:

  1. Go back to Integrations > Website
  2. Find your newly created web chat card
  3. Click the </> icon to view the code snippet

Installing the Code​

Standard HTML/JavaScript​

Add this code before the closing </body> tag on your website:

<script>
  (function(w, d, s, o) {
    w['webchatQueue'] = w['webchatQueue'] || [];
    w[o] = w[o] || function() {
      w['webchatQueue'].push(arguments);
    };

    var js = d.createElement(s);
    var head = d.getElementsByTagName('head')[0];

    js.async = 1;
    js.src = 'https://webchat.orki.ai/webchat.js';

    js.onload = function() {
      webchat('init', {
        tenantId: 'YOUR_TENANT_ID',
        integrationId: 'YOUR_INTEGRATION_ID',
        language: document.documentElement.lang || 'en'
      });
    };

    if (head) {
      head.appendChild(js);
    } else {
      d.getElementsByTagName(s)[0].parentNode.appendChild(js);
    }
  }(window, document, 'script', 'webchat'));
</script>

Next.js​

For Next.js projects, create a component:

'use client'

import Script from 'next/script'

export default function WebChatScript() {
  return (
    <Script
      src="https://webchat.orki.ai/webchat.js"
      strategy="afterInteractive"
      onLoad={() => {
        console.log('✅ WebChat script loaded');

        if ((window as any).webchat) {
          (window as any).webchat('init', {
            tenantId: 'YOUR_TENANT_ID',
            integrationId: 'YOUR_INTEGRATION_ID',
            language: document.documentElement.lang || 'en'
          });
        }
      }}
      onError={(error) => {
        console.error('❌ Failed to load WebChat script:', error);
      }}
    />
  )
}

Then add it to your layout.tsx:

import WebChatScript from './WebChatScript'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <WebChatScript />
      </body>
    </html>
  )
}

Other Platforms​

PlatformWhere to Add Code
WordPressSettings > Custom Code > Footer, or use a Header/Footer plugin
ShopifyThemes > Edit Code > theme.liquid before </body>
WixSettings > Custom Code > Body End
SquarespaceSettings > Advanced > Code Injection > Footer
WebflowProject Settings > Custom Code > Footer

Managing Your Integration​

Integration Card​

Each web chat shows as a card with these controls:

Icon/ControlAction
</>View code snippet
Pencil iconEdit settings (name, domain, color, form)
ToggleEnable/disable (hides from website when off)
Trash iconDelete the integration
Default Agent dropdownSelect which AI agent handles this web chat

Default Agent​

After creation, use the Default Agent dropdown on the card to select which AI agent responds to messages.

You can change the assigned agent anytime.

Editing Settings​

Click the pencil icon to edit:

  • Integration name
  • Domain
  • Primary color
  • Pre-message form options

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 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​