Iframe embed for popup builders (GeoTargetly, etc.)

Some publishers can't drop a global <script> tag — for example when offers need to render inside a popup built with GeoTargetly, OptinMonster, ConvertBox, Sleeknote, Wisepops, or any other no-code overlay tool. AffilFinder ships a tiny cross-origin iframe that renders the same section ad block as widget-section.js, with just two query parameters — no script, no allowlist negotiation, no host-page CORS to debug.

This guide covers what the iframe is, how to configure it inside the most common popup builders, how to size and style it, how to test, and how to debug when nothing renders.

TL;DR#

<iframe
  src="https://affilfinder.com/?pub=YOUR_PUBLIC_KEY&website=YOUR_WEBSITE_KEY"
  style="width:100%;min-width:320px;min-height:280px;border:none;overflow:auto;"
  title="Offers"
></iframe>

Replace YOUR_PUBLIC_KEY and YOUR_WEBSITE_KEY with the values from your website's Widget embed modal, paste the HTML into your popup builder, and you're done.

When to use this#

Use the iframe when all of these are true:

• You can paste arbitrary HTML into a popup / modal / banner builder.
• You can't add a top-level <script> tag to the page (the popup tool sandboxes its content, or the surrounding page is locked down by your CMS / hosting platform / consent manager).
• You're OK with a single AffilFinder offer block rendering inside the popup — no full-page geo overlay, no decline flow.

If you can add a regular script tag, prefer the Section widget or Geo-blocking widget — they're lighter, give you more layout control, and can talk to the host page (events, dynamic resize, etc.).

How it works under the hood#

The iframe loads https://affilfinder.com/?pub=YOUR_PUBLIC_KEY&website=YOUR_WEBSITE_KEY. From the popup's point of view it's just an embedded document. Inside that document, AffilFinder does the heavy lifting:

1. Marketing apex hand-off. affilfinder.com sees the pub and website query params and issues a 307 redirect to app.affilfinder.com/?pub=…&website=…. The dashboard app is the only surface that mounts the section embed view, so the apex routes you there automatically.

2. Section view mounts. The dashboard's root page detects the two parameters and renders <SectionEmbedView pub=… website=…/>, which loads the section widget (widget-section.js) against your keys.

3. API call for offers. The widget calls GET /v1/decision and GET /v1/offers on the public AffilFinder API. The API uses the inner request to determine the visitor's geo (country / region) and the outer referrer header to confirm the parent domain is one you've registered.

4. Render. Up to 6 offer cards render inside the iframe with consistent typography. Clicks open in a new tab (target="_blank") so your popup stays put and the visitor doesn't lose context.

The iframe deliberately serves the response header Content-Security-Policy: frame-ancestors * so any host page can embed it cross-origin without you having to ask AffilFinder support to allowlist a domain.

Step-by-step: GeoTargetly#

GeoTargetly is the most common pairing with AffilFinder because it lets you fire popups based on the visitor's country / region. Here's the full flow from a fresh GeoTargetly account:

1. Create the popup in GeoTargetly#

1. Sign in to dashboard.geotargetly.com.

2. Click Add new popup → Custom HTML popup (the "blank canvas" option). Avoid the templated lead-gen popups — you want full control of the markup.

3. Give it a name like AffilFinder — geo block fallback so you remember what it does.

2. Paste the HTML#

Copy this whole block into GeoTargetly's HTML editor:

<div style="
  width: 500px;
  max-width: 100%;
  background-color: #ffffff;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 10px;
">

  <!-- Message -->
  <div style="margin-bottom: 20px;">
    <h2 style="margin-bottom: 10px; font-size: 20px; color: #333;">
      Service Not Available in Your Location
    </h2>
    <p style="font-size: 14px; color: #555; line-height: 1.5;">
      We're sorry, but our services are not currently available in your region due to geographic compliance requirements.
    </p>
    <p style="font-size: 13px; color: #777; margin-top: 10px;">
      Thank you for your understanding.
    </p>
  </div>

  <!-- Iframe -->
  <div style="width: 100%;">
    <iframe
      src="https://affilfinder.com/?pub=YOUR_PUBLIC_KEY&website=YOUR_WEBSITE_KEY"
      style="width:100%;min-width:320px;min-height:280px;border:none;overflow:auto;"
      title="Offers"
    ></iframe>
  </div>

