# Advanced Commercial Chat flow Agent with Custom SDK(Popup Chat Widget & Custom web page) ### 1. Use Case Overview #### Objective Enable enterprises to deploy a Commercial Chat Flow Agent using the Soika Custom SDK, allowing AI-powered customer interactions via a custom web page and popup chat widget. The agent autonomously handles commercial queries such as pricing requests, product inquiries,—while integrating with internal databases, email systems. By using Soika’s Commercial Chat Flow Agent with the Custom SDK, users can launch a fully functional AI-powered popup chat widget and web chat page in just a few minutes—without writing complex code or setting up multiple systems manually. The solution is designed for sales, partnerships, and commercial support teams to respond instantly, capture qualified leads, and automate follow-ups using natural language conversations. ### 2. Business Value Proposition The Soika Commercial Chat Flow Agent transforms static websites into AI-driven sales channels. By embedding a custom chat experience using the Soika SDK, organizations can engage prospects 24/7, answer commercial questions instantly, and qualify leads automatically—without manual intervention. The agent ensures no opportunity is missed by capturing intent, verifying contact details, and routing high-value leads directly to sales teams. #### Key Benefits * 24/7 AI-powered sales & commercial support * Faster lead qualification and response time * Automated pricing & product information delivery * Seamless lead capture into Base row / CRM * Reduced dependency on live sales agents * Fully branded custom web chat experience * Supports complex commercial workflows (pricing, demos) ### 3. Flow Summary for Agent Creation **Step I : Agent creation by giving Natural language prompt** Example Prompt "Create a Chat flow Agent. The name of the agent is ASUS Commercial Chat flow agent. The purpose of the agent is to analyze the product specifications from base row dB and send emails to the customers."

**Step II : Creation of the user commercial flow** Click on Studio in the right side of the Panel for ASUS Commercial Agent

**To Create the entire User Commercial Flow as shown below, step by step Instructions needs to be followed :**

**Step 1: Start Node – User Session Initialization** **Node:** **START**\ **Purpose:** Initialize the chat session and capture mandatory user inputs. **Inputs Collected:** * Name *(Required)* * Email *(Required)*

Click on Start and Add(+) the Input Field

#### Step 2: Connect Get Rows – Database Lookup (Base row) **Node:** **GET ROWS**\ **Purpose:** Retrieve relevant commercial data from Base row DB. * Click on the Branch ,search for the Base row DB -Click on Get Rows and Authorize the Tool with API Key and API URL

* Initially Create a Database with all Commercial product details in Base row(Image I). * Authorize with the Base row DB tool with API Key and API URL(Image II ) * Once it is authorized, use the Table ID of the database in the Base row DB inputs.(Image III)

#### Step 3: ADD LLM – Contextual Understanding & Reasoning **Node:** **LLM**\ **Model:** GPT-4o-mini (Chat) Provide proper system Instructions

#### Step 4: Parameter Extractor – Structured Data Extraction **Node:** **PARAMETER EXTRACTOR**\ **Purpose:** Extract the parameters in a structured manner. Add(+) Parameters -Subject and Body and give system Instructions

#### Step 5: Send Email – Sales / Commercial Notification **Node:** **SEND EMAIL**\ **Purpose:** Notify internal sales or commercial teams. * Authorize with the Send Email tool with SMTP server and IMAP Server Address. Email: Authorize using Gmail IMAP/SMTP ()

* Add the Input Variables(To, Subject and Body). use a Backslash(/) and add the Input Variables

#### Step 6: LLM 2 – Response Composition & Personalization **Node:** **LLM 2**\ **Model:** GPT-4o-mini (Chat) Add the system Instructions for the agent as sending an email with proper subject and body.

#### Step 7: Answer – Final User Response and Publish the Workflow **Node:** **ANSWER**\ **Output:** Text Response is LLM 2 text Once it is Published, Go to Edit AI and change the Visibility of the Agent to Public.

Changed visibility of the agent to Public

### 4.Custom SDK Integration The agent delivers the final message to the user via the web chat or popup SDK. To Integrate Custom SDK **Step I : Clone the main branch** from : Command to use in terminal : git clone

Step II : Once cloned successfully ,open the Repo with command such as code. in terminal It will open the visual studio for you. I am using Visual Studio in this use case. You can use any terminal

**Step III** **Integration for Popup Chat widget**

* Create a simple HTML file (Right click on the repo in VS Code and Click on New File) :refer below Image I * In the application ,Go to Edit AI --> Web embedding .Add the script to the HTML file: refer Image II * Copy the script from the Mockingjay Application to the HTML File :refer Image IV * In the script, change the a base URL IP to local/Public IP(line number 10 & 14) as shown in Image III * Once the file is being created successfully, go the the folder( Soika backend) and double click on the file. example ASUS\_popup.html * The Popup Chat widget appears in the Browser and you can interact with the agents. Agent will help you to give all product details specifications and also trigger a email with all the details to the user. refer Image V

**Step IV :Integration for Custom Web Page**

* In the Soika sdk repo, create a new file. Name it as .env file which is responsible to store all the API keys privately refer Image VI * In the .env file it contains all the API and Public URL details. Fill all the details from the Soika Mockingjay application where it contains NEXT PUBLIC APP\_ID address and Public URL refer Image VII * Generate the API Key from the application and copy the API key in the .env file(NEXT\_PUBLIC\_APP\_KEY) refer Image VIII * Once the .env file is created and all the details are filled, Download NodeJs() to run the npm commands in the terminal * After download, open the terminal and run the command : npm run dev . Double click on the local host link and it will open the Custom Web Page in the browser refer image IX * Interact with the custom web page refer Image X

Image VIII :Use the API address and Public URL in the .env file

Image IX :Click on Generate API key and copy the key to the .env file

**Output of the Email send to the user**

### CONCLUSION By using Soika’s Commercial Chat Flow Agent with the Custom SDK, users can launch a fully functional **AI-powered popup chat widget and web chat page in just a few minutes**—without writing complex code or setting up multiple systems manually. What traditionally takes weeks of frontend development, backend integration, and sales workflow setup can now be achieved through a visual agent flow. The result is an always-on, intelligent commercial assistant that engages visitors instantly, understands intent, captures leads, and triggers real business actions automatically. This approach turns any website into a live, conversational sales channel, ensuring no opportunity is lost due to slow response times or limited human availability. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://soika-labs.gitbook.io/soika-mockingjay/use-cases/advanced-commercial-chat-flow-agent-with-custom-sdk-popup-chat-widget-and-custom-web-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.