easea-app-widget

v1.7.2

Published

12 days ago

Easea App widget allow you to get a booking box into yor website

0High
0Medium
0Low

booking widget online reservations website booking box embed widget React / TypeScript Boat Booking Experience Booking Charter experience

Easea App Widget

Official documentation to integrate the Easea App booking widget into your website and receive bookings directly from your own site.

Important note: this widget is available only to Easea App customers who have been granted access beforehand.

What the widget does

Dynamically injects a host (div#easea-widget-root) into the page, creates a Shadow DOM, and renders the widget UI inside it, isolating styles.
Exposes a global API window.EaseaWidget.init(config) so you can initialize the widget whenever you prefer.

Installation

You can integrate the widget in two ways.

NPM (recommended for build/bundler setups)

npm install easea-app-widget

Then import the bundle in your app (the import registers window.EaseaWidget).

import 'easea-app-widget'

// anywhere after the DOM is ready
window.EaseaWidget?.init({
  key: 'YOUR_WIDGET_KEY',
})

CDN (script tag directly in the page)

<!-- Use any public CDN; example with jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/easea-app-widget/dist/widget/index.umd.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded', function () {
    window.EaseaWidget && window.EaseaWidget.init({
      key: 'YOUR_WIDGET_KEY',
    });
  });
  // Alternatively, load as ES module:
  // <script type="module" src="https://cdn.jsdelivr.net/npm/easea-app-widget/dist/widget/index.es.js"></script>
  // and then call window.EaseaWidget.init(...)
</script>

Minimal quick start (HTML)

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Easea App Widget</title>
    <script src="https://cdn.jsdelivr.net/npm/easea-app-widget/dist/widget/index.umd.js" defer></script>
  </head>
  <body>
    <!-- The widget creates its own host and Shadow DOM -->

    <script>
      window.addEventListener('DOMContentLoaded', function () {
        window.EaseaWidget &&
          window.EaseaWidget.init({
            key: 'YOUR_WIDGET_KEY',
          })
      })
    </script>
  </body>
</html>

API

window.EaseaWidget.init(config)

config parameters:

key (string, required): widget key provided by Easea App.
lang (string, optional): UI language. Examples: it, en. If omitted, the widget will try to detect the host website language; if it’s not yet supported among the available ones, the default language will be used.
targetElementId (string, optional): id of an element present in the DOM to be used as a reference/anchor for parts of the UI (where supported). If not provided, the widget uses the default behavior.

Technical notes:

The created host has id easea-widget-root and is appended to document.body.
Widget styles are isolated via Shadow DOM; no additional CSS imports are required.

Integration best practices

Initialize the widget after the DOM has loaded.
Keep your key safe: since this is a client widget, the key can be exposed; contact Easea App for any usage limits/policies.
If you use optimization/lazy-loading tools, make sure the script is available before calling init.

Troubleshooting

window.EaseaWidget is undefined: ensure the script (NPM or CDN) is loaded before calling init.
No visible content: verify your key and check the browser console for network or console errors.
Style conflicts: the widget uses Shadow DOM and its own stylesheets to minimize conflicts.

Changelog

See the NPM registry for published versions of the easea-app-widget package.

Support

Need help with the integration? Contact the Easea App team.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme