SimplifiedIQ Embed SDK

Mount SimplifiedIQ assessments, admin dashboards, and student portals into any website.

Install

npm install simplifiediq-embed

Quick Start

import { mountSimplifiedIQ, EmbedType } from 'simplifiediq-embed';

// Mount into a container element
await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.EXTERNAL_ASSESSMENT,
  assessmentId: 'YOUR_ASSESSMENT_ID'
});

Embed Types

| Enum Value | String Value | Required Fields | |---|---|---| | EmbedType.EXTERNAL_ASSESSMENT | 'external_assessment' | assessmentId | | EmbedType.ADMIN_LOGIN_WITH_AUTH | 'admin_login_with_auth' | authCode | | EmbedType.ADMIN_LOGIN | 'admin_login' | — | | EmbedType.STUDENT_LOGIN_WITH_AUTH | 'student_login_with_auth' | authCode | | EmbedType.STUDENT_LOGIN | 'student_login' | — | | EmbedType.STUDENT_AUTH_ASSESSMENT | 'student_auth_assessment' | authCode, assessmentId | | EmbedType.STUDENT_ASSESSMENT | 'student_assessment' | assessmentId |

Usage Examples

External Assessment (no login)

import { mountSimplifiedIQ, EmbedType } from 'simplifiediq-embed';

await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.EXTERNAL_ASSESSMENT,
  assessmentId: '64f1a2b3c4d5e6f7a8b9c0d1'
});

Admin SSO Login

await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.ADMIN_LOGIN_WITH_AUTH,
  authCode: 'your-sso-auth-code'
});

Admin Manual Login

await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.ADMIN_LOGIN
});

Student SSO Login

await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.STUDENT_LOGIN_WITH_AUTH,
  authCode: 'your-sso-auth-code'
});

Student Manual Login

await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.STUDENT_LOGIN
});

Student SSO + Direct Assessment

await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.STUDENT_AUTH_ASSESSMENT,
  authCode: 'your-sso-auth-code',
  assessmentId: '64f1a2b3c4d5e6f7a8b9c0d1'
});

Student Manual Login + Direct Assessment

await mountSimplifiedIQ('siq-app', {
  embedType: EmbedType.STUDENT_ASSESSMENT,
  assessmentId: '64f1a2b3c4d5e6f7a8b9c0d1'
});

Framework Examples

React

import { useEffect } from 'react';
import { mountSimplifiedIQ, unmountSimplifiedIQ, EmbedType } from 'simplifiediq-embed';

function AssessmentPage({ assessmentId }) {
  useEffect(() => {
    mountSimplifiedIQ('siq-app', {
      embedType: EmbedType.EXTERNAL_ASSESSMENT,
      assessmentId
    });

    return () => unmountSimplifiedIQ();
  }, [assessmentId]);

  return <div id="siq-app" style={{ width: '100%', height: '800px' }} />;
}

Vue 3

<template>
  <div id="siq-app" style="width: 100%; height: 800px"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { mountSimplifiedIQ, unmountSimplifiedIQ, EmbedType } from 'simplifiediq-embed';

const props = defineProps({
  assessmentId: { type: String, required: true }
});

onMounted(() => {
  mountSimplifiedIQ('siq-app', {
    embedType: EmbedType.EXTERNAL_ASSESSMENT,
    assessmentId: props.assessmentId
  });
});

onBeforeUnmount(() => unmountSimplifiedIQ());
</script>

Angular

import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { mountSimplifiedIQ, unmountSimplifiedIQ, EmbedType } from 'simplifiediq-embed';

@Component({
  selector: 'app-assessment',
  template: `<div id="siq-app" style="width: 100%; height: 800px"></div>`
})
export class AssessmentComponent implements OnInit, OnDestroy {
  @Input() assessmentId!: string;

  ngOnInit() {
    mountSimplifiedIQ('siq-app', {
      embedType: EmbedType.EXTERNAL_ASSESSMENT,
      assessmentId: this.assessmentId
    });
  }

  ngOnDestroy() {
    unmountSimplifiedIQ();
  }
}

API Reference

mountSimplifiedIQ(elementId, options)

Loads the embed script (if needed) and mounts SimplifiedIQ into the container.

| Parameter | Type | Description | |---|---|---| | elementId | string | ID of the container DOM element | | options.embedType | EmbedType \| string | Which embed flow to use | | options.authCode | string? | SSO auth code | | options.assessmentId | string? | Assessment ID |

Returns Promise<void>.

unmountSimplifiedIQ()

Tears down the app and releases media streams (camera, mic, screen share).

loadSimplifiedIQ()

Pre-loads the CDN script without mounting. Useful for warming up.

Returns Promise<void>.

CDN Alternative

If you don't need npm, use the <script> tag directly:

<div id="siq-app" style="width: 100%; height: 800px;"></div>
<script src="https://embed.simplifiediq.io/main.js"></script>
<script>
  window.mountSimplifiedIQ('siq-app', {
    embedType: 'external_assessment',
    assessmentId: 'YOUR_ASSESSMENT_ID'
  });
</script>

Optional: browser crash reports

When a proctored assessment is running, the embed reports its own health and any unclean session end to SimplifiedIQ automatically. Nothing is required from you.

Browsers can additionally send their own crash report (for example "out of memory") after a tab dies, but only if the page hosting the embed names an endpoint in its Reporting-Endpoints response header. Since that page is yours, this part is opt-in. Add the header to the HTTP responses of every page that mounts the embed:

Reporting-Endpoints: default="https://api.simplifiediq.io/api/v1/internal/assessment/members/public/browser-crash-report"

Notes:

• The report is sent by the browser itself, without cookies or credentials, and contains only the crash reason, the page URL, and the user agent.
• Supported in Chromium-based browsers (Chrome, Edge). Others ignore the header.
• If your page already sets Reporting-Endpoints for your own reporting, keep your entries and add the default one above; default is the group crash reports use.

License

MIT