retrip-widget

v1.1.4

Published

a month ago

Embeddable widget for Retrip AI-powered travel quotations

0High
0Medium
0Low

nachoretrip

retrip-widget

Embeddable AI-powered travel quotation widget for Retrip.

What is this?

An embeddable widget component that enables travel agencies to integrate Retrip's AI-powered quotation system directly into their website. Place it anywhere on your page - it renders as an inline component that users can interact with to get travel quotes.

Features

🎨 Shadow DOM Isolation: Styles won't conflict with your website's CSS
🔌 Web Component: Works with any framework (React, Vue, Angular, vanilla HTML)
📱 Fully Responsive: Adapts to mobile screens
⚡ Built with React: Modern UI with Tailwind CSS styling
💬 AI-Powered: Integrated with Retrip's AI agent system
📎 File Attachments: Support for images and documents
♿ Accessible: Proper ARIA attributes for screen readers

Preview

The widget renders as an embedded input component with quote cards displayed below. You control where it appears on your page by placing the <retrip-widget> element in your desired location.

Installation

Via CDN (Easiest)

<!DOCTYPE html>
<html>
  <head>
    <title>My Travel Agency</title>
  </head>
  <body>
    <!-- Your content -->

    <!-- Retrip Widget - place where you want it to appear -->
    <div style="max-width: 600px; margin: 2rem auto; padding: 1rem;">
      <retrip-widget agent-id="my-agent-123"></retrip-widget>
    </div>

    <script src="https://unpkg.com/retrip-widget@latest/dist/widget.umd.js"></script>
  </body>
</html>

Via NPM

npm install retrip-widget

// In your app entry point
import "retrip-widget";

// Now the <retrip-widget> custom element is available

Usage

Basic Example

<div style="max-width: 600px; margin: 2rem auto;">
  <retrip-widget agent-id="my-agent-123"></retrip-widget>
</div>

The widget will render inline at the location where you place the <retrip-widget> element. Wrap it in a container div to control its width and positioning.

React Example

import "retrip-widget";

export default function ContactPage() {
  const agentId = process.env.NEXT_PUBLIC_RETRIP_AGENT_ID;

  return (
    <div className="container mx-auto py-8">
      <h1>Get a Travel Quote</h1>
      <p>Enter your travel preferences below:</p>
      <div className="max-w-2xl mx-auto mt-6">
        <retrip-widget agent-id={agentId} />
      </div>
    </div>
  );
}

Vue Example

<template>
  <div class="max-w-2xl mx-auto p-6">
    <h1>Get a Travel Quote</h1>
    <retrip-widget :agent-id="agentId" />
  </div>
</template>

<script setup>
import "retrip-widget";

const agentId = import.meta.env.VITE_RETRIP_AGENT_ID;
</script>

Angular Example

// app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

<!-- component.html -->
<retrip-widget [attr.agent-id]="agentId"></retrip-widget>

Configuration

Attributes

| Attribute | Type | Required | Default | Description | | ---------- | -------- | -------- | ----------- | ----------------------------------------------------------- | | agent-id | string | Yes | "unknown" | Your Retrip agent identifier. Displayed in the chat header. |

TypeScript Types

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "retrip-widget": {
        "agent-id": string;
      };
    }
  }
}

Placement Tips

The widget renders inline at the location where you place it. For best results:

Container Width: Use a container with max-width: 600px or similar
Spacing: Add padding/margin around the widget for better UX
Visibility: Ensure the parent container is visible (not display: none)
Responsive: The widget adapts to its container width

Example with proper container:

<div style="max-width: 600px; margin: 2rem auto; padding: 1rem;">
  <retrip-widget agent-id="my-agent-123"></retrip-widget>
</div>

Widget Behavior

UI Components

The widget consists of:

Input Area:
- Text input for travel preferences
- File attachment support
- Submit button
- Action buttons (attachments, speech input, search)
Quote Cards:
- Displayed below the input after submission
- Shows destination, dates, pricing, and details
- Multiple quotes displayed in a responsive grid

Interactions

Type your travel preferences → Submit
Attach files (images, PDFs) → Supported
View quote cards → Displayed below input
Responsive layout → Adapts to container width

Current Functionality

Note: This is an early version. Current capabilities:

✅ Opens/closes chat interface
✅ Message input and submission
✅ Displays agent ID
⏳ Message history (placeholder UI only)
⏳ AI agent integration (coming soon)
⏳ File attachments (coming soon)
⏳ Live status updates (coming soon)

Messages are currently logged to the browser console. Full AI integration is in development.

Styling

Shadow DOM Isolation

The widget uses Shadow DOM, meaning:

✅ Your site's CSS won't break the widget ✅ The widget's CSS won't affect your site ✅ No class name conflicts

Design

Colors: Modern design system with light/dark mode support
Font: System fonts (Inter, system-ui)
Layout: Responsive, adapts to container width
Styling: Fully isolated via Shadow DOM

Browser Support

| Browser | Min Version | Notes | | ------- | ----------- | ------------ | | Chrome | 90+ | Full support | | Firefox | 88+ | Full support | | Safari | 14+ | Full support | | Edge | 90+ | Full support |

Requirements:

Custom Elements v1 API
Shadow DOM v1 API
ES6+ JavaScript

Troubleshooting

Widget doesn't appear

Check browser console for errors
Verify the script loaded: console.log(customElements.get('retrip-widget')
Ensure agent-id attribute is set Widget placement: The widget renders inline where you place it. Make sure:

The element is inside a visible container (not display: none)
The container has sufficient width (recommended: at least 400px)
The widget isn't hidden by CSS (overflow: hidden, z-index, etc.)

Widget appears but is invisible

Check that:

The container has dimensions (width/height)
No CSS is hiding the widget (opacity: 0, visibility: hidden)
Shadow DOM is supported in your browser

Styles look wrong

The widget uses Shadow DOM for isolation. If styles are broken, it's likely an internal issue—please file an issue.

Changelog

See CHANGELOG.md for version history.

Development

This package is part of the Retrip monorepo.

Local Development

# Clone the repository
git clone https://github.com/retrip-ai/retrip.git
cd retrip

# Install dependencies
bun install

# Start development server
cd packages/retrip-widget
bun dev

Open http://localhost:5173 to see the widget in action.

Building

bun run build

Output: dist/widget.umd.js (for CDN) and dist/widget.js (for bundlers)

Contributing

Contributions are welcome! Please see the Retrip Contributing Guide.

License

MIT © Retrip

Support

📧 Email: [email protected]
🐛 Issues: GitHub Issues
💬 Discussions: GitHub Discussions

Made with ❤️ by the Retrip team

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

retrip-widget

What is this?

Features

Preview

Installation

Via CDN (Easiest)

Via NPM

Usage

Basic Example

React Example

Vue Example

Angular Example

Configuration

Attributes

TypeScript Types

Placement Tips

Widget Behavior

UI Components

Interactions

Current Functionality

Styling

Shadow DOM Isolation

Design

Browser Support

Troubleshooting

Widget doesn't appear

Widget appears but is invisible

Styles look wrong

Changelog

Development

Local Development

Building

Contributing

License

Support