hotel-ai-widget

v0.0.12

Published

5 months ago

A customizable hotel chat widget for React and vanilla HTML

0High
0Medium
0Low

pradyumbuk

react chat widget hotel travel embeddable

Hotel Chat Widget

A customizable hotel chat widget that can be used as both a React component and an embeddable widget for any website.

Features

🏨 Hotel-specific chat interface
🗺️ Interactive map integration
📅 Itinerary management
🖼️ Image gallery
📱 Responsive design
🎨 Customizable themes
🔧 Easy integration

Installation

As NPM Package (React)

npm install hotel-ai-widget

As Embeddable Widget (Any Website)

Add this to your HTML:

<!-- CSS -->
<link
  rel="stylesheet"
  href="https://unpkg.com/hotel-ai-widget/embed/hotel-ai-widget.min.css"
/>

<!-- Widget Container -->
<div
  data-hotel-ai-widget
  data-api-key="your-api-key"
  data-base-url="https://your-api-endpoint.com"
  data-google-maps-api-key="your-google-maps-key"
  data-theme="light"
  data-position="bottom-right"
></div>

<!-- JavaScript -->
<script src="https://unpkg.com/hotel-ai-widget/embed/hotel-ai-widget.min.js"></script>

Usage

React Component

import React from "react";
import { HotelChatWidget } from "hotel-ai-widget";

function App() {
  return (
    <div>
      <HotelChatWidget
        config={{
          apiKey: "your-api-key",
          baseUrl: "https://your-api-endpoint.com",
          googleMapsApiKey: "your-google-maps-key",
          theme: "light",
          position: "bottom-right",
        }}
      />
    </div>
  );
}

Embeddable Widget (Full HTML Example)

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/hotel-ai-widget/embed/hotel-ai-widget.min.css"
    />
  </head>
  <body>
    <h1>My Website</h1>

    <!-- Widget will appear here -->
    <div
      data-hotel-ai-widget
      data-api-key="your-api-key"
      data-base-url="https://your-api-endpoint.com"
      data-google-maps-api-key="your-google-maps-key"
      data-theme="light"
      data-position="bottom-right"
    ></div>

    <script src="https://unpkg.com/hotel-ai-widget/embed/hotel-ai-widget.min.js"></script>
  </body>
</html>

Manual Initialization

// Initialize widget programmatically
window.HotelChatWidget.init({
  apiKey: "your-api-key",
  baseUrl: "https://your-api-endpoint.com",
  googleMapsApiKey: "your-google-maps-key",
  theme: "dark",
  position: "bottom-left",
});

Configuration Options

| Option | Type | Default | Description | | ------------------ | ----------------------------------- | ---------------- | --------------------- | | apiKey | string | – | Your API key | | baseUrl | string | – | Your API endpoint URL | | googleMapsApiKey | string | – | Google Maps API key | | theme | 'light' | 'dark' | 'light' | Widget theme | | position | 'bottom-right' | 'bottom-left' | 'bottom-right' | Widget position |

Development

# Install dependencies
npm install

# Build for development
npm run dev

# Build for production
npm run build

# Build embed version
npm run build:embed

Publishing

# Build and publish to npm
npm run build
npm publish

CDN Usage

You can also use the widget directly from a CDN:

<link
  rel="stylesheet"
  href="https://unpkg.com/hotel-ai-widget@latest/embed/hotel-ai-widget.min.css"
/>
<script src="https://unpkg.com/hotel-ai-widget@latest/embed/hotel-ai-widget.min.js"></script>

License

MIT