Text Input Monitor SDK

Installation

Include via CDN (jsDelivr):

<script src="https://cdn.jsdelivr.net/npm/@notai/input/dist/notai.min.js"></script>

Or install via a package manager:

npm install @notai/input

yarn add @notai/input

Quick Start

Get up and running in just a few lines of code:

import { NotAI } from '@notai/input';

// Initialize with your account ID
const notai = new NotAI('your-account-id');

// Start monitoring a text field
notai.monitor('#essay-textarea');

// Flush captured data when the form is submitted
document.querySelector('form').addEventListener('submit', async (e) => {
  await notai.flush();              // send any remaining data
  const sid = notai.getSessionId(); // use to look up results via API
  console.log('Session:', sid);
});

Configuration

Customize the SDK behavior with configuration options:

const notai = new NotAI('your-account-id', {
  // Data region — must match your account region (set at signup)
  region: 'eu',
  
  // Minimum text length to analyze (default: 50)
  minLength: 50,
  
  // Debounce interval in ms (default: 100)
  debounce: 100,
  
  // Custom session identifier
  sessionId: 'user-session-123',
  
  // Custom telemetry endpoint (Pro & Enterprise only)
  endpoint: 'https://telemetry.example.com'
});

Configuration Options

Methods

monitor(selector)

Start monitoring a text input element.

notai.monitor('#my-textarea');
notai.monitor(document.getElementById('my-textarea'));

unmonitor(selector)

Stop monitoring an element.

notai.unmonitor('#my-textarea');

getSessionId()

Returns the current session identifier. Use this to retrieve analysis results from the NotAI REST API or to correlate with the authorship player visualization.

const sessionId = notai.getSessionId();
// 'abc123-def456-...'

flush()

Immediately send any buffered behavioral data to the API. Returns a Promise that resolves when the data has been transmitted. Call this before navigation or form submission to ensure no data is lost.

await notai.flush();

destroy()

Clean up and remove all event listeners.

notai.destroy();

Canvas LMS Integration

Integrate NotAI with Canvas Learning Management System to verify student submissions.

Step 1: Add Custom JavaScript

In Canvas Admin, navigate to Settings → Sub-Accounts → Your Account → Theme Editor.

Add the following to your custom JavaScript:

// NotAI Canvas LMS Integration
(function() {
  const script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/@notai/input/dist/notai.min.js';
  script.onload = function() {
    const notai = new NotAI('your-account-id');
    
    // Monitor discussion replies
    notai.monitor('.discussion-reply-box textarea');
    
    // Monitor assignment submissions
    notai.monitor('.submission-form textarea');
    notai.monitor('.tox-edit-area iframe'); // TinyMCE editor
  };
  document.head.appendChild(script);
})();

Step 2: Configure Webhooks (Optional)

To receive analysis results on submission, configure a webhook in your NotAI dashboard to receive events when students submit assignments.

WordPress Integration

Add NotAI to your WordPress site by adding this code to your theme's functions.php:

function notai_enqueue_scripts() {
    wp_enqueue_script(
        'notai-sdk',
        'https://cdn.jsdelivr.net/npm/@notai/input/dist/notai.min.js',
        array(),
        null,
        true
    );
    
    wp_add_inline_script('notai-sdk', "
        const notai = new NotAI('your-account-id');
        notai.monitor('textarea');
        notai.monitor('.wp-editor-area');
    ");
}
add_action('wp_enqueue_scripts', 'notai_enqueue_scripts');

React Integration

Use NotAI with React using a custom hook:

import { useEffect, useRef } from 'react';
import { NotAI } from '@notai/input';

function useNotAI(accountId: string) {
  const notaiRef = useRef<NotAI | null>(null);

  useEffect(() => {
    notaiRef.current = new NotAI(accountId);
    
    return () => notaiRef.current?.destroy();
  }, [accountId]);

  return { notai: notaiRef.current };
}

// Usage in component
function EssayForm() {
  const textareaRef = useRef<HTMLTextAreaElement>(null);
  const { notai } = useNotAI('your-account-id');

  useEffect(() => {
    if (notai && textareaRef.current) {
      notai.monitor(textareaRef.current);
    }
  }, [notai]);

  const handleSubmit = async () => {
    await notai?.flush();
    // Submit form — results available via API using notai.getSessionId()
  };

  return (
    <div>
      <textarea ref={textareaRef} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Vue Integration

Use NotAI with Vue 3 Composition API:

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { NotAI } from '@notai/input';

const textareaRef = ref(null);
let notai;

onMounted(() => {
  notai = new NotAI('your-account-id');
  notai.monitor(textareaRef.value);
});

onUnmounted(() => {
  notai?.destroy();
});
</script>

<template>
  <div>
    <textarea ref="textareaRef"></textarea>
    <button @click="notai?.flush()">Submit</button>
  </div>
</template>

Self-Hosting & Custom Endpoints

Self-Hosting the SDK (Pro & Enterprise)

On Pro and Enterprise plans, you can download a pre-configured SDK bundle from your dashboard under Settings → Downloads. Your account ID, data region (US or EU), and custom telemetry endpoint (if configured) are already embedded in the file — no data-* attributes or initialization options required.

This is useful for:

• Zero-config deployment — just include the script tag, everything is baked in
• Avoiding Content Security Policy (CSP) changes — serve from an origin you already trust
• Bundling with your existing scripts so it loads alongside your other assets
• Serving scripts from your own domain for consistent Content Security Policy compliance

Host the downloaded file on your own domain or CDN and include it with a single script tag:

<script src="https://your-cdn.example.com/scripts/notai-input.min.js"></script>

Custom Telemetry Endpoints (Pro & Enterprise)

By default, captured data is sent to the NotAI telemetry endpoint shown in your dashboard. On Pro and Enterprise plans, you can CNAME your own subdomain to this endpoint. This keeps all network traffic under your domain, which:

• Eliminates CSP issues for the telemetry endpoint
• Ensures reliable script delivery by serving from a trusted first-party origin
• Appears as first-party traffic in network inspection tools

Set up a DNS CNAME record pointing your subdomain to the NotAI endpoint provided in your dashboard:

telemetry.example.com  CNAME  <your-cname-target>  # shown in your dashboard

If you're using the self-hosted SDK (above), your custom endpoint is already embedded in the downloaded file — no additional configuration is needed.

If you're using the CDN or npm version, pass the custom endpoint when initializing:

const notai = new NotAI('your-account-id', {
  endpoint: 'https://telemetry.example.com'
});

Troubleshooting

SDK not initializing

• Verify your account ID is correct
• Ensure your domain is registered in the Allowed Hostnames list in your dashboard — requests from unregistered hostnames are rejected
• Check the browser console for error messages
• Ensure you're using HTTPS in production

No data appearing in dashboard

• Confirm the page's hostname matches one of your Allowed Hostnames in the dashboard (e.g. example.com) — traffic from unrecognized domains is filtered automatically
• Ensure minLength is appropriate for your use case
• Call flush() before the page unloads or on form submit
• Check that the monitored selector matches an element in the DOM

CORS errors

• Ensure your domain is in the Allowed Hostnames list in your dashboard
• Ensure the region option matches your account region (set at signup)