Embedding and Exporting Advertisements

Export Options

Copy Full Code

Click:

Copy Code

The generator copies the current HTML and JavaScript to the clipboard.

After successful copying, the button temporarily displays a confirmation.

Copy Minified Code

Click:

Copy Minified Code

This produces a shorter version by:

• Removing whitespace between HTML tags
• Collapsing repeated whitespace
• Removing newline characters
• Trimming the result

Minification Limitations

The supplied minifier is based on regular expression replacements.

It is not a complete HTML, CSS, or JavaScript minification engine.

Because it collapses whitespace throughout the generated source, it can alter whitespace within script content, text, or other contexts where whitespace may matter.

For maximum reliability, use Copy Code unless you've tested the minified output.

Generated Code Structure

Each advertisement contains:

1. A host container
2. An immediately invoked JavaScript function
3. A closed Shadow DOM
4. Generated CSS
5. Advertisement content
6. Interaction handlers

A simplified structural example:

<div class="ok-ad"></div>

<script>
(function () {
  const host = document.currentScript.previousElementSibling;
  const root = host.attachShadow({ mode: "closed" });

  // Generated advertisement styles and markup.
  // Generated placement and interaction logic.
})();
</script>

This is an illustration of the generated structure, not a complete advertisement.

For a working integration, paste the actual generated code from OK Ads.

Why Shadow DOM?

Shadow DOM allows the advertisement to encapsulate its internal elements and styles.

The implementation creates the shadow root with:

host.attachShadow({ mode: "closed" });

This can help prevent surrounding website CSS from unintentionally changing the advertisement's appearance.

Important Distinction

Closed Shadow DOM is not an iframe or security sandbox.

The generated script still executes in the embedding webpage.

External page styles, layout constraints, security policies, and scripts can still affect its behavior.

Embedding in an HTML Website

Open the HTML file where the advertisement should appear.

Paste the generated snippet in an appropriate location within the document body.

Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example Website</title>
</head>
<body>

  <h1>Welcome to our website</h1>

  <main>
    <p>Page content goes here.</p>
  </main>

  <!-- Insert complete OK Ads code here -->

</body>
</html>

The generator's placement settings control the advertisement's visible positioning.

Embedding in Website Builders

Some website builders provide:

• Custom HTML blocks
• Embed widgets
• Script injection
• Custom code areas

OK Ads requires an integration method that permits its generated JavaScript to execute.

An HTML-only field that strips <script> elements may not support the generated snippet.

Embedding in an iframe

You may be able to place generated code inside an iframe document if the hosting platform permits it.

However, iframe environments can impose additional constraints.

Important Considerations

• The iframe has its own document and viewport.
• Positioning may be relative to the iframe rather than the parent webpage.
• Rotation groups do not automatically span iframe boundaries.
• The parent page may control the iframe's dimensions.
• Sandboxing and Content Security Policy restrictions may prevent script execution.

Positioning Inside an iframe

A fixed or absolute advertisement positioned inside an iframe is not automatically positioned relative to the entire parent page.

If the iframe is short, advertisements may be clipped or overlap its boundaries.

The parent page's iframe height and styling must be considered separately.

Content Security Policy

The generated code contains inline JavaScript and dynamically inserted styles.

Strict Content Security Policies may block the snippet.

For security-conscious deployments, adapt the integration to the destination site's existing CSP strategy.

Avoid disabling the entire policy or broadly permitting unsafe scripts merely to display an advertisement.

Destination Links

The generated click overlay opens the configured URL in a new tab.

It uses the equivalent of:

window.open(destination, "_blank", "noopener");

The destination should be a valid HTTP or HTTPS URL.

The destination website may receive normal navigation information when a visitor opens the link.

Externally Hosted Images

When using a Logo URL or BG Image URL, the visitor's browser retrieves the relevant image.

If the remote image becomes unavailable, the advertisement may render without it.

For stability, use reliably hosted assets.

Embedded Images

Uploaded images are converted to data URLs and included within the generated code.

This removes the need to request the image from a separate host, but increases the size of the advertisement source.

Generated Footer

The advertisement includes an attribution footer:

Powered by OK Ads

The footer links to:

https://www.okads.click

The source includes this attribution in the generated output.

Testing Checklist

Before publishing:

• The full advertisement displays.
• The destination URL opens correctly.
• Logo and background images appear.
• The call to action is readable.
• Fine print remains visible.
• The close button works.
• Mobile behavior is acceptable.
• Positioning does not obscure important content.
• Scroll visibility works when enabled.
• Rotation works when multiple ads share a group.
• No Content Security Policy errors prevent execution.

Deployment Recommendation

Start with the full generated code.

Once it is working in the actual destination environment, optimize or modify the implementation only after confirming equivalent behavior.

Important: The generated advertisement is executable source code. Embed it only in websites you control or are authorized to modify, and review it under your site's security policies.