@juna_dine/core

v1.0.6

Published

2 days ago

Core logic for AI Chatbot SDK

0High
0Medium
0Low

Junadine Chatbot Widget

A powerful, fully customizable, AI-driven restaurant chatbot widget. It can be easily integrated into any React/Next.js application or embedded into Vanilla JS / HTML websites (like WordPress, Shopify, or plain HTML).

🚀 Installation

For React / Next.js

Install the packages via your favorite package manager:

npm install @juna_dine/react @juna_dine/core
# or
yarn add @juna_dine/react @juna_dine/core
# or
pnpm add @juna_dine/react @juna_dine/core

For Vanilla JS / HTML (CDN)

If you are not using React, you can include the widget directly via a script tag right before your closing </body> tag:

<!-- Load the Junadine Chatbot Widget -->
<script src="https://chatbot.junadine.ai/junadine-widget/v1/index.umd.js"></script>

<!-- Initialize the Chatbot -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
      window.JunadineChatbot.init({
          restaurantKey: 'YOUR_RESTAURANT_KEY',
          themeColor: '#C2410C',
          position: 'bottom-right'
      });
  });
</script>

💻 React Usage Guide

1. Setup the Provider and Widget

Wrap your application (or the specific layout where you want the chatbot to appear) with the ChatbotProvider and include the ChatbotWidget.

// app/layout.tsx or app/providers.tsx
'use client';

import { ChatbotProvider, ChatbotWidget } from '@juna_dine/react';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ChatbotProvider 
          config={{ 
            restaurantKey: 'YOUR_RESTAURANT_KEY',
            title: "Bob's Pizza Bot",
            themeColor: "#C2410C"
          }}
        >
          {children}
          <ChatbotWidget />
        </ChatbotProvider>
      </body>
    </html>
  );
}

2. Custom Triggers (Opening Chat from your own Buttons)

You don't have to rely solely on the default floating chat icon. You can open the chat from any button on your website using the useChatbot hook!

'use client';

import { useChatbot } from '@juna_dine/react';

export default function OrderPage() {
  const { setIsOpen } = useChatbot();

  return (
    <div>
      <h1>Hungry?</h1>
      <button onClick={() => setIsOpen(true)}>
        Order Now via Chat
      </button>
    </div>
  );
}

Note: If you want to only use your custom buttons and hide the default floating circular button, pass hideLauncher: true in your ChatbotProvider config!

⚙️ Configuration Options

The config object accepts the following properties to completely white-label and customize the widget to match your brand:

Required

Appearance & UI

Text & Copy

Behavior

🌐 Vanilla JS Custom Triggers

If you are using the CDN/Vanilla JS version of the widget, you can still trigger the chat from your own HTML buttons! The widget exposes a global window.JunadineChatbot object.

<!-- A custom button anywhere on your website -->
<button onclick="window.JunadineChatbot.open()">
  Ask a Question
</button>

<!-- Other available methods: -->
<!-- window.JunadineChatbot.close() -->
<!-- window.JunadineChatbot.toggle() -->

🛠 Architecture

This project is structured as a monorepo containing:

@juna_dine/core: The framework-agnostic logic, API communication, and state management.
@juna_dine/react: The React Context, Hooks, and UI Components.
@juna_dine/widget: The bundled Vanilla JS wrapper for CDN deployment.