Travware Packages Widget

Overview

The Travware Packages Widget (<travware-packages-widget>) is a lightweight embeddable UI component that lets partners, agencies, and websites display and search Travware travel packages directly on their platform—with zero backend integration required on your side.

It is implemented as a Web Component, so it works across:

• Plain HTML websites
• React applications (Vite, Next.js, CRA)
• Angular applications
• WordPress sites
• Shopify custom pages
• Any modern frontend framework that supports custom elements

Quick Start

Add the widget anywhere on your page, then load the script. The widget auto-initializes when the bundle is ready.

<travware-packages-widget
  locale="en"
  theme="dark"
  primary-color="#22d3ee"
  search-currency="EGP"
></travware-packages-widget>

<script src="https://packages-widget.vercel.app/packages-widget.js"></script>

Integration Guide

Choose your stack below. Every integration loads the same official Travware CDN script and renders <travware-packages-widget> with identical attributes.

Official CDN (required):

<travware-packages-widget
  locale="en"
  theme="dark"
  primary-color="#22d3ee"
  search-currency="EGP"
></travware-packages-widget>

<script src="https://packages-widget.vercel.app/packages-widget.js"></script>

import { useEffect } from "react";

export default function App() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://packages-widget.vercel.app/packages-widget.js";
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return (
    <travware-packages-widget
      locale="en"
      theme="dark"
      primary-color="#22d3ee"
      search-currency="EGP"
    />
  );
}

declare namespace JSX {
  interface IntrinsicElements {
    "travware-packages-widget": React.DetailedHTMLProps<
      React.HTMLAttributes<HTMLElement>, HTMLElement
    > & Record<string, string>;
  }
}

"use client";

import { useEffect } from "react";

export default function Page() {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = "https://packages-widget.vercel.app/packages-widget.js";
    script.async = true;
    document.body.appendChild(script);
  }, []);

  return (
    <travware-packages-widget
      locale="en"
      theme="dark"
      primary-color="#22d3ee"
      search-currency="EGP"
    />
  );
}

ngOnInit() {
  const script = document.createElement("script");
  script.src = "https://packages-widget.vercel.app/packages-widget.js";
  script.async = true;
  document.body.appendChild(script);
}

<travware-packages-widget
  locale="en"
  theme="dark"
  primary-color="#22d3ee"
  search-currency="EGP"
></travware-packages-widget>

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

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

<travware-packages-widget
  locale="en"
  theme="dark"
  primary-color="#22d3ee"
  search-currency="EGP"
></travware-packages-widget>

<script src="https://packages-widget.vercel.app/packages-widget.js"></script>

function travware_widget_script() {
  wp_enqueue_script(
    'travware-packages-widget',
    'https://packages-widget.vercel.app/packages-widget.js',
    [],
    null,
    true
  );
}
add_action('wp_enqueue_scripts', 'travware_widget_script');

<travware-packages-widget
  locale="en"
  theme="dark"
  primary-color="#22d3ee"
  search-currency="EGP"
></travware-packages-widget>

<script src="https://packages-widget.vercel.app/packages-widget.js"></script>

{% section 'travware-widget' %}

<script src="https://packages-widget.vercel.app/packages-widget.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const widget = document.createElement("travware-packages-widget");

    widget.setAttribute("locale", "en");
    widget.setAttribute("theme", "dark");
    widget.setAttribute("primary-color", "#22d3ee");
    widget.setAttribute("search-currency", "EGP");

    document.body.appendChild(widget);
  });
</script>

Widget Configuration

Attributes

Configure the widget declaratively on the custom element.

Theming

Light theme

theme="light"

Dark theme

theme="dark"

Branding color

primary-color controls buttons, highlights, active states, and UI accents. Example:

primary-color="#22d3ee"

End to End County partners often use #0B5CA3 (primary) and #FDB940 (secondary) on host pages around the widget.

Multi-language Support

Set the locale attribute for localized UI copy and layout direction:

locale="en"
locale="ar"
locale="fr"

Arabic (ar) enables RTL layout automatically.

API Configuration (Advanced)

Use a custom backend when building white-label portals, multi-tenant systems, or internal booking engines.

<travware-packages-widget
  api-base-url="https://dev-back.travware.info"
  api-origin="https://b2e.dartstravelers.com"
></travware-packages-widget>

Use cases

• White-label partner portals
• Multi-tenant SaaS booking platforms
• Internal agency booking engines with staging APIs

How It Works

1. Script loads from CDN: https://packages-widget.vercel.app/packages-widget.js
2. Custom element registers: <travware-packages-widget>
3. Widget initializes UI and fetches packages from the configured API
4. Renders search UI, filters, package cards, and booking entry points inside Shadow DOM

Example Full Integration

<!DOCTYPE html>
<html>
<head>
  <title>Travel Portal</title>
</head>
<body>

  <h1>Find Your Package</h1>

  <travware-packages-widget
    locale="en"
    theme="dark"
    primary-color="#22d3ee"
    search-currency="EGP"
    api-base-url="https://dev-back.travware.info"
    api-origin="https://b2e.dartstravelers.com"
  ></travware-packages-widget>

  <script src="https://packages-widget.vercel.app/packages-widget.js"></script>

</body>
</html>

Performance Notes

• Lazy-loaded UI—loads when the script executes on your page
• No dependency on the host framework (React, Angular, etc.)
• Shadow DOM isolation prevents style conflicts with your site CSS
• CDN-cached assets for fast global delivery

Security

• API requests are origin-validated on the backend
• Optional api-origin enforcement for white-label deployments
• Shadow DOM prevents direct DOM pollution from host page scripts

Live Demo

Full landing page with hero, features, live travware-packages-widget, testimonials, and CTA—loaded from https://packages-widget.vercel.app/packages-widget.js.

Troubleshooting

Widget not loading

• Confirm https://packages-widget.vercel.app/packages-widget.js returns HTTP 200 in the Network tab.
• Add the CDN host to your Content-Security-Policy script-src if you use CSP.
• Use the exact tag name travware-packages-widget (lowercase, hyphenated).

Script errors

• Do not load the script twice on the same page (duplicate custom element registration).
• In React/Angular, load the script once in useEffect / ngOnInit, not on every render.
• For TypeScript + React, add the JSX.IntrinsicElements declaration from the Installation section.

CORS issues

• When using api-base-url or api-origin, the API must allow your site origin.
• Verify preflight OPTIONS responses for authenticated endpoints.

Empty widget / no packages

• Check api-base-url points to an environment with published inventory.
• Align search-currency with your catalog (default is USD).
• Inspect XHR/fetch failures (401, 403, 404) in DevTools.

FAQ

Versioning

Current release: v1.0.0

Production bundle:

https://packages-widget.vercel.app/packages-widget.js

Support

For integration help, credentials, and production launch: