Skip to main content

​
Why Build Your Chatbot with Bigdata.com?

Bigdata.com is designed specifically for business and finance professionals, delivering real-time, AI-driven insights with precision and speed. ✅ Unmatched Data Access — Instantly analyze vast, high-quality datasets.
✅ Grounding with Bigdata.com — Generated responses reflect the accurate and real-time market conditions.
✅ Finance & Business Expertise — Designed for professionals, not generic use.
✅ Seamless Integration — Easily power your chatbot with cutting-edge AI.
Sample Chatbox Widget

​
📐 Overview

This tutorial walks you through creating a sample Financial Research Assistant chatbot Widget on your proprietary platform. Flow Summary:
  • The Web Widget sends users’ inputs to the Python-based chat server chat-server.py.
  • The server processes these inputs and communicates with Bigdata.com’s Chat Service API.
  • Responses are routed back to the Web Widget for display.

​
🧰 Prerequisites

If you are on a Windows machine, please use your workspace in your windows machine instead of your Windows Subsystem for Linux (WSL). Otherwise you will run into issues when trying to execute the application.

​
🧪 Step 1: Create the Project folder

Open your Windows PowerShell and run the following commands: 
mkdir my-chat-widget
cd my-chat-widget
npm init
That command will prompt you to configure some fields.
  • When asked about entry point: (index.js), type main.js
package name: (my-chat-widget)
version: (1.0.0)
description: Bigdata.com Chatbot Windows Widget
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: Your name
license: (ISC)
About to write to C:\Users\osanchez\workspace\my-chat-widget\package.json:

{
  "name": "my-chat-widget",
  "version": "1.0.0",
  "description": "Bigdata.com Chatbot Windows Widget",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your name",
  "license": "ISC"
}


Is this OK? (yes) yes
It creates the following structure: 
my-chat-widget/
├── package.json
and the next steps will create the following structure: 
my-chat-widget/
├── main.js
├── index.html
├── package.json
└── icon.ico (Optional)

​
🧑‍💻 Step 2: Update the package.json

{
  "name": "my-chat-widget",
  "version": "1.0.0",
  "main": "main.js",
  "description": "Bigdata.com Chatbot Windows Widget",
  "author": "Your name",
  "scripts": {
    "start": "electron .",
    "dist": "electron-builder"
  },
  "build": {
    "appId": "com.bigdata.chat",
    "productName": "My Widget",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": "nsis",
      "icon": "bigdata-icon.ico"
    }
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.13.3"
  }
}

​
🧭 Step 3: Create the index.html file

We will create a basic index.html file with an iFrame to the Bigdata Chatbox Sample Web App. 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Financial Assistant</title>
  <link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      font-family: 'Hanken Grotesk', Mo, sans-serif;
    }
    .top-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #2c3e50;
      color: white;
      padding: 10px 20px;
      user-select: none;
      -webkit-app-region: drag;
    }
    .top-bar-left {
      display: flex;
      align-items: center;
    }
    .top-bar img.logo {
      height: 20px;
      margin-right: 15px;
    }
    .close-btn {
      background: none;
      border: none;
      color: white;
      font-size: 1.5em;
      cursor: pointer;
      -webkit-app-region: no-drag;
    }
    .close-btn:hover {
      color: #e74c3c;
    }
    #widget {
      width: 100%;
      height: calc(100vh - 50px);
      overflow: hidden;
    }
    #widget iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
  </style>
  <script>
    function closeApplication() {
      // Customize this behavior to integrate with your app logic
      if (confirm("Are you sure you want to close the application?")) {
        window.close();
      }
    }
  </script>
</head>
<body>
    <div class="top-bar">
        <div class="top-bar-left">
            <img class="logo" src="https://mintlify.s3.us-west-1.amazonaws.com/ravenpackinternational/logo/logo_ribbon_horiz_inverted@4x.png" alt="Logo">
        </div>
        <button class="close-btn" onclick="closeApplication()">&times;</button>
    </div>
  <div id="widget">
    <iframe src="https://fin-chat-whisper.lovable.app/"></iframe>
  </div>
</body>
</html>

​
📥 Step 4: Install electron-builder

Run this from your project root: 
npm install --save-dev electron-builder

​
🕸️ Step 5: Create a basic main.js

This is your window (you probably already have this): 
const { app, BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    frame: false,           // Hides title bar and window controls
    alwaysOnTop: false,      // Keeps widget above other windows
    transparent: true,      // Makes window background transparent
    resizable: true,       // Optional: Prevent resizing
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  win.loadFile('index.html'); // or loadURL if you're using a remote site

}

app.whenReady().then(createWindow);

​
🌐 Step 6: Customise icon

You can create your own icon.ico or download this sample bigdata-icon.ico

​
🛠️ Step 7: Build the App

From your project folder: 
npm run dist
This will:
  • Compile the app
  • Package it into an installer (e.g. My Widget Setup 1.0.0.exe)
  • Output it to a dist/ folder
You can now share that EXE with others. You can also use the npm run start command to run the app in development mode.
⌘I