SDK Iframe Project

This SDK simplifies the control of an iframe to request quotes through Qxm - Quienxmi embedded in third-party websites and applications. To implement this module, you need the credentials provided by Qxm and the backend implementation to generate the necessary token to request a quote.

Installation

Installation with NPM

Install the SDK using npm:

npm install @quienxmi/sdk-iframe-project

And invoke the SDK:

import QxmIframeProject from "@quienxmi/sdk-iframe-project";

Or installation with call script

Download the minified JS file from the dist folder in your project:

./dist/qxm-iframe-project.umd.js

Once it's in a public folder of your project, you can include it as follows:

<script src="/js/qxm-iframe-project.umd.js"></script>

Basic Initialization

Place the IFRAME where the quote request will be inserted:

<iframe id="iframeDom" height="500" width="100%"></iframe>

After calling the SDK, initialize the module as shown below. Make sure the DOM is preloaded to get the IFRAME and generate the TOKEN by connecting to your backend.

const iframeProject = new QxmIframeProject("#iframeDom");

api.getTokenProject((token) => {
  iframeProject.setToken(token).then((decodedToken) => {
    console.log("Decoded Token:", decodedToken);
  });
});

Advanced Configuration

Optional Settings

You can customize the behavior of the iframe using optional configurations when initializing the QxmIframeProject:

const iframeProject = new QxmIframeProject("#iframeDom", {
    scrolling: false,  // Disable scrolling within the iframe
    resize: true,      // Enable automatic resizing of the iframe
    logs: true         // Enable logging for debugging purposes
});

Event Subscriptions

Subscribe to various events and errors to handle them within your application:

// Subscribe to iframe errors
iframeProject.subscribeError((error) => {
    console.log('Iframe error:', error);
});

// Subscribe to other iframe events
iframeProject.subscribeEvent((event) => {
    console.log('Iframe event:', event);
});

Configurations

Iframe Configuration

<iframe id="iframeDom" height="500" width="100%"></iframe>

You can use a class to add more properties to your iframe, such as padding or margin. When the module performs automatic resizing, it will take padding into account to avoid scrolling.

Configuration Object

The configuration object for the QxmIframeProject can include the following options:

• scrolling (boolean): Enable or disable scrolling within the iframe.
• resize (boolean): Enable or disable automatic resizing of the iframe.
• logs (boolean): Enable or disable logging for debugging purposes.

Methods

• subscribe(type: SubscriptionTypes, callback: Function): Subscribe to specific events.
• error(callback: Function): Subscribe to error events.
• modals(callback: Function): Subscribe to modal events.
• setToken(token: string): Set the token for authentication. Returns a promise that resolves with the decoded token.
• destroy(): Destroy the instance and clean up resources.

Full Example

Here's an example of a full implementation with optional settings and event subscriptions:

const iframeProject = new QxmIframeProject("#iframeDom", {
    scrolling: false,
    resize: true,
    logs: true
});

iframeProject.subscribeError((error) => {
    console.log("Iframe error:", error);
    alert(error.message);
});

iframeProject.subscribeEvent((event) => {
    console.log("Iframe event:", event);
});

api.getTokenProject((token) => {
  iframeProject.setToken(token).then((decodedToken) => {
    console.log("Decoded token:", decodedToken);
  });
});

This setup ensures you have control over iframe behavior and can handle events and errors efficiently.