</div>

> The two values that matter are YOUR_PUBLIC_KEY and YOUR_WEBSITE_KEY in the iframe's src. Replace both with the keys for the website you want to monetise. They look like pk_xxxxxxxxxxxx_xxxxxxxx (the publisher / public key) and web_xxxxxxxxxxxxxxxx (the website key). Both are public values — safe to put in HTML — but each pair is scoped to a single website, so don't reuse another site's keys or the offers won't load.

3. Find your two keys#

In a separate tab, open the AffilFinder dashboard:

1. Go to Websites → click the site you want to monetise.

2. Click Widget embed (top right of the site detail page).

3. The modal shows the script snippet with data-pub="…" and data-website="…" — those values are your two keys.

4. Or open the Iframe embed (cross-origin) section of the same modal — it shows the iframe HTML with your real keys already substituted; just copy the src value.

4. Configure GeoTargetly's targeting#

This is where GeoTargetly earns its name. Set the popup to fire only for visitors you can't serve from your main product:

• Geo target → Show to visitors from: any country / region your main product doesn't support. (Example: if you're a US-only operator, set this to "All countries except United States".)
• Display rules: choose On page load or After 2 seconds depending on your taste — AffilFinder's iframe loads its own offers asynchronously, so popping immediately is fine.
• Frequency: 1 per session is usually right — you don't want the popup re-firing on every page view.

5. Pick the pages#

In GeoTargetly's Pages tab, choose where this popup should appear. Most publishers fire it on every page (/*) so blocked traffic always sees an alternative no matter where they land.

6. Activate#

Save and activate the popup. GeoTargetly serves its own <script> tag from your site (you should already have it installed); from that point on the iframe is live for any visitor matching your geo rules.

Other popup builders#

The same HTML works in any builder that accepts custom markup. Quick notes per platform:

If your builder doesn't expose a "Custom HTML" element, it can't embed the iframe and you'll need to use the Section widget directly on the host page instead.

Required query parameters#

If either is missing, the iframe falls back to the marketing homepage — so if you see "Turn blocked traffic into revenue" inside the iframe, you forgot one of the keys. Both keys are also accepted as data-pub / data-website for backwards compatibility, but pub / website is the canonical form.

Sizing tips#

The iframe is fixed at whatever dimensions you set on the <iframe> element — it does not auto-resize to its content. Sensible defaults:

• width: 100% — fill the popup container.
• min-width: 320px — phone-friendly without forcing a horizontal scroll.
• min-height: 280px — fits 3–4 offer cards on most layouts.
• min-height: 480px — fits the full 6-card grid without inner scroll.
• overflow: auto — falls back to inner scroll if the popup is unusually short.
• border: none — removes the default browser iframe border.

For very small popups (e.g. mobile bottom-bar style), set min-height: 200px and the widget will collapse to a 2-card carousel. For full-screen takeovers, use height: 100% and let the parent container size everything.

Styling the surrounding popup#

The iframe renders AffilFinder's styling for the offer cards — you can't restyle them from outside (browsers sandbox cross-origin frames). What you can style is everything around the iframe inside your popup:

• The headline / explainer copy.
• Background colour, padding, border radius, drop shadow of the popup container.
• A close button if your builder doesn't ship one.
• Any logos or branding.

Pick a popup background that contrasts with the iframe's white card background (a soft grey or your brand colour works well). Keep the surrounding copy short — visitors should understand "you're seeing alternative offers" within 2–3 seconds.

Allowlisting your popup tool's domain#

The AffilFinder iframe deliberately serves Content-Security-Policy: frame-ancestors * so it works inside any parent page. You don't need to ask AffilFinder support to allowlist GeoTargetly (or any other popup builder).

The only domain that does matter is the one registered against your website key. The AffilFinder API checks the parent page's hostname (via the Referer header that browsers send on the iframe's outbound API calls) before it returns offers. So if your site is example.com and the popup fires there, everything works. If you embed the iframe on some-other-domain.com that you haven't added to the website in the dashboard, the API will return zero offers and you'll see an empty state.

