PhotoOp Partner Documentation

Quick Start

Add the PhotoOp ad unit to your site in under a minute. Copy the embed code below, paste it into your HTML, and you're live.

<iframe
  src="https://photoop.com/embed/"
  width="400"
  height="500"
  style="border: none;"
  loading="lazy"
  title="PhotoOp Visual AI"
></iframe>

No authentication required. The ad unit is publicly embeddable — no API keys, tokens, or sign-up needed.

Embed Code

Basic Embed (Default Branding)

Displays the generic PhotoOp CTA module with default headline, subtitle, and use-case scroller.

<iframe
  src="https://photoop.com/embed/"
  width="400"
  height="500"
  style="border: none;"
  loading="lazy"
  title="PhotoOp Visual AI"
></iframe>

Embed with App Key

Pass an app key in the URL path to load a custom-branded experience for a specific PhotoOp application.

<iframe
  src="https://photoop.com/embed/YOUR_APP_KEY/"
  width="400"
  height="500"
  style="border: none;"
  loading="lazy"
  title="PhotoOp Visual AI"
></iframe>

Recommended Attributes

Attribute	Value	Purpose
`src`	`https://photoop.com/embed/` or `https://photoop.com/embed/{app-key}/`	Ad unit URL (with optional app key)
`width`	`400`	Recommended width in pixels
`height`	`500`	Recommended height in pixels
`style`	`border: none;`	Removes default iframe border
`loading`	`lazy`	Defers loading until visible (performance)
`title`	`PhotoOp Visual AI`	Accessibility label

App Keys

App keys allow you to load a customized version of the ad unit tailored to a specific PhotoOp application. Each app key maps to a configuration that can override branding, headlines, and styling.

How App Keys Work

The app key is passed as a URL path segment: /embed/{app-key}/
The ad unit fetches the matching configuration from the PhotoOp API
If no configuration is found, the default branding is used
If no app key is provided, the generic PhotoOp experience is displayed

Obtaining an App Key

App keys are created and managed through the PhotoOp admin dashboard. Contact your PhotoOp representative to get an app key configured for your integration.

Tip: You can test the embed without an app key. The default experience works for all partners and shows the generic PhotoOp Visual AI branding.

Customization Options

When an app key is provided, the ad unit can be customized through the app configuration. These settings are managed through the PhotoOp admin dashboard.

Branding Overrides

Setting	Description	Example
Headline	Main title text in the CTA module	"Try Visual AI for Home Decor"
Subheadline	Subtitle text below the headline	"Snap a photo, get instant ideas"
Background Color	Module background color	`#f0f8ff`
Headline Font Size	Custom headline text size	`1.75rem`
Subheadline Font Size	Custom subtitle text size	`1rem`

Priority Order

Branding is applied in this order (later entries override earlier ones):

Default branding (built into the ad unit)
directMode.branding settings from the app config
landingOverrides settings from the app config (highest priority)

Note: Customization is configured server-side via the admin dashboard. Partners do not need to modify the embed code to apply branding — just use your assigned app key.

Dimensions

The PhotoOp ad unit uses a CTA module layout, not standard IAB ad sizes. The recommended dimensions are:

Dimension	Recommended	Minimum	Notes
Width	400px	300px	Module is responsive up to 400px max-width
Height	500px	400px	Enough for title, camera button, and scroller

Not standard IAB sizes. This is a custom CTA module, not a traditional display ad. The module centers itself within the iframe and has a max-width of 400px. You may use a wider iframe — the module will center within it.

Responsive Embedding

For responsive layouts, you can set the iframe width to 100% and constrain it with a container:

<div style="max-width: 400px; margin: 0 auto;">
  <iframe
    src="https://photoop.com/embed/"
    width="100%"
    height="500"
    style="border: none;"
    loading="lazy"
    title="PhotoOp Visual AI"
  ></iframe>
</div>

Partner Site Requirements

HTTPS Required

Your site must be served over HTTPS. Modern browsers block mixed content — an HTTP page cannot embed an HTTPS iframe (the ad unit is served from https://photoop.com).

Content Security Policy (CSP)

If your site uses a Content Security Policy, ensure it allows framing from photoop.com:

Content-Security-Policy: frame-src https://photoop.com;

If you don't have a CSP header, no action is needed — iframes are allowed by default.

Frame-Ancestors Policy

No domain allowlisting needed on our side. The PhotoOp ad unit's frame-ancestors policy is set to *, meaning any domain can embed it. You do not need to register your domain with us.

Referrer Policy

The ad unit uses document.referrer to identify the embedding partner site for analytics. If your site sets a restrictive Referrer-Policy (e.g., no-referrer), partner attribution in our analytics will be limited. We recommend:

Referrer-Policy: strict-origin-when-cross-origin

How It Works

The ad unit is a self-contained HTML page that runs inside an iframe on your site. Here's the user flow:

Display: The CTA module loads inside the iframe, showing a headline, camera button, and animated use-case scroller.
Click: When the user clicks the camera button, a new browser tab opens with the full PhotoOp app at photoop.com/{app-key}.
Camera: In the new tab, the user's camera activates and they can take a photo.
Results: PhotoOp's Visual AI analyzes the photo and returns results.

New-tab launch only. The camera does not activate inside the iframe. Clicking the camera button always opens a new tab. This ensures the best camera experience and avoids cross-origin permission issues.

Analytics

The ad unit tracks two GA4 events automatically:

Event	When	Parameters
`page_view`	Iframe loads	`partner_domain`, `app_key`, `ad_placement`
`ad_click`	Camera button clicked	`partner_domain`, `app_key`, `ad_placement`, `click_target`

Analytics are managed internally by PhotoOp — no tracking setup is required on your end.

Troubleshooting

Iframe doesn't load / shows blank

Verify your page is served over HTTPS
Check your CSP headers — ensure frame-src allows https://photoop.com
Open browser DevTools → Console and look for security/CSP errors

Camera button click doesn't open new tab

Check if a pop-up blocker is preventing the new tab (the click is user-initiated, so most browsers allow it)
On mobile Safari, ensure "Block Pop-ups" is not enabled in Settings → Safari

Branding doesn't match expected customization

Verify you're using the correct app key in the URL path
The app config may take a moment to load — check the network tab for the API call
Contact your PhotoOp representative to confirm the app config is set up correctly

Safari-specific issues

Safari blocks third-party cookies by default. The ad unit does not rely on cookies, so rendering is not affected
GA4 analytics may be limited in Safari due to Intelligent Tracking Prevention (ITP). This affects analytics only, not the user experience
The document.referrer value may be restricted by Safari's privacy features, reducing partner attribution accuracy

Need help?

Contact partners@photoop.com for integration support.