Website Chat agent

DBSync's website chatbot is an artificial intelligence (AI)-powered assistant that transforms how visitors navigate the company website and internal portal. Instead of clicking through pages to find what they need, visitors get instant, conversational answers about the company, products, pricing, and support, along with direct links to relevant resources like demos, documentation, and case studies.

The chat agent can be embedded on any webpage, either as an inline widget within a page section or as a floating window, and it maintains context across the visitor's session as they navigate, refresh, or return to the site. It draws answers exclusively from a configured knowledge base, keeping responses accurate and aligned with your brand, with the flexibility to customize its appearance to match your brand's look and feel.

How it works

When a visitor arrives on your website, the chat agent widget appears as a floating icon or an inline component within a page section. The visitor types a question, and the chat agent:

1. Generates a formatted summary answer.

2. Surfaces relevant resource links, demo videos, documentation pages, case studies, and blog posts, grouped by category.

3. Suggests a next action to keep the visitor engaged.

The chat agent maintains session history across page navigations until the visitor clears their browser cookies, so conversations are never interrupted when moving between pages.

Embed options

The chat agent supports three embed formats:

Format	Description	Best for
Floating window	A widget that slides in from the corner of the screen, available on every page.	General site-wide navigation assistance.
Inline	Embedded directly inside a specific <div> section of a page's HTML.	Focused, contextual help on a specific landing page or product section.
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.

Before you begin

Before you configure the chat agent, make sure you have:

• Access to the DBSync Cloud Workflow admin panel.

• A configured knowledge base, such as website pages, wiki articles, blog posts, documentation, or uploaded documents.

• An active Salesforce integration, if you want to use lead capture.

Configuration steps

1

Open the chat agent creation panel.

1. Log in to the DBSync Cloud Workflow admin panel.

2. Navigate to Chat Agents .

3. Select an existing agent or click New Chatbot.

2

In the Name field, enter a short identifier for your chat agent. This name displays on your chat agent list.

3

From the LLM Provider menu, select the platform or service that hosts the language model you want to use.

4

From the Model menu, select the specific language model version (for example, gpt-5.6-luna) to power your chat agent's responses.

5

Optional: In the Initial Prompt field, enter a greeting message. This text appears as the first assistant message when a user opens the chat interface. If you want to skip the initial greeting, leave this field empty.

6

In the System Prompt field, enter the core instructions that define the assistant's persona and behavior.

Example system prompt:

You are a helpful assistant.

7

Go to the Knowledge Base section if you have not yet configured it.

The chat agent answers using only the content you add here. To improve answer quality, upload detailed product documentation, user guides, the website sitemap URL, and other relevant documentation that you want the chatbot to use as source material.

8

Optional: Go to the MCP section to configure an MCP server.

9

Optional: To restrict search results strictly to the knowledge base, turn off Enable web search.

10

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.

11

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.

  

12

Click Save & Preview.

---

Configure embed code

1

Click Settings, then Embed Code.

1. Enter a token name.

2. Click Generate Token.

   

2

Scroll down further to access the chat agent script, which you can use to embed the chat agent on your website.

3

Embed the chat agent on your website.

1. For floating bubble placement, click to copy the script and place it above the <body> 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 <body> 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 <div> or <section> 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:

   

Lead generation strategy

The chat agent supports lead capture through two mechanisms:

Gated content forms

When a visitor requests access to a gated resource, such as a webinar recording, case study, or demo video, the chat agent presents the existing lead capture form. On submission, Salesforce automatically updates the lead record.

Pricing inquiries

When a visitor asks about pricing, you can customize the chat agent's response and redirection based on client preferences. If a client has a dedicated pricing page, the chat agent can direct visitors there. Alternatively, it can redirect visitors to the Contact Sales page or prompt them to schedule a call.