Website AI Agent Case Study: AI Chatbot & Lead Capture

Executive Summary

The Project at a Glance

Website AI Agent brings a configurable AI chatbot into the CRM and the public website. An administrator defines the agent prompt, guardrails, knowledge sources, widget look, and which CRM actions are allowed. A small embed script loads the chat widget on approved domains.

The Business Challenge

The Challenge of Real-Time Website Conversations

Website visitors need an answer while they are on the page, not after they abandon the form or wait for business hours.

Typical Website Visitor Requests

Ask about product, pricing, delivery or support hours. Qualify a lead and share name, email, phone or need. Book or check an appointment. Create or look up a support ticket. Continue a conversation later on the same device.

Limitations of Human Chat Agents and Generic Chatbots

Doing this only with human chat agents means missed nights and weekends, slow first response, and inconsistent scripts. A generic public chatbot is not tied to CRM records, knowledge files, or the actions the business approved.

Connected Website Conversations and CRM Actions

The business requirement was to let the visitor chat naturally on the website, and to let the CRM agent answer from knowledge, run allowed actions, and keep the conversation visible to the team — all in one session.

QA Challenges

QA Challenge and Strategy

The key QA challenge was validating a multi-component workflow involving a public website widget, session history, external AI services, knowledge sources, configured CRM actions, and human-agent workflows. Testing therefore covered the entire visitor journey rather than only checking whether the chatbot displayed a response.

Installation and License Testing

ZIP installation, disclaimer acceptance, extension import, and availability in CRM settings.
License entry and submission, activation, configuration access, and invalid or missing license scenarios.

Configuration and AI Provider Testing

General configuration, agent name/status, provider, model, API key, conversation history, and instructions.
Safety Rails, Knowledge Base, Actions, Website Widget, and Embed Code settings.
OpenAI, Grok (xAI), and Gemini provider selection; valid/invalid credentials; model configuration; timeouts; API failures; provider availability.

Knowledge Base and Safety Testing

Add, edit, delete, and save document and website/sitemap sources.
Validate answer relevance against configured knowledge.
Create Safety Rails rules, conditions, and reactions.
Verify Refuse, Warn, Escalate, and Redirect Human behavior when a rule triggers.

Widget, Embed, and Conversation Testing

Widget visibility, opening/closing, welcome message, name, icon, color, position, and allowed domains.
Embed-code generation, script placement, published website behavior, public key, invalid domains, missing scripts, and disabled-agent behavior.
Visitor messages, follow-up questions, multiple messages, conversation history, response continuity, and responsiveness.
Online/offline availability, visitor disconnects, multiple conversations, and human-agent unavailability.

CRM Actions and Inbox Testing

Ask for Details, Capture Lead, Booking/Search Appointment, Create/Search Task, Create/Search Ticket, Connect to Humans, and Close Conversation.
Ticket search by ticket number and email, including valid/invalid records, closed tickets, missing records, status, priority, and last-updated information.
Inbox search, conversation opening, history, and Active, Waiting for Human, With AI, Closed, and All conversations states.
AI-to-human handover, assignment, AI stopping while a human takes over, human replies, history, status, return to AI, and closure behavior.

Negative and Edge-Case Testing

Empty messages, unsupported questions, and missing Knowledge Base information.
Invalid API keys, API failures/timeouts, and unavailable AI providers.
Invalid domains, missing embed scripts, incorrect script placement, disabled agents, and invalid public keys.
Invalid ticket/email, missing CRM records, visitor disconnects, and unavailable human agents.
AI-to-human-to-AI switching and concurrent/multiple conversations.

QA Approach

QA Automation Approach

QA automation supports repeatable regression validation of the main agent configuration, website widget, Knowledge Base, visitor conversation, CRM actions, ticket search, appointment/task workflows, human handover, return-to-AI, and conversation closure.

01

Installation and License

Extension setup, activation, invalid/missing license behavior

02

Agent Configuration

