Next-Gen Customer Support

Intelligent Chat
For Modern Teams

Automate your workflow and delight users with AI-driven widgets that sound human and act instantly.

Try Live Demo Get Started

Features

Everything you need for enterprise-grade chat.

We’ve obsessively optimized every byte. The result is a chat interface that feels native to your site, regardless of your tech stack.

Rich File Sharing

Upload images, documents, and more with drag-and-drop support. Preview files instantly with size validation and multiple file handling.

System Status: Active

Shadow DOM Safety

Total style encapsulation. Your site's CSS will never leak into our widget, and our styles will never break your layout.

Modular Layouts

Choose between different widget styles—from a minimalist bubble to a full-screen sidebar.

Smart Emoji Picker

Rich emoji support with content filtering and customizable options. Express yourself with a comprehensive emoji library.

Lazy Loading

Chat panel loads only when needed. Optimized bundle size with code splitting for instant initial load.

Real-time Communication

Instant message delivery with typing indicators, read receipts, and emoji support. Built with WebSocket-ready architecture for scalable real-time chat.

Real-time Traffic

Live Experience

See it in Action.

A quick preview of how visitors open the widget, send a message, and get a reply. The real chatbot also lives on this page—try the corner bubble anytime.

demo.nanatec.co.ke

Fully responsive and optimized for all devices

Fast Deployment

Install the web component.

The @nana-tec/chatbot package registers <nana-tec-chatbot>. One import, one tag, your API URL and bot identity—done.

Quick start
any HTML / SPA layout

Live typing preview

  1. 1

    Install the package

    From your app root (npm, pnpm, yarn, or Bun). The published bundle is under dist/; importing the package loads the ES module that defines the custom element.

  2. 2

    Register once per page

    Add a type="module" script that imports '@nana-tec/chatbot'. That runs side effects and registers <nana-tec-chatbot> (or call defineNanaTecChatbot() from JS if you prefer).

  3. 3

    Place the element

    Set api-url to your Nanatec API origin (same host that serves /api/widget/config and /chat). chatbotid must match the chatbot slug stored in Mongo; namespace is demo or prod.

  4. 4

    CORS and chat requests

    Allow your site origin on the API. Chat POSTs send X-Chat-Id and X-Chat-Namespace so the server can load the right chat config and provider credentials—your widget passes these automatically when using the package client.

Copy-ready snippets

Replace values with your deployment. This site uses the same pattern in the layout.

Shell

npm install @nana-tec/chatbot

Register (layout or page)

<script type="module">
  import '@nana-tec/chatbot';
</script>

Markup

<nana-tec-chatbot
  api-url="https://api.chatbot.nanatec.co.ke"
  chatbotid="default"
  namespace="prod"
></nana-tec-chatbot>
Technical specifications
  • Shadow DOM isolation

    No CSS leakage or style conflicts with your host page.

  • Config from your API

    Widget loads public settings from GET /api/widget/config; chat uses your backend with identity headers.

  • Framework agnostic

    React, Vue, Svelte, Astro, WordPress, or static HTML—same element.

  • TypeScript core

    Typed package exports for advanced integrations.