Skip to main content

Setup

Download the SDK

Integration:

The questionnaire web sdk can be integrated as a React component or using javascript methods exposed.

Integrating as React component​

Obtain the ConsumerWebSDK object.

# using package manager
import { ConsumerWebSDK } from 'questionnaire-web-sdk'
# using CDN build
const ConsumerWebSDK = window.ConsumerWebSDK;

The components can be integrated as below.

<ConsumerWebSDK onExit={onExit} initData={data} apiKey={"your api key here"} />

Props​

initData: ConsumerWebSDKData

This data is used to initialize the questionnaire web sdk. More details are available below.

onExit: () => void

This callback is called when there are no more questions. This can be used to do the cleanup. The component can be safely unmounted without loss of data.

apiKey: string Obtain the API key required to connect with Askribe servers from the Settings section in your Askribe dashboard.

Integrating using javascript functions​

Obtain the functions to load and unload functions as below.

# using package manager
import { loadQuestionnaireWebSDK, unloadQuestionnaireWebSDK } from 'questionnaire-web-sdk'
# using CDN build
const loadQuestionnaireWebSDK = window.loadQuestionnaireWebSDK;
const unloadQuestionnaireWebSDK = window.unloadQuestionnaireWebSDK;

loadQuestionnaireWebSDK​

loadQuestionnaireWebSDK: (
  container: HTMLElement,
  initData: ConsumerWebSDKData,
  onExit: () => void,
  apiKey: string
) => void

parameters​

used to load questionnaire into container provided

  • container: the HTML element into which the questionnaire should be loaded.
  • initData: This data is used to initialize the questionnaire web sdk. More details are available below.
  • onExit: This callback is called when there are no more questions. This can be used to do the cleanup. The questionnaire can be safely unloaded without loss of data.
  • apiKey: Obtain the API key required to connect with Askribe servers from the Settings section in your Askribe questionnaire dashboard.

unloadQuestionnaireWebSDK​

unloadQuestionnaireWebSDK: (container: HTMLElement) => void

parameters​

used to unload questionnaire from container provided

  • container: the HTML element from which the questionnaire should be unloaded. This should be the same as the one passed to loadQuestionnaireWebSDK.

Init Data

The init data has the following properties

interface ConsumerWebSDKData {
  configId: string;
  context?: Record<string, VariableData>;
  receiversEmailAddress?: string;
  receiversPhoneNumber?: string;
  slackUserId?: string;
  webPushConfig?: ContactWebPushConfig;
  androidPushConfig?: ContactAndroidPushConfig;
  iOSPushConfig?: ContactIOSPushConfig;
  language?: string;
}

interface ContactAndroidPushConfig {
  fcmId?: string;
}

interface ContactIOSPushConfig {
  apnsId?: string;
}

interface ContactWebPushConfig {
  urlEndpoint?: string;
  key?: string;
  auth?: string;
}

// the below section needs to be refined.

  • configId: string; - Required.
  • context?: Record<string, VariableData>; - [Optional] Map of vraibales and values used in the questionnaire.
  • receiversEmailAddress: string; - Required if distributionType is AUTO_EMAIL
  • receiversPhoneNumber: string; - Required if distributionType is one of AUTO_SMS | AUTO_WHATSAPP | AUTO_VOICE
  • slackUserId: string; - Required if distributionType is AUTO_SLACK
  • webPushConfig: ContactWebPushConfig; - Required if distributionType is AUTO_PUSH_NOTIFICATION
  • androidPushConfig: ContactAndroidPushConfig; - Required if distributionType is AUTO_ANDROID_PUSH_NOTIFICATION
  • iOSPushConfig: ContactIOSPushConfig;- Required if distributionType is AUTO_IOS_PUSH_NOTIFICATION

Note:​

Either questionnaireId or non-empty questionnaire tags list has to be passed. If either is not passed, the component will throw an error.

Integrating Push Notifications​

To enable web push notifications in your website:

  • Download the service worker - Download the service worker file from the link and place it in your public folder
  • Register for push notifications - Register the service worker and subscribe to push notifications by calling registerForPushNotification(workspaceId)
  • Enrich the contact, optionally - You can enrich the contact created in the above step by calling enrichContact(askribeKey, contactEnrichmentDTO)

ContactEnrichmentDTO has the following properties:

  • email?: string - Email Id of the user
  • phone?: string - Phone Number of the user
  • app?: string - Name of your app
  • appUserId?: string - Id of the user in your app
  • customFieldValues: Record<string, string> - Values for predefined custom fields
  • cdpId?: string - ID of the cdp where you want to enrich the contact. This field is mandatory