ContentMonetiz Docs

Integration and Implementation Hub

This documentation is built for real usage. It explains exactly how ContentMonetiz works in this application, where each route is, how embed publishing works, and how teams should document or implement integrations for external platforms.

1) Product Flow in This App

Upload image in dashboard or collection flow.
Create or edit object hotspots in AdSpots editor.
Set image status to Live (Draft cannot be publicly embedded).
Copy embed output.
Paste on any external page as iframe embed.

Owner view: /images/[imageId]

Editor view: /adspots?imageId=...

Public embed: /embed/[imageId]

Preview mode: /embed/[imageId]?preview=true

2) How Embed Works Internally

Embed page uses server-side rendering to fetch image and ad spot data before render.
If the image has slug and user opens UUID directly, route can redirect to slug canonical URL.
Preview query is used for editor preview behavior.
Embed sends resize message to parent iframe for better container sizing support.
No-cookie-banner behavior is applied on embed routes so iframe stays clean.

3) Standard Embed Outputs

Preferred Embed SnippetHTML

<iframe
  src="https://www.contentmonetiz.com/embed/YOUR_IMAGE_ID"
  style="width:100%;aspect-ratio:4/3;border:none;display:block"
  loading="lazy"
  allowtransparency="true"
></iframe>

Direct Embed URLURL

https://www.contentmonetiz.com/embed/YOUR_IMAGE_ID

4) Platform Example: Shopify

For Shopify themes, start from theme editor block placement first. Use code edit only as fallback.

Custom Liquid ExampleLiquid / HTML

<div id="contentmonetiz-slot">
  <iframe
    src="https://www.contentmonetiz.com/embed/YOUR_IMAGE_ID"
    style="width:100%;aspect-ratio:4/3;border:none;display:block"
    loading="lazy"
    allowtransparency="true"
  ></iframe>
</div>

Validate on both desktop and mobile and verify this embed appears only on intended template scope.

5) Documentation Template You Can Reuse

Use this template whenever you onboard a partner, agency, customer, or platform integrator.

Partner Documentation TemplateMarkdown

# Partner Integration Guide — ContentMonetiz

## 1) Goal
Describe what your integration should achieve and where it should appear.

## 2) Required Inputs
- image_id
- embed URL
- target page URLs
- publishing scope (single page or multiple pages)

## 3) Recommended Integration Method
Use iframe embed first.

## 4) Embed Snippet
[PASTE IFRAME SNIPPET]

## 5) Placement Instructions
- Platform: Shopify / WordPress / Webflow / Custom HTML
- Exact location in page template

## 6) Validation
- Visible on target pages
- Not visible on non-target pages
- Loads correctly on mobile and desktop

## 7) Troubleshooting
- Wrong template
- Wrong image_id
- Duplicate scripts
- Cache issues

## 8) Support Handoff Data
- Store or site URL
- Theme/template name
- Embed code used
- Screenshot and console errors

6) AI Assistant Prompt Template

Give this prompt to ChatGPT or any AI assistant for platform-specific integration help.

Prompt TemplateText

I am integrating ContentMonetiz on my website.
Platform: [Shopify / WordPress / Webflow / Custom HTML]
Target page type: [product / homepage banner / article / custom page]

Embed code:
[PASTE IFRAME OR URL]

Give me exact implementation steps for this platform with:
1) exact placement location
2) final code
3) validation checklist
4) rollback steps

7) Go-Live Checklist

Image status is Live.
Embed opens and loads without login.
Ad spots are clickable and destination links are correct.
Embed is visible only on intended pages.
Mobile rendering and speed are validated.