dunefox-chatbot

The easiest way to add an AI chatbot to any website — HTML, React, Next.js, Vue, Laravel, WordPress, and more.

Dunefox is an AI-powered customer support platform. Deploy an intelligent chatbot on your website in under 2 minutes — no backend required. Manage all conversations, FAQs, and analytics from the Dunefox Console.

✨ Features

• 🤖 AI-powered responses — trained on your content, answers customer questions instantly
• ⚡ Zero-config embed — one <script> tag, works on any site
• 🎨 Fully customisable — position, icon, colors, and white-label branding
• 📱 Mobile-first — full-screen on mobile, floating panel on desktop
• 🖥️ Full-screen on desktop — visitors can expand the panel to read long answers and browse FAQs side by side
• 🔒 Privacy-safe — GDPR-friendly, no PII collected by default
• 🌐 Universal — HTML, React, Next.js, Vue, Nuxt, Laravel, WordPress, Webflow, Shopify
• 🗂️ Multi-site support — run separate webbots for different domains, all feeding one inbox

Installation

npm install dunefox-chatbot
# or: yarn add dunefox-chatbot  |  pnpm add dunefox-chatbot

Get your Tenant ID from the Dunefox Console → Settings → Install Widget.

Platform Guides

HTML / Laravel / WordPress / Any Site

No npm required. Paste this snippet before </body>:

<!-- AI Chatbot by Dunefox (dunefox.io) -->
<script src="https://app.dunefox.io/api/sdk/chatbot.js"></script>
<script>
  DunefoxChat.init({ tenantId: 'YOUR_TENANT_ID' });
</script>

Works on WordPress, Webflow, Squarespace, Shopify, Wix, and any HTML page.

Next.js (App Router)

// app/layout.tsx
import { DunefoxChatbot } from 'dunefox-chatbot/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        {/* AI chatbot — SSR-safe, mounts only in browser */}
        <DunefoxChatbot tenantId="YOUR_TENANT_ID" />
      </body>
    </html>
  );
}

React (Vite / CRA)

import { DunefoxChatbot } from 'dunefox-chatbot/react';

export default function App() {
  return (
    <>
      <YourApp />
      <DunefoxChatbot tenantId="YOUR_TENANT_ID" />
    </>
  );
}

Vue 3 / Nuxt

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';

onMounted(async () => {
  const { init } = await import('dunefox-chatbot');
  init({ tenantId: 'YOUR_TENANT_ID' });
});
onBeforeUnmount(async () => {
  const { destroy } = await import('dunefox-chatbot');
  destroy();
});
</script>

WordPress / WooCommerce

Add via WPCode or your theme's functions.php:

add_action('wp_footer', function() { ?>
  <script src="https://app.dunefox.io/api/sdk/chatbot.js"></script>
  <script>DunefoxChat.init({ tenantId: 'YOUR_TENANT_ID' });</script>
<?php });

Multiple Webbots (Multi-Site)

You can deploy separate webbots per domain or site (e.g. main site, blog, help centre) — all conversations flow into a single unified inbox with a source label showing which site each message came from.

How it works

1. Go to Console → Services → Web AI Agent and create a webbot for each site.
2. Each webbot gets its own Config ID (shown in the Deploy / Edit page).
3. Pass that configId when you call init() — conversations in your inbox will be tagged with the source domain automatically.

Plan limits

| Plan | Webbots allowed | |------|----------------| | Free | 3 | | Fox | 3 | | Fox Pro | 5 | | Fox Max | 10 |

Example — two sites, one inbox

Main marketing site (yourdomain.com):

<script src="https://app.dunefox.io/api/sdk/chatbot.js"></script>
<script>
  DunefoxChat.init({
    tenantId: 'YOUR_TENANT_ID',
    configId: 'CONFIG_ID_FOR_MAIN_SITE',  // from Console → Deploy page
  });
</script>

Help centre (help.yourdomain.com):

<script src="https://app.dunefox.io/api/sdk/chatbot.js"></script>
<script>
  DunefoxChat.init({
    tenantId: 'YOUR_TENANT_ID',
    configId: 'CONFIG_ID_FOR_HELP_SITE',  // different config, same inbox
  });
</script>

React / Next.js:

<DunefoxChatbot
  tenantId="YOUR_TENANT_ID"
  configId="CONFIG_ID_FOR_THIS_SITE"
/>

Note: configId is optional. Omitting it still works — conversations will appear in the inbox without a source label.

API Reference

init(options)

| Option | Type | Default | Description | |--------|------|---------|-------------| | tenantId | string | required | Your Dunefox tenant ID | | configId | string | undefined | Webbot config ID — links conversations to a specific site in the inbox. Find it in Console → Web AI Agent → Deploy. Required for multi-webbot setups. | | position | 'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left' | 'bottom-right' | Widget anchor corner | | offsetX | number | 0 | Extra horizontal inset from the anchor edge (px) | | offsetY | number | 0 | Extra vertical inset from the anchor corner (px) | | defaultOpen | boolean | false | Open the chat panel on page load | | hideBranding | boolean | false | Remove "Powered by Dunefox" badge (paid plans) | | expandable | boolean | true | Show the full-screen toggle beside the launcher while the chat is open. Desktop only — never offered below 768px, where the panel already fills the screen. | | baseUrl | string | https://app.dunefox.io | Override for staging/self-hosted | | iconUrl | string | Dunefox default | Custom toggle button icon URL |

open() / close()

Programmatically show or hide the chat panel:

DunefoxChat.open();
DunefoxChat.close();

Useful for triggering the chatbot from your own CTA button:

document.getElementById('my-help-btn').addEventListener('click', () => {
  DunefoxChat.open();
});

expand() / collapse()

Programmatically switch the open chat between the corner panel and the full-screen view:

DunefoxChat.expand();
DunefoxChat.collapse();

Visitors get this control for free — a small button appears next to the launcher whenever the chat is open — so you only need these if you want to drive it from your own UI. Pass expandable: false to init() to remove the control entirely.

Both calls no-op rather than throw when the viewport is under 768px (mobile is already full-screen), when expandable: false was set, or before init() has finished mounting.

destroy()

Completely remove the widget from the page:

DunefoxChat.destroy();

Branding & White Label

By default, a small "⚡ Powered by Dunefox AI" badge appears near the widget — this links back to dunefox.io and helps us grow.

To remove it on paid / white-label plans:

DunefoxChat.init({
  tenantId: 'YOUR_TENANT_ID',
  hideBranding: true,   // available on Pro and above
});

Upgrade your plan →

Building from Source

cd packages/chatbot-sdk
npm install
npm run build
# Outputs: dist/index.mjs (ESM), dist/index.js (CJS), dist/chatbot.umd.global.js (browser UMD)

About Dunefox

Dunefox is a modern AI customer support platform built for businesses of all sizes. With Dunefox you can:

• 🤖 Deploy an AI chatbot for your website in under 2 minutes
• 💬 Manage all customer conversations from a unified inbox
• 🗂️ Run multiple webbots across different sites — all in one inbox
• ❓ Build and publish FAQ knowledge bases your AI can answer from
• 📊 Track engagement and resolution rates with real-time analytics
• 🔗 Integrate via webhooks and REST APIs
• 🛒 Works with WooCommerce, Shopify, and any e-commerce platform

Get started for free at dunefox.io — no credit card required.

Support & Docs

• 📖 Documentation: docs.dunefox.com
• 💬 Community & support: dunefox.io/support
• 🐛 Issues: GitHub Issues
• 🌐 Website: dunefox.io

License

MIT © Dunefox

Built with ❤️ by the Dunefox team — AI chatbots for every website.