Clariloop-test-sdk NPM

Clariloop Survey SDK

The Clariloop Survey SDK allows developers to easily embed surveys into their applications. It supports various display modes, including inline, popup, and overlay, providing flexibility for different UI/UX requirements.

Features

Multiple Display Modes: Inline, Popup, and Overlay.
Customizable Positioning for Popup mode.
Seamless Integration with React, Vanilla JavaScript, and Node.js.
Automatic Survey Lifecycle Handling (minimize, restore, close events).
Lightweight & Fast with optimized builds for CommonJS, ESM, and IIFE.

Installation

You can install the package via npm:

npm install clariloop-test-sdk

Or using yarn:

yarn add clariloop-test-sdk

Usage

Basic Initialization

import Clariloop from 'clariloop-test-sdk';

Clariloop.init({
  apiKey: 'your-api-key',
  orderId: '12345',
  customerId: 'user-123',
  email: 'user@example.com',
  displayMode: 'popup', // 'inline' | 'popup' | 'overlay'
  containerId: 'survey-container', // Required for 'inline'
});

Using in HTML (Browser Global)

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.example.com/clariloop.min.js"></script>
  </head>
  <body>
    <div id="survey-container"></div>
    <script>
      Clariloop.init({
        apiKey: 'your-api-key',
        orderId: '12345',
        customerId: 'user-123',
        email: 'user@example.com',
        displayMode: 'inline',
        containerId: 'survey-container',
      });
    </script>
  </body>
</html>

Configuration Options

Property	Type	Required	Description
`apiKey`	`string`	✅	API key to authenticate survey requests.
`orderId`	`string`	✅	The order ID associated with the survey.
`customerId`	`string`	✅	Unique customer identifier.
`email`	`string`	✅	Customer email address.
`displayMode`	`'inline' \\| 'popup' \\| 'overlay'`	✅	Defines how the survey is displayed.
`position`	`'left' \\| 'right'`	❌	Required for `popup` mode to set position.
`containerId`	`string`	✅ for `inline`	The `div` ID where the survey is mounted.

Advanced Features

Handling Events

You can listen for survey events using window.addEventListener('message').

window.addEventListener('message', (event) => {
  if (event.data?.type === 'CLOSE_SURVEY') {
    console.log('User closed the survey');
  }
});

Minimizing & Restoring Surveys

If using popup or overlay, the survey can be minimized and restored.

window.addEventListener('message', (event) => {
  if (event.data?.type === 'MINIMIZE_SURVEY') {
    console.log('Survey minimized');
  }
  if (event.data?.type === 'RESTORE_SURVEY') {
    console.log('Survey restored');
  }
});