Skip to main content

Setup

This guide shows how to load Capture IQ, mount <glamar-captureiq>, and run a minimal capture flow.

Get an api-key​

You need a Capture IQ api-key (live_apitoken). Create an account and token in the PixelBin console—see Getting Started for step-by-step instructions.

Load the script​

<script src="https://cdn.glamar.io/sdk/captureiq"></script>

Ensure the URL is allowed by your Content Security Policy (script-src).

Minimal HTML (script tag)​

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Capture IQ</title>
    <script src="https://cdn.glamar.io/sdk/captureiq"></script>
  </head>
  <body>
    <glamar-captureiq
      id="capture"
      api-key="YOUR_TEST_OR_LIVE_KEY"
      preset="face"
      style="width: 400px; height: 600px;"
    ></glamar-captureiq>

    <script>
      const el = document.getElementById("capture");

      el.addEventListener("ready", () => {
        console.log("Capture IQ ready");
      });

      el.addEventListener("captureSuccess", (e) => {
        const { artifact, metadata } = e.detail.result;
        console.log(
          "Captured",
          metadata.captureId,
          artifact.width,
          artifact.height
        );
      });

      (async () => {
        try {
          await el.init();
          await el.start();
        } catch (err) {
          console.error("Failed to start Capture IQ", err);
        }
      })();
    </script>
  </body>
</html>

Sizing and mobile layouts​

On small viewports, give the element room to render the full flow—for example:

glamar-captureiq {
  display: block;
  width: 100%;
  height: 100vh;
  height: 100dvh;
}