💬 Worknet Chatbot Integration Guide

This guide explains how to integrate Worknet’s chatbot into your website, including setup of data sources, actions, and the widget app.

✅ 1. Pre-requisites

a. Set Up Data Sources & Partitions

The chatbot uses data sources organized into partitions to generate responses.

• Read this first: Understanding Connections, Data Sources, and Partitions
   
• Before moving forward, make sure:
  • You’ve connected all relevant data sources (e.g., Notion, Google Drive, CRM).
  • You’ve created a partition and added the data sources relevant to this chatbot.
     

⚙️ 2. Set Up Actions

You will need two actions:

1. Proactive Action – first interaction initiated by the bot.

2. Main Action – used for all user-driven conversations.
   
   a. Add New Actions

   • Go to the “Actions” tab in the left menu.
   • Click “Add New”.

   b. Proactive Action (e.g. "SDR Outreach")

           This is the chatbot's first message to the visitor.

           Configure it as follows:

• Name: e.g., SDR Outreach
• Action Prompt: Sets the tone and purpose. This can be explicit (exact text) or implicit (intent/tone). See this example prompt.
• Requires User Action: Set to False
• Display Name: Text for the first message (e.g., "Hi there!")
• Custom Config: Add this JSON:

{
  "new_ai_layer": true
}

c. Main Action (e.g. "SDR Conversation")

Handles all subsequent user interactions.

Configure it as follows:

• Name: e.g., SDR Conversation
• Action Prompt: Same as above, use tone/intent or detailed wording. See this example prompt.
• Requires User Action: Set to True
• Custom Config:

{
  "new_ai_layer": true
}

• Partitions: Attach the partition(s) with your knowledge sources.
• Tools (optional): Add tools to enable CRM lookup, Slack handoff, etc. See this guide on tools for more details.

🧩 3. Set Up a Widget App

a. Create a New App

• Go to the “Apps” tab.
• Click “Add New” → Choose “Widget”.
   

b. Fill in App Details

Under “General”:

• Name: Give your app an internal name.

Under “AI Configuration” tab:

• System Prompt: Describe who the bot is, tone, behavior, and purpose.
• AMA Action: Select the main action.
• Auto Action: Select the proactive action.

Under “Chatbot UI” tab:

• Chatbot Name: Display name in the chat window.
• Avatar URL (optional): Add a custom bot image.

Under “Custom Configuration” tab:

• Footer Prompt (optional but recommended): A safety net to restrict the bot from answering out-of-scope or sensitive questions.

🔒 Don’t forget to click Save!

🎨 4. Configure Appearance

a. Use the Test Page

• Click the “Test Page” (</>) icon inside the App config panel.

b. Customize Appearance

• Adjust:
  • Colors to match your brand.
  • Size & position for alignment with your layout.

  • Header Text at the top of the chat window.

     

🧾 5. Embed the Chatbot on Your Website

a. Final Step: Embed Code

• While on the Test Page (</>) view, go to the “Code” tab.
• Copy the provided HTML snippet.

b. Paste the Snippet

• Add the code to your site’s HTML.
• For best results, paste it into a global template so the bot loads across all pages.