Build a screen hands can use.

Host the kit’s JavaScript and CSS, then adapt the paths and actions for your platform. The complete example below comes directly from the downloadable kit.

<!-- Low-code recipe. Host the kit's JS/CSS beside your page, then adapt paths. -->
<!-- Put this in a custom HTML embed that permits module scripts. -->
<link rel="stylesheet" href="/airdesk/airdesk.css">
<section id="airdesk-reference" data-airdesk aria-label="Reference viewer">
  <p class="airdesk-status" role="status">Page <span id="reference-page">1</span> of 3</p>
  <div class="airdesk-actions">
    <button type="button" data-airdesk-action="back" data-variant="secondary" disabled>Back</button>
    <button type="button" data-airdesk-action="next">Next page</button>
  </div>
</section>
<script type="module">
  import { AIRDESK_EVENT, mountAirDesk } from "/airdesk/airdesk.js";
  const root = document.querySelector("#airdesk-reference");
  let page = 1;
  root.addEventListener(AIRDESK_EVENT, ({ detail }) => {
    if (detail.action === "next") page = Math.min(3, page + 1);
    else if (detail.action === "back") page = Math.max(1, page - 1);
    else return;
    root.querySelector("#reference-page").textContent = String(page);
    root.querySelector('[data-airdesk-action="back"]').disabled = page === 1;
    root.querySelector('[data-airdesk-action="next"]').disabled = page === 3;
  });
  const dispose = mountAirDesk(root);
  // On a normal page this cleans up when leaving. In an SPA, clean up on unmount.
  window.addEventListener("pagehide", (event) => { if (!event.persisted) dispose(); });
</script>