Skip to content

Latest commit

 

History

History
210 lines (170 loc) · 6.9 KB

GENIE_SDK.md

File metadata and controls

210 lines (170 loc) · 6.9 KB
Raw

Genie SDK

Introduction

This documentation outlines the installation process, usage, and configuration options of the Genie SDK.

Pre Requisite - Agent Id

Get the Agent Id from the support team.

Getting Started

Installation

To integrate the Genie SDK into your web application, include the following script tag in the <head> section of your HTML document:

<script src="https://genie-an.s3.ap-south-1.amazonaws.com/genie_sdk/v2.0.0/genieSDK.min.js" defer></script>

Initialization

Initialize the Genie SDK by adding the following JavaScript code, typically after the script tag or within a script file that is loaded after the page content:

document.addEventListener("DOMContentLoaded", function() {
    const genieSDK = new GenieSDK({
        containerId: "your_iframe_container_id_here",
        iframeId: "your_iframe_id_here",
        agentId: "your_agent_id_here",  // Get the agent Id from the support team.
        iframeClassName: "your_iframe_class_name_here",
        landingPageUrl: "your_redirection_url_here"  
    });
    genieSDK.insertIframe();
});

HTML Setup

For example, your complete HTML might look like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- FOR MOBILE RESPONSIVE VIEW -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Genie SDK Integration Example</title>
    <script src="https://genie-an.s3.ap-south-1.amazonaws.com/genie_sdk/v2.0.0/genieSDK.min.js" defer></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const genieSDK = new GenieSDK({
                containerId: "iframe-wrapper",
                iframeId: "genie-iframe",
                agentId: "XX", // Get the agentId from the support team
                iframeClassName: "iframe-fullscreen",
                landingPageUrl: "https://example.com/" // Replace this with your landing page url
            });
            genieSDK.insertIframe();
        });
    </script>

    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
        }
        
        @media screen and (min-width: 1024px) {
            .header {
                padding: 20px 100px;
            }
        }
    
        .home-btn {
            color: #fff;
            background-color: #6161f1;
            font-size: 0.9em;
            padding: 8px 15px;
            border-radius: 3px;
            text-decoration: none;
        }
    
        .main-container {
            height: 100svh;
            width: 100svw;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }
    
        .iframe-container {
            flex-grow: 1;
        }
    
        .iframe-fullscreen {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
</head>
<body>

  <div class="main-container">
    <div class="header">
      <!-- replace img src with your logo -->
      <img src="images/logo.png" width="80px"/>

      <!-- replace href with your landing page url -->
      <a class="home-btn" href="https://example.com">HOME</a>
    </div>

    <div id="iframe-wrapper" class="iframe-container"></div>
  </div>

</body>
</html>

Configuration

GenieSDKOptions

Configure the GenieSDK class using the following options:

Option Type Required/Optional Default Value Description
containerId string Required The ID of the container element where the iframe will be embedded.
iframeId string Optional "genie-id" The ID that will be assigned to the iframe.
agentId string Required Identifier for the agent or service the SDK is interacting with.
iframeClassName string Optional "genie-class" CSS class to assign to the iframe.
landingPageUrl string Optional URL to redirect the user to in case something went wrong.

Methods

insertIframe()

This method creates and inserts an iframe into the specified container on the web page. It generates the iframe's source URL using the configured options and the current page's URL parameters.

Required Query Params in Parent Window

Ensure that the parent window URL includes the following query parameters: name, phone, country_code, and lead_id. These parameters are essential for proper functionality of the Genie SDK.

Use the following example to pass the required parameters inside your Anarock.submitLead function call.

function onLeadSuccessCallback(leadId) {
    const ccode = 'Lead`s CountryCode'; // Example: '91'
    const phone = 'Lead`s PhoneNumber'; // Example: '1234567890'
    const name = 'Lead`s Name'; // Example: 'John Doe'

    const params = new URLSearchParams({
        country_code: ccode,
        phone: phone,
        lead_id: leadId,
        name: name,
    });

    const thankyouPage = 'thank-you.html' // replace with the name of your thankyou page.

    window.location.href = `${window.location.protocol}//${window.location.hostname}/${thankyouPage}?${params.toString()}`;
}

For example, your Anarock.submitLead function call might look like this:

Anarock.submitLead({
    name: name,
    phone: phone, 
    ccode: ccode,
    remarks: remarks, 
    email: email, 
    source: source, 
    subsource: sub_source, 
    campaign_id: 'xxxx',
    channel_name: 'website', 
    api_key: 'xxxx', 
    
    onLeadSuccessCallback: function(leadID) {
        const params = new URLSearchParams({
            country_code: ccode,
            phone: phone,
            lead_id: leadID,
            name: name,
        });

        const thankyouPage = 'thank-you.html';

        window.location.href = `${window.location.protocol}//${window.location.hostname}/${thankyouPage}?${params.toString()}`;
    },
    
    onLeadFailureCallback: function() {
        alert("An error occurred while submitting the lead.");
    },
    
    onInvalidPhone: function() {
        alert("Please enter a valid phone number.");
    },
    
    env: 'production' 
});

Replace Lead's CountryCode, Lead's PhoneNumber, and Lead's Name with actual data relevant to your application. The leadId parameter is provided to the callback function upon a successful lead submission.

Conclusion

The Genie SDK facilitates the integration of a dynamic iframe into web pages, providing various customization and configuration options to meet application needs.