hotel-ai-widget
Version:
A customizable hotel chat widget for React and vanilla HTML
182 lines (137 loc) • 3.71 kB
Markdown
# 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)
```bash
npm install hotel-ai-widget
```
### As Embeddable Widget (Any Website)
Add this to your HTML:
```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
```jsx
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)
```html
<!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
```javascript
// 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
```bash
# Install dependencies
npm install
# Build for development
npm run dev
# Build for production
npm run build
# Build embed version
npm run build:embed
```
## Publishing
```bash
# Build and publish to npm
npm run build
npm publish
```
## CDN Usage
You can also use the widget directly from a CDN:
```html
<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