To allowlist additional domains: Websites → <your site> → Site details → Domains and add the parent hostname.

Limitations vs the script-tag embed#

The iframe is the simplest possible integration. In exchange:

• No full-page geo overlay — only the section block renders. The "block everything until they click an offer" experience needs widget.js.
• No decline widget — that flow needs the dedicated widget-decline.js script and a server-side trigger.
• No SDK hooks — you can't read sessionId, listen for events, or call the trigger API from inside the iframe.
• Fixed dimensions — the iframe doesn't tell the parent page how tall it should be. Pick a sensible min-height.
• No deep customisation — the offer card style and copy are AffilFinder's; you control the surrounding popup.

If any of these matter, embed the Section widget or the Geo-blocking widget directly instead.

Testing#

Once you've activated the popup, test in this order:

1. Local visit. Trigger the popup from your own browser. Because you're (presumably) inside an allowed region, the popup probably won't fire — that's the geo rule doing its job.

2. VPN test. Connect to a country you know is blocked by your geo rules but active for AffilFinder advertisers (US, UK, Germany, Australia, Canada are reliable). Reload your site. The popup should fire and the iframe should fill with 3–6 sponsored offer cards.

3. Click test. Click an offer card — it should open the advertiser's landing page in a new tab. Your popup stays put.

4. Reporting check. In the AffilFinder dashboard, Analytics should show a session and at least one impression for the website within ~30 seconds. Clicks appear within ~1 minute.

Common errors and how to fix them#

You see the AffilFinder marketing homepage inside the iframe.

pub or website is missing or mistyped in the iframe src. Re-copy from the dashboard's Iframe embed (cross-origin) section.

You see an empty offer block ("No offers available in your region right now.").

Either there are no live advertiser campaigns matching the visitor's country, or the parent domain isn't registered against this website key. Switch to a major-market VPN (US, UK) to rule out the first case; if the popup still shows empty, add the parent domain in Site details → Domains.

The popup itself never fires.

This is a popup-builder issue, not an AffilFinder one. Disable the popup builder's geo rules temporarily and re-test — if the popup still doesn't show, the builder isn't loading on the page (script blocker, install issue, page-rule mismatch).

The iframe loads but is cut off / scrollable.

min-height is too low. Increase it to at least 320px or set height: 100% if the popup container has a fixed height.

You see "Refused to display in a frame because it set 'X-Frame-Options' to 'DENY'."

You're embedding app.affilfinder.com/dashboard/... (a logged-in route) by mistake instead of the public affilfinder.com/?pub=…&website=…. Only the public root URL is embeddable; everything else is intentionally blocked.

Offers appear but clicks don't open / the page just freezes.

A consent / privacy plugin on the parent page is intercepting iframe clicks. Add *.affilfinder.com to its allowlist.

FAQ#

Does the iframe count visits towards my AffilFinder analytics?

Yes — every iframe load is one impression for the website key in the src, and every click is one click. Same reporting as the script-tag embeds.

Do I need a separate website key per popup tool?

No. One website key per site (i.e. per parent domain). You can fire the same iframe from multiple popups on the same site without issue.

Will it slow down my page?

The iframe loads asynchronously inside the popup, which itself loads after the popup builder's own script. Total added weight on the parent page is one ~12 KB request; the offer cards are loaded inside the iframe and don't block the host page's rendering.

Can I change which offers are shown?

Offer eligibility comes from the AffilFinder marketplace — you can't hand-pick offers from the iframe. To narrow the marketplace: open Websites → <your site> → Verticals and restrict the categories you accept.

Is the iframe GDPR / consent-safe?

The iframe doesn't set first-party cookies on the parent page. It does fire AffilFinder's own analytics calls inside the iframe — those are documented in the Privacy policy. If you want to gate the iframe behind explicit consent, render the popup only after the visitor accepts marketing cookies in your CMP.

Related#

• Section widget — the script-tag version of the same offer block, with more layout control.
• Geo-blocking widget — full-page overlay for geo-restricted visitors.
• Widget integration reference — every script attribute and what it does.
• Configuring geo rules — decide which countries / regions trigger fallback offers.
• How AffilFinder works — system overview from publisher to advertiser.