1. Overview

The ZERO PSA Screening Locator allows users to search for free or low-cost PSA screening events supported by ZERO Prostate Cancer and partners. The tool can be embedded into any website using a lightweight JavaScript file (embed.js) plus one HTML placeholder element.

When included, embed.js automatically detects the embed container and injects the locator inside an <iframe>. This approach is modeled after other professional third-party embeds such as Blackbaud’s registration forms.

---

2. Quick Start (Copy & Paste)

Add the following code where the locator should appear on your webpage:

<!-- ZERO PSA Screening Locator Embed -->
<script src="https://zero-psa-locator.pages.dev/embed.js"></script>

<div
  data-zero-psa-locator
  data-zero-psa-locator-height="800"
  data-zero-psa-locator-utm="utm_source=partner_site&utm_medium=embed&utm_campaign=psa_locator">
</div>

No additional initialization is needed. The script loads automatically and renders the locator inside the container.

---

3. How It Works

• embed.js scans the page for elements marked with data-zero-psa-locator.
• It creates a responsive <iframe> pointing to:
  https://zero-psa-locator.pages.dev/
• Optional UTM parameters are appended to the iframe URL.
• The iframe is inserted into the container with proper accessibility and responsive settings.

---

4. Embed Configuration Options

The following optional attributes may be applied to the <div> element:

Attribute	Required?	Description	Default	Example
data-zero-psa-locator	Yes	Identifies the embed container. Required.	n/a	<div data-zero-psa-locator>
data-zero-psa-locator-height	No	Specifies the height of the iframe in pixels.	800	data-zero-psa-locator-height="700"
data-zero-psa-locator-utm	No	Custom UTM query string sent to the locator for analytics and attribution.	utm_source=partner&utm_medium=embed&utm_campaign=psa_locator	data-zero-psa-locator-utm="utm_source=hospital&utm_medium=referral&utm_campaign=psa2025"

If no UTM parameter is provided, a standard default UTM configuration will be used.

---

5. Implementation Examples

5.1 Basic Implementation

<script src="https://zero-psa-locator.pages.dev/embed.js"></script>
<div data-zero-psa-locator></div>

5.2 Custom Height and UTM Parameters

<script src="https://zero-psa-locator.pages.dev/embed.js"></script>

<div
  data-zero-psa-locator
  data-zero-psa-lator-height="700"
  data-zero-psa-locator-utm="utm_source=provider_group&utm_medium=website&utm_campaign=psa_locator_2025">
</div>

5.3 Placing Within a Styled Section

<section class="psa-tool-section">
  <h2>Find a PSA Screening Near You</h2>
  <p>Use the tool below to locate upcoming PSA screening opportunities.</p>

  <script src="https://zero-psa-locator.pages.dev/embed.js"></script>
  <div
    data-zero-psa-locator
    data-zero-psa-locator-height="850">
  </div>
</section>

---

6. Accessibility & Responsiveness

• The iframe includes a descriptive title attribute for screen reader support.
• The iframe width is set to 100% so it automatically fits the parent container.
• The tool uses loading="lazy" to optimize performance.
• Partners should ensure the embed is placed in a flexible content region for best mobile performance.

---

7. Technical Specifications

• Embed Script: https://zero-psa-locator.pages.dev/embed.js
• Protocol: HTTPS required
• Dependencies: None (no jQuery needed)
• Multiple Embeds: Allowed; each data-zero-psa-locator generates one instance
• Caching: Standard browser/CDN caching recommended

---

8. Troubleshooting & FAQ

8.1 The locator does not appear

• Ensure embed.js is included on the page.
• Verify the container includes the data-zero-psa-locator attribute.
• Check that the site allows iframes from https://zero-psa-locator.pages.dev.

8.2 The iframe is cut off

• Increase data-zero-psa-locator-height.
• Avoid fixed-height parent containers.