Provider/model, instructions, history, Safety Rails, Actions, widget, and embed settings

03

Knowledge Base

Source management and relevance of AI responses

04

Website Widget

Visibility, branding, allowed domains, embed script, visitor interaction

05

AI/API Integration

Credentials, responses, timeouts, failures, provider availability

06

CRM Actions

Lead, appointment, task, and ticket create/search workflows

07

Live Chat Inbox

Conversation search, status filters, history, and updates

08

Handover Lifecycle

Take over, human replies, return to AI, close conversation

09

Negative/Regression

Invalid input, missing data, unavailable services, and core CRM regression

The Solution We Built

An Integrated Website AI Chatbot Solution

Website AI Agent was built as an administrator-configured chatbot for vTiger CRM and the public website.

Visitor → Website widget → api.php → LLM + knowledge → Reply → Optional CRM action → Inbox

Website AI chatbot integrated with vtiger CRM and session history

1

Administrator Configuration

Administrators open Website AI Agent settings and create an agent. They choose the LLM provider and model, write instructions and guardrails, upload knowledge files or website URLs, style the widget, restrict allowed domains, and enable only the CRM actions the business wants.

2

Website Widget and AI Conversation

When a visitor opens the site, embed.js loads the widget. The widget calls the public API with the agent public key, starts a session, and exchanges messages. Each turn updates session history until the visitor leaves or the agent closes the conversation.

3

Session History and Conversation Continuity

A follow-up message uses the same session token, so the CRM and the chatbot keep that conversation. This is separate from the CRM web login session.

AI Introduction

Why We Introduced AI on the Website

The objective was not to let the model change the CRM without a result the visitor and the business can trust.

The objective was to turn a typed question into a clear reply, and — when configured — into a lead, appointment, task or ticket the team can work.

01

Knowledge-Based Responses

Answer from the agent prompt, knowledge files and website sources, and guardrails.

02

Continuous Conversations

Greet the visitor, keep replies concise, and continue multi-turn history within the configured limit.

03

Lead Capture

Capture a lead (contact / lead fields) when Capture Lead is enabled.

04

Appointment, Task and Ticket Management

Create or search appointments, tasks and tickets when those actions are enabled.

05

Multiple AI Provider Support

Use OpenAI, Grok or Gemini with the API key stored only on the server.

06

Context-Aware Questions

Ask only when a value cannot be decided from the conversation.

System Capabilities

Website AI Agent Capabilities

Capability	What it does
Embeddable Widget	Loads a branded floating chat on the website via public key.
Knowledge Reply	Uses admin prompt, uploaded docs / website URLs and guardrails as the source of facts.
Capture Lead	Creates or updates CRM contact/lead data from the chat when enabled.
Appointments	Books or searches appointments with working-hour rules when enabled.
Tasks	Creates or searches CRM tasks from the conversation.
Tickets	Creates or searches support tickets.
One Conversation	Session token and history stay with the visitor chat.
CRM Inbox	CRM users review sessions and messages; optional WebSocket for live updates.
Domain Control	Optional allowed_domains list limits where the widget may run.
License Gate	Public API and settings require an active CRMTiger license.

How It Works

How Website AI Agent Works

Website AI agent workflow from configuration to CRM actions

1 Administrator Configures the Agent

An administrator creates the agent, selects OpenAI, Grok or Gemini, sets the model and API key, writes instructions and guardrails, attaches knowledge, styles the widget, sets allowed domains, and enables actions.

2 Website Embeds the Script

The site includes embed.js with the agent public key. The script loads widget.js and CSS, then requests public config from api.php.

3 Visitor Starts Chatting

The widget opens a session (visitor id + session token), shows the welcome message, and posts each user message to the API.

4 Each Chat Turn

The service builds the system prompt (instructions, guardrails, knowledge, enabled actions), sends history to the LLM, and returns a visitor-facing reply plus an optional action payload.

5 Action or Continue

