Put CollegeLens on your website.

Quick start

1. 1. Contact CollegeLens to receive an API key and approved domain allowlist.
2. 2. Add the script tag and widget container to the page where you want the tool to appear.
3. 3. Set data-mode to the widget you want to launch.
4. 4. Publish. The loader script handles session creation, iframe mounting, resize, and event forwarding.

<script async src="https://collegelens.ai/embed/widget.js"></script>
<div
  data-collegelens-widget
  data-api-key="YOUR_API_KEY"
  data-mode="plan-intake"
  data-theme="default"
  style="max-width: 560px;"
></div>

<script async src="https://collegelens.ai/embed/widget.js"></script>
<div
  data-collegelens-widget
  data-api-key="YOUR_API_KEY"
  data-mode="sai-estimator"
  data-theme="default"
  style="max-width: 560px;"
></div>

<script async src="https://collegelens.ai/embed/widget.js"></script>
<div
  data-collegelens-widget
  data-api-key="YOUR_API_KEY"
  data-mode="appeal-letter"
  data-school-name="Ohio State University"
  data-theme="default"
  style="max-width: 560px;"
></div>

Manual mount API

Prefer the JavaScript API when you need to mount into a custom target or listen for widget events in your host page.

<script async src="https://collegelens.ai/embed/widget.js"></script>
<div id="collegelens-widget"></div>
<script>
  window.CollegeLensWidget.init({
    apiKey: "YOUR_API_KEY",
    target: "#collegelens-widget",
    mode: "sai-estimator",
    theme: "default",
    onEvent(detail) {
      console.log("CollegeLens widget event", detail.eventName, detail.payload);
    },
    initialData: {
      schoolName: "Ohio State University",
      state: "Ohio"
    }
  });
</script>