Skip to main content

Vanilla JavaScript Toolbox Integration

This guide walks you through integrating the DQC Toolbox into a standard HTML + JS website without React.

Prerequisites​

Make sure you have a basic HTML+JavaScript project (no frameworks needed).

📌 Steps to Integrate DQC Toolbox with Vanilla JS​

Step 1: API Key​

Make sure you have your API key from the DQCO-OP platform. If not, follow these steps to get your API key.

Step 2: Create the DQC Toolbox Service​

Create a file called toolbox.js:

toolbox.js
const DQC_API_KEY = "YOUR_DQC_API_KEY_HERE";  // Replace with your actual API key
const DQC_ENDPOINT = "https://api.dqco-op.com/tools/toolbox";

/**
 * Retrieves identity data using the DQCToolBox.
 *
 * @param {string} surveyId - Optional survey ID. If empty, the page URL is used.
 * @returns {Promise<Object|null>} Identity data or null on failure.
 */
export async function getIdentity(surveyId = "") {
  if (typeof window === "undefined") {
    throw new Error("getIdentity() must run in the browser.");
  }

  if (typeof surveyId !== "string") {
    throw new Error("Survey ID must be a string.");
  }

  if (!DQC_ENDPOINT || !DQC_API_KEY) {
    throw new Error("DQC_ENDPOINT and DQC_API_KEY must be defined.");
  }

  try {
    const { DQCToolBox } = await import( /* webpackIgnore: true */ `${DQC_ENDPOINT}/${DQC_API_KEY}`);

    if (!DQCToolBox || typeof DQCToolBox.getIdentity !== "function") {
      throw new Error("DQCToolBox module not loaded correctly");
    }

    const identityData = await DQCToolBox.getIdentity(surveyId);
    return identityData;
  } catch (err) {
    console.error("Toolbox Integration Service error:", err);
    return null;
  }
}

Step 3: Create the UI Component​

Now, create a file called script.js to interact with the browser:

script.js
import { getIdentity } from './toolbox.js';

document.getElementById('runBtn').addEventListener('click', async () => {
  const output = document.getElementById('output');
  output.textContent = "⏳ Running...";

  try {
    const result = await getIdentity();
    output.textContent = result ? JSON.stringify(result, null, 2) : "No data returned.";
    console.log("Result:", result);
  } catch (err) {
    console.error("Error:", err);
    output.textContent = "❌ Error occurred. Check console for details.";
  }
});

Step 4: Set Up Your HTML File​

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>DQC Toolbox Integration</title>
  <style>
    body { font-family: sans-serif; padding: 2rem; }
    button { padding: 0.5rem 1rem; margin-top: 1rem; }
    pre { background: #f4f4f4; padding: 1rem; border-radius: 8px; }
  </style>
</head>
<body>
  <h1>🔍 DQC Toolbox Integration</h1>
  <button id="runBtn">🚀 Run Quality Tools on my browser</button>
  <pre id="output"></pre>

  <script type="module" src="./script.js"></script>
</body>
</html>

Step 5: Run Your Website​

You can serve this with a static file server like:

npx serve .
# or
python -m http.server

Then open the site in your browser and click the button to test it.

Step 6: Verify the Integration​

Click the "Run Quality Tools on my browser" button.

note

The result should appear below as a formatted JSON payload.
If there is an error, check your console and confirm the API key and endpoint

It should work as the following example:

Step 7: Save or Use the Results​

You can now:

  • Save the result to your database for further analysis.
  • Use the response to guide real-time decisions.