Implement Embedded UI

This page shows how to integrate EmbedUI SDK in your website and access qwestive referral platform right from your Dapp

Embed UI popup

Loading the browser SDK

Copy below code snippet and paste it in the <head> or the top of the <body> tag in your website. 

<script
  type="text/javascript"
  src="https://qwestive-referral-prod.web.app/qwestiveEmbedUICallback.js"
></script>
<script
  id="embedUI"
  async
  defer
  type="text/javascript"
  project-key="YOUR_PROJECT_KEY"
  campaign-id="DEFAULT_CAMPAIGN_ID"
  src="https://qwestive-referral-prod.web.app/embed_ui_sdk.js"
></script>

  1. Please checkout developers section to get started with local development and to know how to grab project-key and campaign-id for above script.

  2. Both of the scripts needs to be embedded for the functionality as expected, if we load embed_ui_sdk.jsasync

Method available on window.EmbedUI

Method
Request Parameters
Description

init

apiKey: string projectId: string

generateReferralLinkCallback?: (data) => void (optional)

// Required parameters

Initialize the SDK with API KEY and projectId

// Optional parameters

generateReferralLinkCallback is a callback function passed with init method to receive data whenever user generates referral link

Initializing the SDK

  • Initializing the SDK authenticates the client and validates client's domain against whitelisted domains added from project settings.

  • apiKey can be found from project settings.

  • Returns the available utility methods:

Note: apiKey here refers to the public api key that needs to be used from the client-side code and please try to avoid using the secret api key from the project settings, which is supposed to be used server-side only.

const QwestiveMethods = EmbedUI.init({
  // Api key provided by Qwestive
    apiKey: “YOUR_API_KEY”,
    // Customers Referral project Id
    projectId: "YOUR_PROJECT_ID",
    generateReferralLinkCallback: (data: {
      eventType: string;
      referralCode: string;
      publicKey: string;
    }) => {
      // console.log('user generated referral link', data);
    },
});
Method
Request Parameters
Description

setAlias

publicKey: string

signup/login referrer/affiliate in EmbedUI with the passed publicKey

logout

-

Log out the user from embedUI

openPopup

-

Opens the EmbedUI popup in the bottom right corner of your Dapp

closePopup

-

Closes the popup

Auto Login the user in EmbedUI

This function should be triggered when the user connects the wallet on your Dapp.

QwestiveMethods.setAlias({
    // publicKey of the user
    publicKey: string,
})

Adding "id" attribute to connect wallet

We need to add id attribute to the button/link to trigger user signup/login flow in case user tries to connect wallet from EmbedUI


<button id="qwestive-user-wallet-connect">Connect wallet</button>

Logout the user in EmbedUI

This function should be triggered when the user disconnect their wallet on your Dapp.

QwestiveMethods.logout()

Open the Popup

This function should be triggered when user wants to checkout referral program within your Dapp.

QwestiveMethods.openPopup()

Close the Popup

This function should be triggered when if you want to close the popup within your Dapp.

QwestiveMethods.closePopup()

If EmbedUI browser SDK is loaded asynchronously and EmbedUI.init method is undefined. Please use method EmbedUI.loadEmbedUI like below.

EmbedUI.loadEmbedUI(() => {
  const QwestiveMethods = EmbedUI.init({
    apiKey: "YOUR_API_KEY",
    projectId: "YOUR_PROJECT_ID",
  })
  QwestiveMethods.setAlias({
    publicKey: "USER_WALLET_PUBLIC_KEY",
  })
})
PreviousServer side TrackingNextReact Example

Last updated