Chatbot Integration

Quick Start

Add two snippets before your closing </body> tag — that's all you need:

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com"
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

A floating chat button appears in the bottom-right corner of your page. The widget auto-injects its own CSS — no extra stylesheet needed.

How It Works

The chatbot widget follows a simple flow:

1. Click the floating chat button to open the panel
2. Sign in with your email (username) and secret answer
3. Chat with the AI assistant in real time
4. Reset the conversation at any time with the ↻ button
5. Logout to clear the session (token stored in sessionStorage)

The widget is fully self-contained — a single JavaScript file with built-in styles, i18n, authentication, and chat functionality. On the Pro plan it provides a simple chat interface using three core endpoints. On the Enterprise plan it unlocks a full multi-modality experience with 82 endpoints across 15 modalities — including code generation, image & video analysis, voice, document generation, knowledge base, and more.

Configuration Options

All options are set on window.JamiiAIWidget before loading the script:

Theme Options Enterprise

Enterprise customers can fully customise the widget's visual appearance:

window.JamiiAIWidget = {
  apiUrl: "https://api.jamiiai.com",
  plan: "enterprise",
  theme: {
    primaryColor: "#0066ff",
    accentColor: "#00ccaa",
    fontFamily: "'Poppins', sans-serif"
  }
};

Branding Options Enterprise

Enterprise users can white-label the widget with their own branding:

branding: {
  title: "Acme Support",
  subtitle: "We're here to help",
  logo: '<svg viewBox="0 0 32 32">...</svg>',
  showPoweredBy: false
}

Plan Comparison

Example — Pro Plan (Minimal)

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com",
    lang: "en"
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

Example — Pro Plan (French, Left-Positioned)

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com",
    lang: "fr",
    position: "bottom-left"
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

Example — Enterprise (White-Label)

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.yourcompany.com",
    plan: "enterprise",
    lang: "fr",
    position: "bottom-left",
    theme: {
      primaryColor: "#0066ff",
      accentColor: "#00ccaa",
      fontFamily: "'Poppins', sans-serif"
    },
    branding: {
      title: "Acme Support",
      subtitle: "We're here to help",
      logo: '<svg viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="#0066ff"/><text x="16" y="21" text-anchor="middle" fill="#fff" font-size="14" font-weight="bold">A</text></svg>',
      showPoweredBy: false
    }
  };
</script>
<script src="https://cdn.jamiiai.com/widget/jamiiai-widget.js"></script>

Self-Hosting

Download jamiiai-widget.js and serve it from your own domain:

<script>
  window.JamiiAIWidget = {
    apiUrl: "https://api.jamiiai.com"
  };
</script>
<script src="/assets/jamiiai-widget.js"></script>

An optional standalone CSS file (jamiiai-widget.css) is also provided for customers who prefer to host styles separately. The JS file auto-injects styles by default, so the CSS file is not required.

Account Creation & Subscription

Before using the chatbot widget, users must create an account and subscribe to a plan. The website provides a signup form that collects:

• Full name
• Email (also used as the username — the part before @)
• Phone
• Secret question & answer (used for widget login)

After signup the user is redirected to Stripe Checkout to choose a plan (Starter $19/mo, Pro $49/mo, Enterprise $199/mo). On successful payment the subscription is recorded automatically via webhook.

Relevant endpoints

API Endpoints Used

On the Pro plan the widget uses three core endpoints. On the Enterprise plan the widget has access to 82 endpoints across 15 modalities — the core endpoints below plus those listed in the modality table.

{
  "username": "john",
  "secret_answer": "my-secret"
}

{
  "access_token": "eyJhbGciOi...",
  "token_type": "bearer"
}

{
  "message": "What can you do?"
}

{
  "response": "I can help you with..."
}

{
  "message": "Chat reset successfully"
}

Enterprise Modality Endpoints

Enterprise users have a modality selector bar in the widget giving access to all of the following:

Authentication Flow

1. User clicks the floating chat button
2. A login form requests email (username) and secret answer
3. Credentials are sent to /auth/customer/login, which returns a JWT
4. The JWT is stored in sessionStorage (cleared on logout or tab close)
5. All subsequent API calls include the token as Authorization: Bearer
6. On a 401 response (expired token), the user is returned to the login form

Browser Support

Troubleshooting