Eye Distance Measurement Tool - Embed Demo

This page demonstrates how doctors can embed the measurement tool into their websites.

⚠️ Setup Instructions:

Make sure authorized_keys.json contains your doctor's key
Place embed.js and embed.php on your server
Add the embed script tag to your HTML (see code below)
The tool will appear in the container div

Integration Code

Add this code to your website where you want the tool to appear:

    <!-- Add this script tag in your HTML head or before the closing body tag -->
<script src="embed.js" data-key="demo-doctor-001"></script>

<!-- Add this div where you want the widget to appear -->
<div id="eye-distance-widget"></div>
  

📝 Important:

Replace demo-doctor-001 with your actual authorization key
Update the src path to match where embed.js is hosted
The widget container will be automatically created if you don't specify the div
Make sure your server supports PHP and can serve embed.php

Live Demo

Below is a live embedded instance of the tool:

Customization Options

The measurement tool can be customized to match your website's style. Edit the CSS variables in eye-strain-one-page.html:

    /* In eye-strain-one-page.html, find the :root section and customize: */
:root { 
  /* Adjust border radius for all boxes, buttons, and cards */
  --test-border-radius: 0px; /* Set to 0px for square, or 12px for rounded */
  
  /* Adjust primary button colors (all black buttons) */
  --btn-primary-bg: #111; /* Change to your brand color */
  
  /* Optional: Override specific button colors */
  --btn-start-over-bg: var(--btn-primary-bg);
  --btn-share-bg: var(--btn-primary-bg);
  --btn-email-bg: var(--btn-primary-bg);
}
  

🎨 Customization Tips:

--test-border-radius: Controls all rounded corners (boxes, buttons, cards). Set to 0px for square corners, or increase (e.g., 12px) for rounded corners.
--btn-primary-bg: Changes the color of all primary/black buttons to match your brand color.
These variables affect all elements inside the measurement tool, making it easy to match your website's design with just two variables.
After modifying, the changes will apply to all embedded instances of the tool.

Styling the Iframe Container

You can also style the iframe wrapper on your page:

    #eye-distance-widget iframe {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  max-width: 100%;
}
  

🔒 Security Notes:

Keys are validated server-side via embed.php
Only active keys in authorized_keys.json will work
Invalid keys will show an error message
The tool requires camera access (prompted by browser)