easea-app-widget 1.0.7 → 1.1.0

package/README.md

@@ -1,69 +1,124 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-
-      // Remove tseslint.configs.recommended and replace with this
-      ...tseslint.configs.recommendedTypeChecked,
-      // Alternatively, use this for stricter rules
-      ...tseslint.configs.strictTypeChecked,
-      // Optionally, add this for stylistic rules
-      ...tseslint.configs.stylisticTypeChecked,
-
-      // Other configs...
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+## Easea App Widget
+
+Official documentation to integrate the Easea App booking widget into your website.
+
+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.
+
+1. NPM (recommended for build/bundler setups)
+
+```bash
+npm install easea-app-widget
 ```
 
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      // Other configs...
-      // Enable lint rules for React
-      reactX.configs['recommended-typescript'],
-      // Enable lint rules for React DOM
-      reactDom.configs.recommended,
-    ],
-    languageOptions: {
-      parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
-        tsconfigRootDir: import.meta.dirname,
-      },
-      // other options...
-    },
-  },
-])
+Then import the bundle in your app (the import registers `window.EaseaWidget`).
+
+```ts
+import 'easea-app-widget'
+
+// anywhere after the DOM is ready
+window.EaseaWidget?.init({
+  key: 'YOUR_WIDGET_KEY',
+})
+```
+
+2. CDN (script tag directly in the page)
+
+```html
+<!-- Use any public CDN; example with jsDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/easea-app-widget/dist/widget.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.es.js"></script>
+  // and then call window.EaseaWidget.init(...)
+</script>
+```
+
+---
+
+### Minimal quick start (HTML)
+
+```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.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',
+            lang: 'en',
+          })
+      })
+    </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 use the default language.
+- `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.