> For the complete documentation index, see [llms.txt](https://docs.mydbsync.com/cloud-workflow/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.mydbsync.com/cloud-workflow/tutorials/ai-agents/website-chat-ai-agent.md).
# Website chat AI agent
Website visitors often abandon a page because they can't find the pricing, documentation, or case study they need, and they rarely browse more than a few pages before leaving. This use case turns the DBSync chat agent into a conversational widget that answers visitor questions from your knowledge base, surfaces the matching resource links, and captures leads through your site's gated content, all without the visitor leaving the page they're on.
## Target audience
This use case is designed for the following groups:
* Business owners and CXOs who want to transform their website into a modern, AI-powered experience that improves user engagement, simplifies information discovery, and delivers a more personalized user experience.
* Marketing teams who want to turn website visitors into an interactive discovery experience instead of static navigation.
* Sales teams who want to capture better-qualified leads by connecting chat agent conversations to gated content and the CRM.
* Website and product teams who maintain a knowledge base and want to expose it directly on public pages.
## What you build
By the end of this tutorial, you have a chat agent that does the following:
* Answers visitor questions with a summarized response followed by categorized resource links, such as demo videos, documentation, case studies, and blog posts.
* Maintains a branded look that matches your company colors.
* Embeds on your website as an inline panel or a floating window, using a generated token or a script.
* Persists the conversation across page navigation until the visitor clears their browser cookies.
## Before you begin
* Configure a knowledge base that contains your website content, product documentation, user guides, the website sitemap URL, and any other relevant documentation you would like the responses to be grounded in. For more information, see [Knowledge Base](https://docs.mydbsync.com/cloud-workflow/ai/knowledge-base).
* Connect an LLM provider, such as OpenAI, Anthropic Claude, Google Gemini, Azure OpenAI, or Amazon Bedrock. For detailed API key configuration, see [AI Agent: API Key Guides](https://docs.mydbsync.com/cloud-workflow/ai/ai-agent-api-key-guides).
* Confirm you have access to edit your website's HTML, either directly or through your content management system, so that you can embed the chat agent code.
* If you plan to capture leads, confirm your website's gated content forms are already connected to your CRM.
## Phase 1: Create the chat agent
{% stepper %}
{% step %}
Log in to DBSync with your credentials.
{% endstep %}
{% step %}
In the navigation pane, click **Chat Agents** .
{% endstep %}
{% step %}
Click **Create your first Chatbot,** or if you have already configured one, click **+New Chatbot**.
{% endstep %}
{% step %}
In the **Name** field, specify a name for the chat agent.
{% endstep %}
{% step %}
In the **LLM Provider** list, select the provider you connected in [Before you begin](#before-you-begin).
{% endstep %}
{% step %}
In the **Model** list, select the model you want the chat agent to use.
{% endstep %}
{% step %}
In the **Initial prompt** field, enter the first assistant message to display when the chat window opens. Leave the field empty to skip the greeting.
{% endstep %}
{% step %}
In the **System Prompt** field, enter instructions that keep the chat agent focused on the information provided in the KB. For example, instruct it to answer only questions related to your product, website, and configured knowledge base, and to decline unrelated questions.
{% endstep %}
{% step %}
In the **Knowledge Base** list, select the knowledge base you configured in [Before you begin](#before-you-begin). To select more than one knowledge base, press Control (or Command on macOS), and then click each item.
{% endstep %}
{% step %}
Optional: To connect an external tool, click **Add MCP Server**. For more information, see the [MCP](/cloud-workflow/ai/model-context-protocol-mcp.md) section.
{% endstep %}
{% step %}
Optional: To restrict search results strictly to the knowledge base, turn off\
**Enable web search**.
{% endstep %}
{% step %}
Optional: Turn on the **Lead capture** **on gated content** toggle to ask visitors to fill out a lead form before they can play gated videos. This setting takes effect after you save your changes.
{% endstep %}
{% step %}
Customize the appearance.
* Select a **Primary Color** to use for the header, buttons, and message bubbles.
* Under **Response Display**, turn on the **Show sources** toggle to display source material below each answer.
* Turn on the **Web view** toggle to display answers in web view.
{% endstep %}
{% step %}
Click **Save & Preview**.
{% endstep %}
{% endstepper %}
## Phase 2: Choose an embed format
The chat agent supports three embed formats:
| Format | Description | Use case |
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------- |
| Inline | Renders inside a specific `
` element on a page. | A dedicated support or documentation section on a page. |
| Floating window | Renders as a persistent icon that expands into a chat window across the site. | General site-wide navigation help. |
| Copilot slide-in | A conversational panel that expands from the edge of the screen, letting you interact with the Copilot while maintaining context on your current page. | Contextual assistance while visitors keep the current page visible. |
To embed the chat agent, do the following:
{% stepper %}
{% step %}
Click **Settings**, then **Embed code.**
1. Specify the token name.
2. Click **Generate Token**.
{% endstep %}
{% step %}
Scroll down further to access the chat agent script, which you can use to embed the chat agent on your website.
{% endstep %}
{% step %}
Select the embed format. Choose **Floating bubble, Inline placement** or **Copilot slide-in**.
{% endstep %}
{% step %}
Copy the generated embed snippet.
{% endstep %}
{% endstepper %}
## Phase 3: Embed the chat agent on your website
To add the chat agent to your website, do the following:
{% stepper %}
{% step %}
Embed the chat agent on your website.
1. For floating bubble placement, click to copy the script and place it above the `` tag in your webpage.\
Sample script:
<!-- DBSync Chatbot — floating bubble embed -->
<script src="https://platform.dbsync.io/dbsync/resources/v2/js/chatbot/chatbot-embed.js"></script>
<script>
DBSyncChatbot.init({
orgId: 18238,
chatConfigId: 133,
embedToken: "tok_18238_f86bd6587171f070707a3ec8d75796d3",
// Optional — explicit tags to attach to every session from this page.
// URL params on this page also auto-attach (e.g. ?customer=Acme).
sessionTags: {
// customer: "YourCustomer",
// page: "support"
},
appearance: {
mode: "bubble", // "bubble" = floating button bottom-right
minimized: true, // start collapsed; user clicks to expand
theme: { accent: "#24C258" }, // Primary Color (Appearance section)
showSources: true,
showRelatedSources: false,
showTimestamp: false,
showFeedback: false,
// shadowDom: false, // opt OUT of style isolation (host CSS can then restyle the widget)
// Lead capture on gated content — where the lead goes.
// REQUIRED on your own domain: without it, clicking gated content sends the
// visitor to that content's own page instead of asking for details in chat.
// leadGen: { oid: "00D..." }, // your Salesforce Web-to-Lead organisation id
headerLabel: "AI Assistant",
logoUrl: ""
}
});
</script>
\
Sample output:
2. For Copilot slide-in placement, click to copy the script and place it above the `` tag in your webpage.\
Sample script:
<!-- DBSync Chatbot — copilot slide-in (prompt bar + right panel) -->
<script src="https://platform.dbsync.io/dbsync/resources/v2/js/chatbot/chatbot-embed.js"></script>
<script>
DBSyncChatbot.init({
orgId: 18238,
chatConfigId: 133,
embedToken: "tok_18238_f86bd6587171f070707a3ec8d75796d3",
sessionTags: {
// customer: "YourCustomer"
},
appearance: {
mode: "copilot", // prompt bar + right slide-in panel
bar: "sticky", // "sticky" | "hero" (set barContainer) | "pill"
// How the panel treats YOUR page on desktop:
// "dock" = the page reflows and the panel sits in the opened column
// (nothing on your site is ever covered)
// "overlay" = the panel floats on top; your layout never moves
panelMode: "dock",
barPlaceholder: "Ask us about anything…",
suggestions: ["Compare plans", "Book a demo"],
quickChips: ["Compare plans", "Book a demo"],
theme: { accent: "#24C258" }, // Primary Color (Appearance section)
showSources: true,
showRelatedSources: false,
showTimestamp: false,
showFeedback: false,
// shadowDom: false, // opt OUT of style isolation (host CSS can then restyle the widget)
// Lead capture on gated content — where the lead goes.
// REQUIRED on your own domain: without it, clicking gated content sends the
// visitor to that content's own page instead of asking for details in chat.
// leadGen: { oid: "00D..." }, // your Salesforce Web-to-Lead organisation id
headerLabel: "AI Assistant"
}
});
</script>
\
Sample output:
3. For inline placement, click to copy the script and place it inside a `
` or `` tag in your webpage.\
Sample script:
<!-- DBSync Chatbot — inline embed inside a div -->
<div id="dbsync-chatbot" style="height: 600px;"></div>
<script src="https://platform.dbsync.io/dbsync/resources/v2/js/chatbot/chatbot-embed.js"></script>
<script>
DBSyncChatbot.init({
container: "dbsync-chatbot",
orgId: 18238,
chatConfigId: 133,
embedToken: "tok_18238_f86bd6587171f070707a3ec8d75796d3",
sessionTags: {
// customer: "YourCustomer"
},
appearance: {
mode: "inline", // fills the container div
theme: { accent: "#24C258" }, // Primary Color (Appearance section)
showSources: true,
showRelatedSources: false,
showTimestamp: false,
showFeedback: false,
// shadowDom: false, // opt OUT of style isolation (host CSS can then restyle the widget)
// Lead capture on gated content — where the lead goes.
// REQUIRED on your own domain: without it, clicking gated content sends the
// visitor to that content's own page instead of asking for details in chat.
// leadGen: { oid: "00D..." }, // your Salesforce Web-to-Lead organisation id
headerLabel: "Your Brand",
logoUrl: "https://platform.dbsync.io/dbsync/resources/svgs/DBSync-favicon.svg"
}
});
</script>
\
Sample output:
{% endstep %}
{% step %}
Publish the page.
{% endstep %}
{% step %}
Visit the published page and confirm the chat agent loads and responds to a test question.
{% endstep %}
{% endstepper %}
{% hint style="warning" %}
If your site already runs a live chat widget, such as Olark, place the chat agent snippet so that it doesn't overlap the live chat launcher. Until the chat agent is embedded directly in your page layout rather than as a floating overlay, check both widgets on your smallest supported viewport for menu and footer overlap.
{% endhint %}
## Verify your chat agent
Use a staging link so that you can test without affecting live visitors. Confirm the following behavior:
* Asking a product question, such as a connector or integration query, returns a summarized answer and categorized resource links, such as documentation, demo videos, and case studies.
* Ask follow-up questions based on the visitor's query.
* Navigating to a different page keeps the chatbot session active, including the conversation history.
* Closing the browser tab and reopening the site later restores the same session, as long as cookies haven't been cleared.
* Asking a question unrelated to your company or knowledge base, such as a general knowledge question, returns a refusal instead of an answer.
* Asking about pricing redirects the visitor to contact sales instead of revealing plan details, or if configured, it provides the link to the pricing page.
* Requesting gated content, such as a webinar or case study, routes through your lead capture form and creates a lead in your CRM.
## What's next
* For more information about configuring the underlying chat agent, see [Chat Agents](https://docs.mydbsync.com/cloud-workflow/ai/chat-agents).
* For more information about the knowledge base that powers chatbot answers, see [Knowledge Base](https://docs.mydbsync.com/cloud-workflow/ai/knowledge-base).
.
{% endstep %}
{% step %}
Click **Create your first Chatbot,** or if you have already configured one, click **+New Chatbot**.
{% endstep %}
{% step %}
In the **Name** field, specify a name for the chat agent.
{% endstep %}
{% step %}
In the **LLM Provider** list, select the provider you connected in [Before you begin](#before-you-begin).
{% endstep %}
{% step %}
In the **Model** list, select the model you want the chat agent to use.
{% endstep %}
{% step %}
In the **Initial prompt** field, enter the first assistant message to display when the chat window opens. Leave the field empty to skip the greeting.
**Settings**, then **Embed code.**
1. Specify the token name.
2. Click **Generate Token**.
to copy the script and place it above the `` tag in your webpage.\
Sample script:
