Web Chat

Add a live chat widget to your website and engage visitors in real time. Web Chat sessions are handled by your AI agent, with seamless handoff to human agents when needed.

Purpose

The Web Chat widget brings conversational support to your website:

• Instant engagement — visitors start chatting without leaving your site.
• AI-powered responses — your AI agent answers questions using the knowledge base.
• Human handoff — escalate to live agents when the AI can't resolve an issue.
• Unified inbox — web chat conversations appear alongside WhatsApp and Telegram.
• Analytics — track chat volume, engagement rates, and agent performance.
• Customization — match the widget to your brand colors and style.

Who can access

Prerequisites

1. Website access — ability to add JavaScript to your site.
2. AI agent configured (recommended) — for automated responses.
3. Knowledge base populated — gives the AI context to answer questions.
4. Team members available (optional) — for human handoff.

Full walkthrough

Configuring widget settings

1. Go to Web Chat → Settings.
2. Configure Appearance:
   • Primary Color — brand color for the widget (hex picker).
   • Position — bottom-left or bottom-right.
   • Logo — upload your logo (displayed in the chat header).
   • Launcher Icon — chat bubble style.
3. Set Welcome Message — greeting shown when visitors open the widget.
4. Configure Pre-Chat Form (optional):
   • Enable/disable.
   • Fields: Name, Email, Phone (toggle required/optional).
5. Set Business Hours:
   • Enable/disable.
   • Define hours for each day.
   • Set offline message (shown outside hours).
6. Assign AI Agent — select which agent profile handles web chat.
7. Click Save.

Embedding the widget

1. In Settings, scroll to Embed Code.
2. Copy the JavaScript snippet:

<script>
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'skylightchat.start':
  new Date().getTime(),event:'skylightchat.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s);j.async=true;j.src=
  'https://widget.skylightchat.com/v1/chat.js?id='+i;f.parentNode.insertBefore(j,f);
  })(window,document,'script','slcLayer','YOUR_WIDGET_ID');
</script>

3. Paste the snippet before the closing </body> tag on every page where you want the widget.
4. Save and deploy your site.

The widget appears in the corner you configured.

Managing chat sessions

Viewing active sessions

1. Go to Web Chat → Sessions.
2. Filter by Status = Active to see ongoing chats.
3. Click a session to open the conversation panel.

Session detail panel

Taking over from AI

When you want to handle a chat personally:

1. Open the session.
2. Click Take Over.
3. The AI stops responding; you're now in control.
4. Type your messages in the input field.

The visitor sees a seamless transition—they don't know who's responding.

Releasing back to AI

1. In an active session you've taken over, click Release.
2. The AI resumes handling the conversation.

Ending a session

1. Click End Session.
2. The visitor sees a "Chat ended" message.
3. The session moves to Ended status.

Responding to handoff requests

When a visitor asks for a human (e.g., types "speak to a person"):

1. The AI recognizes the intent and triggers a handoff request.
2. The session moves to handled_by: pending.
3. Agents receive a notification (browser, email, or mobile—based on settings).
4. An agent opens the session and clicks Take Over.

Configure handoff triggers in your AI agent's instructions.

Viewing analytics

Go to Web Chat → Analytics to see:

Filter by date range: Today, This Week, This Month, Custom.

Field glossary

Statuses and badges

Session status

Handled by

Nested screens

Settings tab sections

Session detail panel

Analytics tab

Connections to other areas

Limits and plan behavior

Troubleshooting

Related articles

• AI Agents — configure the AI that powers web chat
• Knowledge Base — content the AI uses to answer
• Inbox — view web chat alongside other channels
• Salla Integration — storefront widget setup
• Web Chat API — programmatic session management