I Built a Custom AI Chatbot Using a JS Widget – Here's a Quick Walkthrough

Learn how to build AI chatbot for websites in 48 hours

For over 5 months, I’ve been thinking about building an AI chatbot for my website.

I added Noupe once. It was fun and worked well. But in a week I had some amazing ideas to customize the features further for my business. Unfortunately, the features I was looking for were locked behind the enterprise plans.

And then in over a month, I met one of my old acquaintances. We discussed this project and he shared his idea on building chatbots with JS widgets.

He used Sendbird. I felt it was a bit pricey for my business currently.

So I made a list and condensed it to two options: MirrorFly and Vapi. Since I wanted an on-prem solution for the next few years, I picked MirrorFly after reading their guide on how to build a custom AI chatbot.

The setup was simple and quick (completed the entire dev in 43 hours). I felt it would be helpful for other developers who have a similar idea and mine and so I made this chatbot tutorial.

In this guide, I’m sharing the exact steps I followed. You can replicate it or make changes as per your requirements.

Part I: Agent Creation

1. Setting up your agent

To get started with this project, you will need access to MirrorFly’s AI agent dashboard. Contact the team, discuss your requirements and get your credentials.

Once you get the credentials, log in to the dashboard.

Inside the dashboard, click the 'Create Agent' button. A popup will appear with 3 different options: Chatbot, Voice Agent and Task Agent. Select 'Task Agent'.

Click on 'Continue'. This will open a form to collect your chat agent’s name, description, system prompt (guardrails), dataset, agent avatar, language, dataset and the opening message.

2. Setting up the Personality & Agent Model

Once you create the AI chatbot,

• Set the welcome message that the agent will start the conversation with.
• Next, set the fallback response - the message which the agent will respond with when the agent does not have an accurate/ relevant response.
• Pick a Formality: Casual, neutral or formal
• Choose a tone: Personable, confident, empathetic, engaging, witty or direct.
• Select an AI model - one from OpenAI or Anthropic
• Create an SDK key to start the integration process.

3. Agent Training

• Prepare a knowledge base of your product or service details in PDF, CSV or TXT format.
• Navigate the Datasets
• Click on ‘Import from file’.
• Add the file from your local device.

Another option is adding the details from your website.

• Click on the ‘Sync from website’ button.
• Add the URL you want to sync the data from.

Since you are creating a RAG-based assistant, your chatbot will fetch data from this dataset rather than generic automated conversations.

Make sure you update the data periodically to keep the chatbot up-to-date. Other way around, syncing your website will help the chatbot fetch the latest information from your website, without having to manually update the information.

4. Workflow Builder

Go to the Workflows tab and set up how your agent talks to users:

• Define the conversation flow and decision logic.
• Add API calls and forms to collect user data.
• Set up email triggers and message nodes.

5. Connect Custom Tools

Go to the Custom Tools section to connect external services to your agent:

• Set up a Webhook to send and receive real-time data from third-party apps.
• Connect an MCP Server to give your agent access to external tools and data sources.

By the end of this step, your chat agent set up is complete.

Part II: Integrating the Agent Into Your Website

What you’ll need?

• Your Agent ID from the dashboard.
• Your website must run on HTTPS for microphone access.
• Latest versions of Chrome, Edge, or Safari.

Supported Browsers: Latest versions of Chrome, Edge, and Safari.

1. Install the SDK

Copy the script below and add it to your HTML file.

<script src="https://d1nzh49hhug3.cloudfront.net/aiVoiceScript/uat/mirrorfly/mirror-fly-ai.v1.1.1.js"></script>

2. Initialize the Agent

Add a container element to your HTML and initialize the SDK with your settings.

// HTML Container
<div id="widget"></div>

// Initialization
MirrorFlyAi.init({
  container: "#widget",
  agentId: "<YOUR_AGENT_ID>",
  title: "Voice Assistant",
  theme: "dark",
  triggerStartCall: true,
  transcriptionEnable: true,
  transcriptionInUi: true,
  chatEnable: true,
  agentConnectionTimeout: 500
});

3. Handle Callbacks

Use callbacks to track the agent's connection status and capture transcriptions.

const callbacks = {
  onTranscription: (data) => console.log('Transcription:', data),
  onAgentConnectionState: (state) => console.log('Connection:', state),
  onError: (error) => console.error('SDK Error:', error)
};

4. Dynamic Agent Switching

If you're running multiple agents, use this function to switch between them on the fly.

function switchAgent(newAgentId){

  MirrorFlyAi.destroy();
  document.querySelector('#widget').innerHTML = "";

  MirrorFlyAi.init({
    container: "#widget",
    agentId: newAgentId,
    triggerStartCall: true
  });

}

And that's it!

Your AI chatbot is ready!

Over the past few months, I assumed the process of developing chatbots was some rocket science. But it turned out to be one of the most interesting and straightforward builds I’ve done recently.

I hope things turn out well with your chatbot ideas for you as well!

If you have questions about any of the steps or ran into something different in your setup, drop a comment below. Happy to help troubleshoot.

Reference

For the complete implementation and source code, check the official repository below:

https://github.com/MirrorFly/White-Label-AI-Chatbot

Comments

[Đức Nguyễn Đình]

Quick personal review of AhaChat after trying it
I recently tried AhaChat to set up a chatbot for a small Facebook page I manage, so I thought I’d share my experience.
I don’t have any coding background, so ease of use was important for me. The drag-and-drop interface was pretty straightforward, and creating simple automated reply flows wasn’t too complicated. I mainly used it to handle repetitive questions like pricing, shipping fees, and business hours, which saved me a decent amount of time.
I also tested a basic flow to collect customer info (name + phone number). It worked fine, and everything is set up with simple “if–then” logic rather than actual coding.
It’s not an advanced AI that understands everything automatically — it’s more of a rule-based chatbot where you design the conversation flow yourself. But for basic automation and reducing manual replies, it does the job.
Overall thoughts:
Good for small businesses or beginners
Easy to set up
No technical skills required
I’m not affiliated with them — just sharing in case someone is looking into chatbot tools for simple automation.
Curious if anyone else here has tried it or similar platforms — what was your experience?