Build a B2B AI Support Platform: RAG, Embeddings, Deploy

Nooshin Alibhai

Founder and CEO of Supportbench.

January 24, 2026

The modern B2B landscape demands sophisticated customer engagement tools to meet rising expectations for efficiency, personalization, and accessibility. This guide walks you through the development and deployment of a fully functional AI-powered chat widget that can be integrated into external websites via an embed script. By the end, you’ll understand how to build an embeddable chat solution, enable organization-specific configurations, and ensure seamless deployments.

Introduction

In today’s B2B ecosystem, businesses require robust tools to streamline customer support and enhance user interaction. An embeddable AI chat widget is an excellent solution for providing real-time assistance, managing customer queries, and elevating the customer experience across platforms. This guide demonstrates how to build a widget from scratch, create an embed script, and deploy it for real-world use.

What You’ll Learn:

How to create embed functionality for a chat widget
Techniques for UI and backend integration to support organization-specific configurations
Embedding the widget in multiple platforms using a JavaScript snippet
Best practices for optimizing and deploying your application for production use

Step 1: Setting Up the Embed Environment

A robust embed script requires an environment optimized for creating lightweight, reusable components. This involves setting up a dedicated embed application using Vite.

1.1 Create the Embed App

Create a new directory for the embed app inside your monorepo:
```
apps/     ├─ web/     ├─ vidget/     ├─ embed/ 
```

In apps/embed, create a package.json with the following entries:

{     "name": "embed",     "version": "0.1.0",     "type": "module",     "private": true,     "scripts": {         "build": "vite build"     },     "devDependencies": {         "vite": "^5.0.8",         "typescript": "^5.1.3",         "@types/node": "^20.4.3",         "@workspace/eslint-config": "^1.0.0"     } }

Set up linting and TypeScript configurations:

eslint.config.js:

import baseConfig from "@workspace/eslint-config/base.js"; export default { ...baseConfig };

tsconfig.json:

{     "extends": "@workspace/tsconfig/base.json",     "compilerOptions": {         "target": "ESNext",         "module": "ESNext",         "lib": ["DOM", "ESNext"],         "skipLibCheck": true,         "moduleResolution": "Node",         "noEmit": true     },     "include": ["embed.ts", "vite.config.ts", "vite-env.d.ts"] }

Set up the Vite configuration in vite.config.ts:

import { defineConfig } from 'vite'; import { resolve } from 'path';  export default defineConfig({     build: {         lib: {             entry: resolve(__dirname, 'embed.ts'),             name: 'EchoWidget',             fileName: 'widget',             formats: ['iife']         },         rollupOptions: {             output: {                 extend: true             }         }     } });

1.2 Prepare Environment Variables

Define a default environment file for the embed script:

// vite-env.d.ts interface ImportMetaEnv {     readonly VITE_WIDGET_URL: string; }  interface ImportMeta {     readonly env: ImportMetaEnv; }

Step 2: Building the Embed Script

With the environment configured, the next step is to construct the logic for the chat widget. The embed script is responsible for loading the widget UI via an iframe and managing its behavior.

2.1 Script Design and Initialization

The script dynamically inserts the widget iframe and controls its UI elements, like open/close buttons.

Core Components:

Define Constants:

export const embedConfig = {     widgetURL: import.meta.env.VITE_WIDGET_URL || 'http://localhost:3001',     defaultPosition: 'bottom-right' };

Create the Embed Script:

(() => {     let iframe, button;      const initializeWidget = (orgID) => {         iframe = document.createElement('iframe');         iframe.src = `${embedConfig.widgetURL}?organizationID=${orgID}`;         iframe.style.position = 'fixed';         iframe.style.bottom = '0';         iframe.style.right = '0';                  document.body.appendChild(iframe);          button = document.createElement('button');         button.innerText = 'Chat';         button.onclick = () => toggleWidget();          document.body.appendChild(button);     };      const toggleWidget = () => {         iframe.style.display = iframe.style.display === 'none' ? 'block' : 'none';     };      window.EchoWidget = { init: initializeWidget }; })();

Step 3: Generating Dynamic Integration Snippets

The embed script allows developers to integrate the chat widget into their applications. To make this process seamless, you can dynamically generate integration snippets for multiple frameworks like HTML, React, and Next.js.

Example Integration Snippet:

For HTML:

<script src="https://example.com/embed.js" data-organization-id="12345"></script>

For React or Next.js:

import Script from 'next/script';  <Script     src="https://example.com/embed.js"     data-organization-id="12345" />

Step 4: Deploying the Apps

After completing the development, deploy both the web app and widget app to live environments, ensuring the embed script points to the correct domain.

Steps:

Deploy the Web App:
- Use your preferred hosting service (e.g., Vercel).
- Add environment variables for the production environment.
Deploy the Widget App:
- Ensure the domain matches the embedConfig.widgetURL.
- Host the minified embed script (widget.js) alongside the widget app.

Step 5: Testing the Embed Integration

To test the embed script:

Create a simple landing.html file:

<html> <head>     <title>Test Integration</title> </head> <body>     <script src="https://example.com/widget.js" data-organization-id="12345"></script> </body> </html>

Open the HTML file in a browser and verify the widget functionality.

Key Takeaways

Embed Script Design: Use an immediately invoked function expression (IIFE) to create a self-contained script that avoids polluting the global namespace.
Dynamic Snippets: Simplify integration by generating framework-specific snippets with placeholders for organization IDs.
Environment-specific Configurations: Use environment variables to dynamically resolve widget URLs for development and production environments.
Vite for Optimization: Leverage Vite to bundle, minimize, and build production-ready embed scripts.
Testing and Deployment: Test embed functionality using standalone HTML files, and ensure the widget script points to the live domain after deployment.
Widget Interactivity: Provide developers with a global API (e.g., EchoWidget.init) for controlling widget behavior programmatically.

Conclusion

Creating a customizable, embeddable chat widget offers a powerful tool for B2B organizations to engage with customers and provide real-time support. By leveraging modern build tools and best practices, you can ensure seamless integration across platforms and deliver a polished, professional experience to your users.

Source: "Build and Deploy a B2B SaaS AI Support Platform | Next.js 15, React, Convex, Turborepo, Vapi, AWS" – Code With Antonio, YouTube, Aug 22, 2025 – https://www.youtube.com/watch?v=HUfZNPzI-rw