If the model chooses an enabled action, ActionExecutor runs it in the CRM and the visitor hears the outcome in chat. Otherwise the session stays open for the next message.

AI in Real Website Work

Website AI Agent in Real-World Workflows

Example 1 — Answer from knowledge

The visitor asks about pricing or product fit. The agent replies only from the knowledge base and prompt, keeps the answer short, and asks one clarifying question when needed.

1

Visitor Question

The visitor asks about pricing or product fit.

2

Knowledge-Based Response

The agent replies only from the knowledge base and prompt, keeps the answer short, and asks one clarifying question when needed.

3

Example Response

““Our Standard plan starts at a monthly fee per user. How many people on your team need access?”

AI agent answering pricing questions from a knowledge base

Example 2 — Capture a lead

The visitor is ready to talk to sales. With Capture Lead enabled, the agent collects missing name, email or phone across turns, creates the CRM record, and confirms what was saved.

1

Identify Sales Interest

Recognize when a visitor wants to connect with your sales team.

2

Collect Missing Details

With Capture Lead enabled, the agent collects missing name, email or phone across turns.

3

Create and Confirm the CRM Record

The agent creates the CRM record, and confirms what was saved.

AI agent capturing lead details and creating CRM records

Example 3 — Create a ticket from chat

The visitor reports an issue. With Create Ticket enabled, the agent gathers the missing title or details, creates the ticket as configured, and tells the visitor the ticket was opened — or that it was not created.

1

Visitor Reports an Issue

Understand the visitor's problem and determine the information needed.

2

Gather Missing Details

With Create Ticket enabled, the agent gathers the missing title or details.

3

Create Ticket and Inform the Visitor

The agent creates the ticket as configured, and tells the visitor the ticket was opened — or that it was not created.

AI agent creating CRM support tickets from visitor chats

Conversation Lifecycle

Website AI Agent: Chat Session States

01

Config

Widget loading agent branding and API base.

GET api.php?action=config

02

Session

New or resumed chat for this visitor.

POST action=session; store session_token

03

Active

Visitor and bot exchanging messages.

POST action=message; update history

04

Inbox

CRM user viewing / responding.

Settings Inbox; optional WebSocket presence

05

Closed

Conversation ended or handed off.

No further visitor AI turns (as configured)

The service always tracks: system_prompt — built from agent instructions, guardrails, knowledge and enabled actions , history — recent user and assistant turns within history_limit, action_type / action — CRM action chosen by the model when enabled, session_token — identifies the same website conversation

AI + Website + CRM

AI + Website + CRM: Working Together

AI Handles

→

Understanding the visitor’s message

→

Short helpful replies

→

Choosing an enabled action

→

Knowledge-grounded answers

→

Keeping one conversation

→

Team follow-up

Connected Workflow

Website / CRM Provide

→

Embed widget, public key, session token

→

api.php, LLM provider, knowledge sources

→

Agent action toggles and instructions

→

Prompt, files, website URLs, guardrails

→

webai_chat_sessions and webai_chat_messages

→

CRM Settings Inbox and optional realtime socket

In simple terms, the visitor talks to the website widget, and the CRM remains the system that stores records, actions and inbox visibility.

Solution Architecture

Website AI Agent Solution Architecture

Tech Stack

Multi-Provider AI Architecture

API keys stay encrypted on the CRM server with the agent record. The website embed never receives the provider key. The same chat and action behavior is used whichever provider is selected.

OpenAI

Grok (xAI)

Google Gemini

Before & After AI

How Website AI Agent Reduces Manual Effort

✕ Traditional Process

✓ With Website AI Agent

01 After-Hours Visitors

Visitors wait for staff to become available.

Answers immediately from knowledge instead of waiting for staff.

02 FAQs and Qualification

Staff answer questions and collect visitor details through manual interactions.

Speaks from knowledge without opening a CRM form first.

03 Lead Capture

Staff manually collect visitor details and enter them into the CRM.

