Qwestive web3 referral
  • OVERVIEW
    • 👋Introduction
  • Setup referral campaign
    • 💻Quick Start
    • Developers: Getting started
    • Implement Tracking
      • Client side Tracking
        • React example
        • Adding welcome popup card
      • Server side Tracking
    • Implement Embedded UI
      • React Example
      • NextJS Example
    • Admin API
  • 💼Use Case
  • 🚀Launch preparation
  • 🤖Bot and Fraud Detection
Powered by GitBook
On this page
  • Loading the browser SDK
  • Method available on window.EmbedUI
  • Initializing the SDK
  • Auto Login the user in EmbedUI
  • Adding "id" attribute to connect wallet
  • Logout the user in EmbedUI
  • Open the Popup
  • Close the Popup
  1. Setup referral campaign

Implement Embedded UI

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

PreviousServer side TrackingNextReact Example

Last updated 2 years ago

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",
  })
})
Embed UI popup