{"_id":"@aot-technologies/formsflow-web-embed","_rev":"2-0248e4dec8047fa2472166426802ee09","name":"@aot-technologies/formsflow-web-embed","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@aot-technologies/formsflow-web-embed","version":"1.1.0","keywords":["webcomponent","react","forms","formsflow","formio"],"author":"","license":"MIT","_id":"@aot-technologies/formsflow-web-embed@1.1.0","maintainers":[{"name":"aot-technologies-devs","email":"support@aot-technologies.com"},{"name":"ann-aot","email":"ann.jacob@aot-technologies.com"},{"name":"ratheesh-aot","email":"ratheesh.kumar@aot-technologies.com"},{"name":"arun-s-aot","email":"arun.s@aot-technologies.com"},{"name":"abhilash-kr","email":"ABHILASH.KR@AOT-TECHNOLOGIES.COM"}],"homepage":"https://aot-technologies.github.io/forms-flow-ai-web-components/","bugs":{"url":"https://github.com/aot-technologies/forms-flow-ai-web-components/issues"},"dist":{"shasum":"f380fd65013f5a4bdd76e2720590d4a53f4f6a64","tarball":"https://registry.npmjs.org/@aot-technologies/formsflow-web-embed/-/formsflow-web-embed-1.1.0.tgz","fileCount":3,"integrity":"sha512-IyZ9qrcZ/jttxEEZwNiZ/QRut4op2r2Bix1msXFuFN8NCfB/LaS46Nkaym3C+EY3ClyjZvQ0T8+X85K7TOmU8w==","signatures":[{"sig":"MEUCIHO9auOXBpWrO3x3CLiPggzbuceAaKQeA2r2JCveXSo4AiEAuEXV3H/AJKlb7mkdGG7Z0UZSXWspDS3dfvPxBRA2DIg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":4479274},"main":"dist/forms-flow-webcomponent.js","gitHead":"7511e77259dffcc14c9552e0d541fff60eb59360","scripts":{"test":"react-scripts test","build":"npm run build:react && npm run build:bundle && npm run copy:license","eject":"react-scripts eject","start":"react-scripts start","build:react":"react-scripts build","build:bundle":"webpack --config webpack.config.js","copy:license":"cp LICENSE dist/ 2>/dev/null || echo 'LICENSE file not found'","prepublishOnly":"npm run build"},"_npmUser":{"name":"arun-s-aot","email":"arun.s@aot-technologies.com"},"repository":{"url":"","type":"git"},"_npmVersion":"8.19.4","description":"Forms Flow AI Web Component - A React-based web component for form rendering and management","directories":{},"_nodeVersion":"16.20.2","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"react-to-webcomponent":"^2.0.1","@aot-technologies/formio-react":"^1.0.5","formsflow-formio-custom-elements":"^1.0.3"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"glob":"^8.0.3","axios":"^0.27.2","react":"^18.1.0","webpack":"^5.73.0","react-dom":"^18.1.0","css-loader":"^6.7.1","web-vitals":"^2.1.4","@babel/core":"^7.18.6","keycloak-js":"^26.1.2","webpack-cli":"^4.10.0","babel-loader":"^8.2.5","style-loader":"^3.3.1","react-scripts":"5.0.1","@babel/preset-env":"^7.18.6","webpack-dev-server":"^4.9.3","@babel/preset-react":"^7.18.6","html-webpack-plugin":"^5.5.0","terser-webpack-plugin":"^5.3.9","@testing-library/react":"^13.3.0","@testing-library/jest-dom":"^5.16.4","@testing-library/user-event":"^13.5.0","@babel/plugin-proposal-class-properties":"^7.18.6"},"peerDependencies":{"axios":"^0.27.2","react":"^18.1.0","react-dom":"^18.1.0","keycloak-js":"^26.1.2"},"_npmOperationalInternal":{"tmp":"tmp/formsflow-web-embed_1.1.0_1756460314286_0.4130920551522024","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2025-08-29T09:38:34.185Z","modified":"2026-07-07T04:33:05.945Z","1.1.0":"2025-08-29T09:38:34.514Z"},"bugs":{"url":"https://github.com/aot-technologies/forms-flow-ai-web-components/issues"},"license":"MIT","homepage":"https://aot-technologies.github.io/forms-flow-ai-web-components/","keywords":["webcomponent","react","forms","formsflow","formio"],"repository":{"url":"","type":"git"},"description":"Forms Flow AI Web Component - A React-based web component for form rendering and management","maintainers":[{"email":"support@aot-technologies.com","name":"aot-technologies-devs"},{"email":"ann.jacob@aot-technologies.com","name":"ann-aot"},{"email":"ratheesh.kumar@aot-technologies.com","name":"ratheesh-aot"},{"email":"arun.s@aot-technologies.com","name":"arun-s-aot"},{"email":"ABHILASH.KR@AOT-TECHNOLOGIES.COM","name":"abhilash-kr"},{"email":"alex.antony@aot-technologies.com","name":"josephalexantonyaot"}],"readme":"# Forms Flow AI Web Components\n\n> **Hybrid Form Embedding** - Seamlessly embed both authenticated and anonymous forms in your application.\n\n## 📋 Table of Contents\n\n- [Overview](#overview)\n- [Installation](#installation)\n- [Required CSS Dependencies](#required-css-dependencies)\n- [Usage Scenarios](#usage-scenarios)\n  - [1. Anonymous Forms](#1-anonymous-forms)\n  - [2. Authenticated Forms (Internal)](#2-authenticated-forms-internal)\n  - [3. Authenticated Forms (External)](#3-authenticated-forms-external)\n- [Custom Components](#custom-components)\n- [API Reference](#api-reference)\n- [Additional Resources](#additional-resources)\n\n## 🎯 Overview\n\nForms Flow AI Web Components provides a powerful hybrid form embedding solution that allows you to integrate both authenticated and anonymous forms seamlessly into your application. Users can submit forms directly from your application without being redirected to external pages.\n\nThe main component `<formsflow-webembed></formsflow-webembed>` is a flexible web component that adapts to different authentication scenarios and can be easily integrated into any frontend framework.\n\n## 📦 Installation\n\nYou can integrate the web component using either CDN or NPM:\n\n### CDN Installation\n```html\n<script src=\"https://dm3cs41qneo90.cloudfront.net/forms-flow-webcomponent.js\"></script>\n```\n\n### NPM Installation\n```bash\nnpm i formsflow-webembed\n```\n\n```javascript\n// Import in your component\nimport 'formsflow-webembed'\n```\n\n## 🎨 Required CSS Dependencies\n\nInclude these stylesheets for proper component styling:\n\n### Bootstrap CSS\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css\">\n```\n> **Note:** Skip this if your application already uses Bootstrap.\n\n### Form.io CSS (Required)\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/formiojs@4.13.1/dist/formio.full.min.css\">\n```\n\n## 🚀 Usage Scenarios\n\nThe component supports three main scenarios based on your authentication requirements:\n\n---\n\n## 1. Anonymous Forms\n\nUse this scenario when you want to embed forms that don't require user authentication.\n\n### Implementation\n\n```html\n<formsflow-webembed\n    configFile\n    anonymousUrl=\"https://sample.com/form/formio/test-form\"\n    message=\"Thank you for your response\"\n>\n</formsflow-webembed>\n```\n\n### Configuration\n\nThe component accepts three parameters:\n\n#### 1. configFile (Object)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `authenticationType` | String | Authentication type | `\"anonymous\"` |\n| `formioUrl` | String | Form.io URL (must end with `/form`) | `\"https://sample.com/formio/form\"` |\n| `webApiUrl` | String | API URL | `\"https://sample.com/api\"` |\n\n#### 2. anonymousUrl (String)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `anonymousUrl` | String | The anonymous form URL from Form.io | `\"https://sample.com/formio/formname\"` |\n\n#### 3. message (String)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `message` | String | Success message after form submission | `\"Thank you for your response\"` |\n\n### JavaScript Configuration\n\n```javascript\nconst configFile = {\n    authenticationType: \"anonymous\",\n    formioUrl: 'https://sample.com/formio/form',\n    webApiUrl: 'https://sample.com/api'\n}\n\ndocument.querySelector('formsflow-webembed')\n    .setAttribute('configFile', JSON.stringify(configFile));\n```\n\n---\n\n## 2. Authenticated Forms (Internal)\n\nUse this scenario when your parent application uses Keycloak for authentication.\n\n### Implementation\n\n```html\n<formsflow-webembed\n    configFile\n    formName=\"test-form\"\n    message=\"Thank you for your response\"\n>\n</formsflow-webembed>\n```\n\n### Configuration\n\n#### 1. configFile (Object)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `keycloakUrl` | String | Keycloak server URL | `\"https://sample.com/auth\"` |\n| `realm` | String | Keycloak realm name | `\"sample\"` |\n| `clientId` | String | Keycloak client ID | `\"tenant-clientId\"` |\n| `authenticationType` | String | Authentication type | `\"internal\"` |\n| `webApiUrl` | String | API URL | `\"https://sample.com/api\"` |\n\n#### 2. formName (String)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `formName` | String | Form pathname | `\"testform\"` |\n\n> **Note:** For multitenancy, use format: `\"tenantkey-pathname\"`\n\n#### 3. message (String)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `message` | String | Success message after form submission | `\"Thank you for your response\"` |\n\n### JavaScript Configuration\n\n```javascript\nconst configFile = {\n    keycloakUrl: 'https://sample.com/auth',\n    realm: 'test',\n    clientId: 'testId',\n    authenticationType: 'internal',\n    webApiUrl: 'https://sample.com/api'\n};\n\ndocument.querySelector('formsflow-webembed')\n    .setAttribute('configFile', JSON.stringify(configFile));\n```\n\n---\n\n## 3. Authenticated Forms (External)\n\nUse this scenario when your parent application does NOT use Keycloak for authentication.\n\n### Implementation\n\n```html\n<formsflow-webembed\n    configFile\n    formName=\"test-form\"\n    token=\"your-jwt-token-here\"\n    message=\"Thank you for your response\"\n>\n</formsflow-webembed>\n```\n\n### Configuration\n\n#### 1. configFile (Object)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `authenticationType` | String | Authentication type | `\"external\"` |\n| `webApiUrl` | String | API URL | `\"https://sample.com/api\"` |\n\n#### 2. formName (String)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `formName` | String | Form pathname | `\"testform\"` |\n\n> **Note:** For multitenancy, use format: `\"tenantkey-pathname\"`\n\n#### 3. token (String)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `token` | String | JWT token created using Forms Flow shared secret | `\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...\"` |\n\n#### Token Payload Requirements\n\n**Standard Case:**\n```json\n{\n    \"preferred_username\": \"sample\",\n    \"email\": \"sample@gmail.com\"\n}\n```\n\n**Multitenancy Case:**\n```json\n{\n    \"preferred_username\": \"sample\",\n    \"email\": \"sample@gmail.com\",\n    \"tenantKey\": \"tenant1\"\n}\n```\n\n#### 4. message (String)\n\n| Property | Type | Description | Example |\n|----------|------|-------------|---------|\n| `message` | String | Success message after form submission | `\"Thank you for your response\"` |\n\n### JavaScript Configuration\n\n```javascript\nconst configFile = {\n    authenticationType: 'external',\n    webApiUrl: 'https://sample.com/api'\n};\n\ndocument.querySelector('formsflow-webembed')\n    .setAttribute('configFile', JSON.stringify(configFile));\n```\n\n---\n\n## 🔧 Custom Components\n\nTo add custom components to your form embedding solution:\n\n### Step 1: Clone the Repository\n\n```bash\ngit clone https://github.com/AOT-Technologies/forms-flow-ai-web-components.git\ncd forms-flow-ai-web-components\n```\n\n### Step 2: Install Dependencies\n\n```bash\nnpm install\n```\n\n> **Optional:** Remove default Forms Flow custom components if not needed:\n> ```bash\n> npm uninstall formsflow-formio-custom-elements\n> ```\n\n### Step 3: Install Your Custom Component Package\n\n```bash\nnpm install your-custom-component-package\n```\n\n### Step 4: Import Custom Component\n\n```javascript\nimport yourCustomComponent from 'your-custom-component-package';\n```\n\n### Step 5: Register with Form.io\n\n```javascript\nimport { Formio } from 'formiojs';\n\nFormio.use(yourCustomComponent);\n```\n\n### Step 6: Build and Deploy\n\n```bash\n# Create production build\nnpm run build\n\n# The build files will be in the /build directory\n# Host these files as a CDN for form embedding\n```\n\n---\n\n## 📚 API Reference\n\n### Component Properties\n\n| Property | Required | Type | Scenarios | Description |\n|----------|----------|------|-----------|-------------|\n| `configFile` | ✅ | Object | All | Configuration object (as JSON string) |\n| `anonymousUrl` | ✅ | String | Anonymous only | Form.io anonymous form URL |\n| `formName` | ✅ | String | Internal, External | Form pathname |\n| `token` | ✅ | String | External only | JWT authentication token |\n| `message` | ✅ | String | All | Success message after submission |\n\n### Authentication Types\n\n| Type | Description | Use Case |\n|------|-------------|----------|\n| `anonymous` | No authentication required | Public forms |\n| `internal` | Keycloak authentication | Applications using Keycloak |\n| `external` | Custom JWT authentication | Applications with custom auth |\n\n---\n\n## 🔗 Additional Resources\n\n- **GitHub Repository:** [forms-flow-ai-web-components](https://github.com/AOT-Technologies/forms-flow-ai-web-components)\n- **CDN Distribution:** https://dm3cs41qneo90.cloudfront.net/\n- **Form.io Documentation:** [formio.github.io](https://formio.github.io/)\n\n---\n\n## 📝 Notes\n\n- Ensure all URLs are properly configured for your environment\n- Convert configuration objects to JSON strings when setting attributes\n- For multitenancy support, include tenant keys in form names and tokens\n- Test authentication flows in development before deploying to production\n\n---\n\n**Need help?** Check out our [GitHub repository](https://github.com/AOT-Technologies/forms-flow-ai-web-components) for more examples and community support.","readmeFilename":"README.md"}