@locdo.tech/botiq-chat-sdk

Embed the BotIQ AI chatbot widget into any website with one line of code. Vanilla JS, React, and Vue entry points included.

Live dashboard & docs: botiq.vn

Installation

npm install @locdo.tech/botiq-chat-sdk

You also need a Widget Embed Key (sk-biq-...) issued from your BotIQ admin dashboard.

Quick start — Vanilla JS / TS

import { init } from '@locdo.tech/botiq-chat-sdk';

const dispose = init({ apiKey: 'sk-biq-xxxxxxxxxxxxxxxx' });

// Later, to remove the widget:
dispose();

init() returns a cleanup function — call it to unmount the widget.

React

import { BotIQWidget } from '@locdo.tech/botiq-chat-sdk/react';

export function App() {
  return <BotIQWidget apiKey="sk-biq-xxxxxxxxxxxxxxxx" />;
}

The widget reinitialises only when apiKey changes.

Vue 3

<script setup lang="ts">
import { BotIQWidget } from '@locdo.tech/botiq-chat-sdk/vue';
</script>

<template>
  <BotIQWidget api-key="sk-biq-xxxxxxxxxxxxxxxx" />
</template>

Configuration

| Prop | Type | Required | |---|---|---| | apiKey | string | ✅ |

That's it. The bot name, colors, layout, position, greeting message, and all other visual options are configured by your admin/tenant in the BotIQ dashboard and fetched at runtime from /widget/meta — keeping integration code dead simple and letting non-developers tweak the UI without re-deploying.

Need just a <script> tag?

For static HTML (no bundler), use the CDN build:

<script
  src="https://bot-q-frontend.vercel.app/widget.js"
  data-api-key="sk-biq-xxxxxxxxxxxxxxxx"
></script>

The script auto-initialises on DOMContentLoaded — no JavaScript required.

Security

The Widget Embed Key (sk-biq-...) is safe to expose in HTML/source. Each key is locked to a domain whitelist on the backend — requests from unlisted origins are rejected. To rotate or revoke a key, use the BotIQ admin dashboard.

Migrating from 0.1.x

0.2.0 removes the following props from init(), <BotIQWidget>, and the <script> tag — they were redundant because the same values come from your bot config on the backend:

• apiUrl — production URL is now baked into the bundle
• botName, position, primaryColor, data-bot-name, data-position, data-primary-color, data-api-url

If you were setting these from snippet config, the dashboard values now win. Visit Admin → Bots → Design to confirm the bot name and colors look right after upgrading.

License

MIT © BotIQ (LocDo.Tech)