Interactive Modal

Complete example

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Zavilo SDK Example</title>
  <script src="https://sdk.zavilo.app/v1/zavilo.js"></script>
</head>
<body>
  <h1>Interactive Document Scanner</h1>

  <input id="file" type="file" accept="image/*">
  <button id="openButton" type="button">Open Scanner</button>
  <p id="status"></p>

  <script>
    let client;

    async function init() {
      client = await Zavilo.init({
        publicKey: "pk_live_xxxxx"
      });
    }

    async function openScanner() {
      const file = document.getElementById("file").files[0];
      if (!file) return;

      await client.open({
        tool: "document-scanner",
        input: {
          file: file
        },
        options: {
          mode: "enhanced-color",
          deskew: true,
          format: "jpg"
        },
        closeOnComplete: true,
        onComplete: function (result) {
          const output = result.files[0];
          document.getElementById("status").textContent =
            "Complete: " + output.name;
        },
        onError: function (error) {
          document.getElementById("status").textContent =
            error.code || error.message || String(error);
        }
      });
    }

    document.getElementById("openButton")
      .addEventListener("click", openScanner);

    init();
  </script>
</body>
</html>