` 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](/cloud-workflow/ai/knowledge-base.md), 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 {% stepper %} {% step %} 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**. {% endstep %} {% step %} In the **Name** field, enter a short identifier for your chat agent. This name displays on your chat agent list. {% endstep %} {% step %} From the **LLM Provider** menu, select the platform or service that hosts the language model you want to use. {% endstep %} {% step %} From the **Model** menu, select the specific language model version (for example, `gpt-5.6-luna`) to power your chat agent's responses. {% endstep %} {% step %} 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.

{% endstep %} {% step %} 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. ```

{% endstep %} {% step %} Go to the [Knowledge Base](/cloud-workflow/ai/knowledge-base.md) 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. {% endstep %} {% step %} Optional: Go to the [MCP](/cloud-workflow/ai/model-context-protocol-mcp.md) section to configure an MCP server. {% 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 %} ## Configure embed code {% stepper %} {% step %} Click

**Settings**, then **Embed Code**. 1. Enter a 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 %} 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 %} {% endstepper %} ## 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.