@formsort/web-embed-api - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

lib/index.d.ts

@@ -1,1 +0,19 @@
-export declare const Greeter: (name: string) => string;
+import { IIFrameAnalyticsEventData, IIFrameRedirectEventData } from './interfaces';
+declare class FormsortWebEmbed {
+    private rootEl;
+    private iframeEl;
+    private onFlowLoadedCallback?;
+    private onFlowClosedCallback?;
+    private onFlowFinalizedCallback?;
+    constructor(rootEl: HTMLElement);
+    setSize: (width: string, height: string) => void;
+    onFlowLoaded: () => void;
+    onFlowClosed: () => void;
+    onFlowFinalized: () => void;
+    onWindowMessage: (message: MessageEvent) => void;
+    onEventMessage: (eventData: IIFrameAnalyticsEventData) => void;
+    onRedirectMessage: (redirectData: IIFrameRedirectEventData) => void;
+    removeListeners: () => void;
+    loadFlow: (clientLabel: string, flowLabel: string, variantLabel?: string | undefined) => void;
+}
+export default FormsortWebEmbed;

lib/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Greeter = function (name) { return "Hello " + name; };
+var constants_1 = require("@formsort/constants");
+var FLOW_ORIGIN = 'https://flow.formsort.com';
+var FormsortWebEmbed = /** @class */ (function () {
+    function FormsortWebEmbed(rootEl) {
+        var _this = this;
+        this.setSize = function (width, height) {
+            _this.iframeEl.style.width = width;
+            _this.iframeEl.style.height = height;
+        };
+        this.onWindowMessage = function (message) {
+            var origin = message.origin, source = message.source, data = message.data;
+            if (source !== _this.iframeEl.contentWindow) {
+                // If we have multiple formsorts within a page, only listen to events coming
+                // from the iframe that this embed instance controls.
+                return;
+            }
+            if (origin !== FLOW_ORIGIN) {
+                return;
+            }
+            if (!data) {
+                return;
+            }
+            if (data.msgType === constants_1.WebEmbedMessage.EMBED_EVENT_MSG) {
+                _this.onEventMessage(data);
+            }
+            else if (data.msgType === constants_1.WebEmbedMessage.EMBED_REDIRECT_MSG) {
+                _this.onRedirectMessage(data);
+            }
+        };
+        this.onEventMessage = function (eventData) {
+            var eventType = eventData.eventType;
+            if (eventType === constants_1.AnalyticsEventType.FlowLoaded) {
+                if (_this.onFlowLoadedCallback) {
+                    _this.onFlowLoadedCallback();
+                }
+            }
+            else if (eventType === constants_1.AnalyticsEventType.FlowClosed) {
+                _this.removeListeners();
+                _this.rootEl.removeChild(_this.iframeEl);
+                if (_this.onFlowClosedCallback) {
+                    _this.onFlowClosedCallback();
+                }
+            }
+            else if (eventType === constants_1.AnalyticsEventType.FlowFinalized) {
+                if (_this.onFlowFinalizedCallback) {
+                    _this.onFlowFinalizedCallback();
+                }
+            }
+        };
+        this.onRedirectMessage = function (redirectData) {
+            var url = redirectData.payload;
+            window.location.assign(url);
+        };
+        this.removeListeners = function () {
+            window.removeEventListener('message', _this.onWindowMessage);
+        };
+        this.loadFlow = function (clientLabel, flowLabel, variantLabel) {
+            var url = FLOW_ORIGIN + "/client/" + clientLabel + "/flow/" + flowLabel;
+            if (variantLabel) {
+                url += "/variant/" + variantLabel;
+            }
+            _this.iframeEl.src = url;
+        };
+        this.rootEl = rootEl;
+        var iframeEl = document.createElement('iframe');
+        iframeEl.style.border = 'none';
+        this.iframeEl = iframeEl;
+        rootEl.appendChild(iframeEl);
+        window.addEventListener('message', this.onWindowMessage);
+    }
+    Object.defineProperty(FormsortWebEmbed.prototype, "onFlowLoaded", {
+        set: function (callback) {
+            this.onFlowLoadedCallback = callback;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FormsortWebEmbed.prototype, "onFlowClosed", {
+        set: function (callback) {
+            this.onFlowClosedCallback = callback;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(FormsortWebEmbed.prototype, "onFlowFinalized", {
+        set: function (callback) {
+            this.onFlowFinalizedCallback = callback;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    return FormsortWebEmbed;
+}());
+exports.default = FormsortWebEmbed;

package.json

 {
   "name": "@formsort/web-embed-api",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Embed Formsort flows within other webpages",
@@ -42,3 +42,6 @@ "main": "lib/index.js",
     "typescript": "^3.5.3"
+  },
+  "dependencies": {
+    "@formsort/constants": "0.0.9"
   }
 }

README.md

 # @formsort/web-embed-api
 
-Embed Formsort flows within other webpages
+Embed Formsort flows within other webpages, with communication between the embed and the parent page.
+
+## Usage
+
+First, install
+
+```
+npm install @formsort/web-embed-api
+```
+
+Then, initialize the embed and load a flow.
+
+## Documentation
+
+### FormsortWebEmbed(rootEl: HTMLElement)
+
+Initializes a Formsort iframe as a child of the `rootEl` provided.
+
+### `loadFlow(clientLabel: string, flowLabel: string, variantLabel?: string) => void`
+
+Starts loading a Formsort variant, or a flow.
+
+Note that variantLabel is optional: if it is not provided, a variant will be chosen at random from that flow.
+
+### `setSize(width: number, height: number) => void`
+
+Set the CSS size of the embed.
+
+You may also style the embed's iframe using CSS - it is the iframe child of the `rootEl`, so you'd use the selector `#rootEl > iframe`.
+
+### `onFlowLoaded: () => void`
+
+Set a callback function to be called when the Formsort flow has loaded completely.
+
+Note that this is more accurate than listening for the iframe's `load` event, as this is sent from within the Formsort application code.
+
+You can use this to do things like hide the frame container, or display a loading indicator, until everything is loaded to ensure a seamless initial experience.
+
+```
+const embed = new FormsortWebEmbed(document.body);
+embed.onFlowLoaded = () => {
+  console.log('Flow has loaded!');
+};
+embed.loadFlow('formsort', 'onboarding', 'main');
+```
+
+### `onFlowFinalized: () => void`
+
+Set a callback to be called when the flow is compete, meaning the user has finished all of the steps available to them.
+
+Useful for performing an action after the flow is complete, such as displaying a congratulations or starting a payment process.
+
+### `onFlowClosed: () => void`
+
+Set a callback to be called when the user abandons the flow before finalizing it.
+
+Note that this is only possible if your style set defines a close button.

Fixed alerts

Trivial Package

Supply chain risk

Packages less than 10 lines of code are easily copied into your own project and may not warrant the additional supply chain risk of an external dependency.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

9161

increased by271.79%

Number of package files

7

increased by40%

Lines of code

127

increased by3075%

Number of lines in readme file

60

increased by1400%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

1

increased byInfinity%

Dependency changes

• + Added@formsort/constants@0.0.9

• + Added@formsort/constants@0.0.9(transitive)