Add EAS to your website

1. Get your key and component

In your publisher dashboard, open API keys & components, then expand a key. You’ll find the full public key, its allowed origins, and every component attached to it. Use the sample previews to identify a layout, and expand a preview for a closer look.

Publisher API key

Identifies your publisher integration. It is public and goes on the SDK script and each ad container.

Component ID

Selects the ad layout for a position on your page. Use a component attached to that same key.

Allowed origin

The exact protocol, hostname, and port of your website, such as https://example.com. Paths are not part of an origin.

Choose an active key and a component marked Ready to integrate. If your account has no keys or components yet, contact EAS to arrange setup.

2. Load the SDK

Add this script inside your page’s HTML <head>. Replace YOUR_PUBLISHER_API_KEY with the key from your dashboard.

<script defer
  src="https://eas.euphant.com/adScript.js"
  api-key="YOUR_PUBLISHER_API_KEY"></script>

The defer attribute lets the browser finish parsing the page before the SDK starts. Include a script once per publisher key used on the page.

3. Place the component

Paste this container in your page’s <body>, where you want an ad. Replace YOUR_PUBLISHER_API_KEY with the key on your SDK script and YOUR_COMPONENT_ID with a component from that key’s details.

<div class="eas-ad"
  data-api-key="YOUR_PUBLISHER_API_KEY"
  data-component="YOUR_COMPONENT_ID"></div>

Repeat the container for more ad positions, keeping data-api-key and data-component together. Each container gets its own ad; no unique HTML id is required.

The component fills its container’s width, and EAS resizes the ad frame to fit its content. Give the container a visible place in your layout. Avoid hiding it or placing it in a zero-width parent.

Using React or dynamic pages

Keep the SDK script from step 2 in your document’s HTML shell, such as index.html. Then paste this component into your app and render <EASAd /> where you want an ad.

export default function EASAd() {
  return (
    <div
      className="eas-ad"
      data-api-key={"YOUR_PUBLISHER_API_KEY"}
      data-component={"YOUR_COMPONENT_ID"}
    />
  );
}

Replace both placeholders with your publisher key and a component attached to it. The SDK detects containers added after the page loads, including React route changes and infinite scroll. It also cleans up when a container is removed.

If you change the publisher key or component ID of an existing React slot, remount it with a React key. The SDK observes inserted and removed elements, not attribute changes.

<div
  key={`${publisherKey}:${componentId}`}
  className="eas-ad"
  data-api-key={publisherKey}
  data-component={componentId}
/>

This last example assumes publisherKey and componentId are values in your app and the SDK script for that publisher key is loaded.

4. Check your integration

1. Open the page on an allowed origin. https://example.com, https://www.example.com, and http://localhost:5173 are separate origins; ask EAS to register each one you need.
2. Scroll the ad position into view. The SDK loads ads as containers approach the viewport.
3. In browser developer tools, check that adScript.js loads and the /ad/load request succeeds.

For a quick status check, run this in the browser console on your website:

Array.from(document.querySelectorAll(".eas-ad"), slot => ({
  component: slot.dataset.component,
  state: slot.dataset.easState || "SDK has not initialized this slot"
}));

A successful setup still needs eligible ads. An empty slot can mean there is currently no campaign available for delivery.

If an ad doesn’t appear

script-src 'self' https://eas.euphant.com;
connect-src 'self' https://eas.euphant.com https://render-eas.euphant.com;
frame-src https://render-eas.euphant.com;