Assessment SDK (WLD)

A powerful, whitelabeled SDK for embedding DISC assessments into any web application.

� Installation

You can integrate the Assessment SDK in two primary ways: via NPM (for modern build pipelines) or via CDN (for direct browser usage).

Method 1: NPM Installation

Recommended for React, Vue, Angular, or any project using a bundler (Webpack, Vite, Rollup).

npm install assessment-sdk-wld
# or
yarn add assessment-sdk-wld

Method 2: CDN Link

Ideal for simple HTML pages or legacy projects without a build step.

<script src="https://unpkg.com/assessment-sdk-wld/dist/sdk/assessment-sdk.umd.cjs"></script>

� Quick Start (Methods of Integration)

The SDK provides multiple ways to initialize and interact with the assessments.

A. Integration via NPM (ES Modules)

Best for modern JavaScript/TypeScript applications.

import AssessmentSDK from 'assessment-sdk-wld';

const sdk = AssessmentSDK.init({
  apiKey: 'YOUR_API_KEY'
});

B. Integration via NPM (CommonJS)

For older Node.js environments or build setups using require.

const AssessmentSDK = require('assessment-sdk-wld');

const sdk = AssessmentSDK.init({
  apiKey: 'YOUR_API_KEY'
});

C. Integration via CDN (Global Object)

The SDK is automatically attached to the window object.

// Access via window.AssessmentSDK
const sdk = window.AssessmentSDK.init({
  apiKey: 'YOUR_API_KEY'
});

🖥️ Display Modes

Once initialized, you can choose how the assessment appears to the user.

1. Iframe Mode (Embedded)

Embed the assessment directly into your page layout within a specified container.

sdk.show({
  containerId: 'my-assessment-div', // The ID of your <div>
  name: 'John Doe',
  email: '[email protected]',
  userInternalId: 'unique_user_id',
  onComplete: () => console.log('Assessment Finished!')
});

2. Popup Mode (Separate Window)

Open the assessment in a new browser window. This is useful if you want to keep your main application state intact.

sdk.open({
  name: 'John Doe',
  email: '[email protected]',
  userInternalId: 'unique_user_id',
  width: 900,
  height: 700
});

⚙️ API Reference

AssessmentSDK.init(config)

| Param | Type | Required | Description | | :--- | :--- | :--- | :--- | | apiKey | string | Yes | Your SDK API key. |

sdk.show(options) / sdk.open(options)

| Param | Type | Required | Description | | :--- | :--- | :--- | :--- | | name | string | Yes* | User's display name. | | email | string | Yes* | User's email address. | | userInternalId | string | Yes* | Your internal user ID (for tracking). | | url | string | No | Bypass API and load a specific assessment URL. | | containerId | string | Yes (show)| The target element ID for the iframe. | | width | string\|num| No | Width (default: 100% / 900px). | | height | string\|num| No | Height (default: 600px / 700px). | | onComplete | function | No | Returns a completion message string. | | onClose | function | No | Returns a window closure message string. | | onSaveAnswer| function | No | Returns full question & answer details. | | onStart | function | No | Triggered when the user clicks 'Start'. Returns a message. | | onProgress | function | No | Triggered after every answer. Returns progress object. | | onExit | function | No | Triggered when user logs out/exits. Returns a message. | | onError | function | No | Triggered on failures (Auth, API, etc). Returns error object. |

* Required if no url is provided.

🏗️ Event Payloads

onSaveAnswer

{
  question: { questionId: string; questionText: string; },
  answer: { optionId: string; optionText: string; }
}

onProgress

{
  current: number;    // Number of questions answered
  total: number;      // Total questions in assessment
  percentage: number; // Percentage complete (0-100)
}

onError

{
  code: string;    // UNAUTHORIZED, QUESTION_LOAD_FAILED, etc.
  message: string; // Human readable error message
  details?: any;   // Extra debugging info if available
}

⚛️ React Integration Example

import React, { useEffect, useRef } from 'react';
import AssessmentSDK from 'assessment-sdk-wld';

export const DiscAssessment = () => {
  const isInitialized = useRef(false);

  useEffect(() => {
    if (!isInitialized.current) {
      const sdk = AssessmentSDK.init({ apiKey: 'PROD_KEY_123' });
      
      sdk.show({
        containerId: 'disc-container',
        name: 'Alex Rivera',
        email: '[email protected]',
        userInternalId: 'emp_99',
        onStart: (msg) => console.log("Started:", msg),
        onProgress: (p) => console.log(`Progress: ${p.percentage}%`),
        onError: (err) => {
          console.error(`Error [${err.code}]: ${err.message}`);
        },
        onSaveAnswer: (data) => {
          console.log(`Saved answer for ${data.question.questionText}`);
        },
        onComplete: (msg) => alert(msg),
        onExit: (msg) => console.log("User Exited:", msg)
      });

      isInitialized.current = true;
    }
  }, []);

  return (
    <div style={{ padding: '20px' }}>
      <h2>Complete Your Profile</h2>
      <div id="disc-container" style={{ border: '1px solid #ddd' }} />
    </div>
  );
};

🛠️ Methods

• sdk.show(options): Embeds an iframe.
• sdk.open(options): Opens a popup.
• sdk.destroy(): Removes iframe and cleans up all event listeners.
• sdk.getAssessmentUrl(options): Returns the assessment URL string (Promise).

📄 License

ISC © psingh