Writes contact/lead fields into the CRM when enabled.

04 Appointments / Tasks / Tickets

Staff manually handle requests and create or search CRM records.

Creates or searches records from chat when enabled.

05 Brand Consistency

Branding and response experiences may vary across interactions.

Widget name, color, icon and welcome message are configured once.

06 Follow-Up on the Same Chat

Visitors may need to repeat their request when continuing a conversation.

History stays on the session so the next message continues the request.

07 Result

The visitor's request and the business's follow-up may require separate manual handling.

The visitor sees the answer; the business sees the CRM outcome and inbox thread.

Benefits

Business Benefits

01

Faster First Response

Visitors get an answer on the page instead of waiting for email or business hours.

02

Fewer Lost Opportunities

Qualification and booking can continue when human agents are busy or offline.

03

A Conversation, Not a One-Shot Form

The agent can ask for a missing detail and finish the same request on the next message.

04

Language and Script Control

Administrators write the instructions, knowledge and guardrails that shape every reply.

05

Administrator Control

Only enabled actions run, and the widget only loads on allowed domains when configured.

06

A Clear Outcome for the CRM

Lead, ticket, task or appointment — or a clean informational reply — with the thread visible in Settings.

AI Security

Security and Administration

The public API serves only agents that are active and licensed. CRM actions follow the agent configuration.

API keys are stored with the agent and are not exposed to the browser. The embed script only uses the public key. License validation uses server-side form POST to the CRMTiger license endpoint.

Administrators control:

Which Agent Is Active And Its Public Embed Key

The Provider, Model And API Keys

Instructions, Knowledge Sources And Guardrails

Which Actions Are Enabled (Lead, Appointment, Task, Ticket)

Widget Branding And Allowed Website Domains

License Activation And Deactivation Via CRMTiger

Future Enhancements

The same pattern can grow without changing how the website embeds the widget.

Richer CRM Updates

CRM records could be updated with information provided through a follow-up message in the same session.

Expanded Module Support

Additional CRM modules could be supported using the same action framework.

Faster Streaming Replies

Deeper streaming capabilities could reduce time-to-first-token and help visitors receive responses sooner.

Usage and Conversion Tracking

Administrators could review usage and conversion history to better understand widget performance.

Enhanced Post-Chat Summaries

Richer post-chat summaries could be saved directly to the CRM for future reference and follow-up.

From Manual to AI-Assisted

From Static Forms to a Conversation

Traditional Website Workflow

Visit

FAQ / Contact Form

Wait for Email

Human Agent Opens CRM Forms

With Website AI Agent

Visit

Chat Widget Answers

Speak Naturally

Hear the Answer or CRM Action Result

If something necessary is still missing, the agent asks, the visitor replies in the same chat, and the original request continues.

Human Oversight

The Visitor Remains in the Conversation

The agent does not silently invent a person, company or ticket that was never mentioned. It asks.

Configured Welcome Message

One Clarifying Question at a Time

When to Run CRM Actions

Facts From Knowledge and Instructions

The Business Impact

The Outcome of Website AI Agent Integration

CRM-Integrated Conversations: Website AI Agent makes answering and acting on website conversations part of the CRM.

Product Questions: Visitors can ask about the product and receive answers based on the agent language and knowledge.

Visitor Qualification: Visitors can qualify themselves through website conversations.

CRM Actions: Visitors can open a ticket, book an appointment, or leave a lead.

CRM-Compliant Records: Records follow CRM rules and maintain consistency with existing CRM workflows.

Session Visibility: The team can tell an open chat apart from a closed one because every session is stored and visible in the inbox.

Key Takeaway

The useful website AI agent is the one that finishes the visitor step and says what happened.

By keeping the agent inside the website widget and the CRM, the organization gets live answers in the visitor’s conversation, on the approved actions, and on one session the team can continue.

Matters - Documents & Activity

Understanding ReactJS

How Website AI Agent Helps Businesses Convert Website Visitors by Conversation