A customizable hotel chat widget for React and vanilla HTML
npm install hotel-ai-widgetA customizable hotel chat widget that can be used as both a React component and an embeddable widget for any website.
- 🏨 Hotel-specific chat interface
- 🗺️ Interactive map integration
- 📅 Itinerary management
- 🖼️ Image gallery
- 📱 Responsive design
- 🎨 Customizable themes
- 🔧 Easy integration
---
``bash`
npm install hotel-ai-widget
Add this to your HTML:
`html
href="https://unpkg.com/hotel-ai-widget/embed/hotel-ai-widget.min.css"
/>
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"
>
`
---
`jsx
import React from "react";
import { HotelChatWidget } from "hotel-ai-widget";
function App() {
return (
---
$3
html
href="https://unpkg.com/hotel-ai-widget/embed/hotel-ai-widget.min.css"
/>
My Website
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"
>
`
---
`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",
});
---
| 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 |
---
`bashInstall dependencies
npm install
---
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
href="https://unpkg.com/hotel-ai-widget@latest/embed/hotel-ai-widget.min.css"
/>
``---
MIT