JavaScript

Add the SDK

1. 1

   Add the SDK using a script tag

   This <script> tag will load Monocle's JavaScript SDK from our CDN and initialize it with your Monocle Publishable Key.

   html

   Copy code

   <script async src="https://js.mcl.io/d/mcl.js?tk=<MONOCLE PUBLISHABLE KEY>" id="_mcl"></script>

Session-Level Analysis (Optional)

1. 2

   Add the monocle-enriched class to your form

   By default, Monocle appends the encrypted assessment as a hidden field named monocle to any form elements that have the class monocle-enriched.

   html

   Copy code

   <form class="monocle-enriched" action="/submit" method="POST">
     <input type="text" name="name" />
     <input type="email" name="email" />
     <button type="submit">Submit</button>
   </form>

2. 3

   Decrypt the assessment

   Use the @spur.us/monocle-backend package to decrypt the assessment in your Node.js environment. In this example, we're using an express server.

   terminal

   Copy code

   npm install @spur.us/monocle-backend

   .env

   Copy code

   MONOCLE_SECRET_KEY=<your-secret-key>

   javascript

   Copy code

   const { createMonocleClient } = require("@spur.us/monocle-backend");
   const express = require("express");
   
   var app = express();
   
   app.post("/submit", express.urlencoded({ extended: true }), async (req, res) => {
     const encryptedAssessment = req.body.monocle;
   
     try {
       const monocleClient = await createMonocleClient({
         secretKey: process.env.MONOCLE_SECRET_KEY,
       });
   
       const decryptedAssessment = await monocleClient.decryptAssessment(encryptedAssessment);
       // Handle decrypted assessment
     } catch (error) {
       // Handle error
     }
   });

Related

• Monocle Assessment — Understand the decrypted assessment payload
• Assessment Decryption — Decryption API and backend decryption options