OK Ads Quickstart Guide

Step 1 — Open the Generator

Navigate to:

The generator includes three main sections:

1. Customize Ad
2. Ad Preview
3. Code Preview

The Customize Ad panel contains the advertisement settings.

Step 2 — Enter Your Advertisement Content

Start with the essential information.

Destination URL

Enter the address you want visitors to open.

Example:

https://example.com

The generated ad uses a click overlay to open the URL in a new tab.

The source restricts destination URLs to HTTP and HTTPS protocols.

Step 3 — Choose a Design

Configure the appearance using the generator's controls.

Simple Starting Configuration

These are suggested starting values, not the application's factory defaults.

Colors

Choose:

• Background color
• Title color
• Slogan color
• Fine-print color
• Border color

The generator provides color pickers and text-based HEX fields for several color properties.

Step 4 — Add Images

To display a logo, either:

• Enter a Logo URL.
• Upload a logo image.

To use an image background:

• Enter a BG Image URL.
• Upload a background image.

Enable Blend BG if you want the selected background image combined with a translucent gradient overlay.

Image URL Example

https://example.com/logo.png

Step 5 — Set Dimensions and Position

Enter the advertisement's width and height in pixels.

Example:

Width: 320
Height: 250

Then select horizontal and vertical positioning.

Example:

X: 5%
Y: 5%

This positions the advertisement using percentage offsets.

Additional controls allow centering or mirroring its placement.

Step 6 — Preview Your Advertisement

Click:

Ad Preview (Click to Show)

The advertisement appears in an iframe.

The preview updates when generator settings change.

Preview Checklist

Confirm that:

• Your title is readable.
• Your slogan is not obscured.
• The logo appears correctly.
• Text contrasts with the background.
• The call to action is visible.
• Fine print fits within the advertisement.
• The dimensions are appropriate.

Step 7 — Copy the Code

Choose one of the two export buttons.

Copy Code

Copies the generated advertisement source with its original formatting.

Copy Minified Code

Copies a version with basic whitespace reduction.

The minifier collapses whitespace rather than performing advanced JavaScript or CSS optimization.

Step 8 — Embed the Advertisement

Paste the copied code into the HTML document where you want the ad to appear.

For example:

<main>
  <h1>Welcome</h1>
  <p>Website content.</p>
</main>

<!-- Paste generated OK Ads code here -->

<footer>
  <p>Website footer.</p>
</footer>

The generated code includes both the advertisement container and its JavaScript.

Do not replace it with an empty container alone.

Step 9 — Test the Advertisement

Open the destination webpage and check:

• Desktop appearance
• Mobile appearance
• Positioning
• Click behavior
• Close button
• Scroll-trigger settings
• Advertisement rotation, if enabled

Important Deployment Notes

JavaScript Required

The generated advertisement relies on JavaScript and Shadow DOM.

Content Security Policy

Websites with strict Content Security Policies may block inline JavaScript or inline styles used by the generated code.

Configure the destination site's policy appropriately without unnecessarily allowing unsafe content.

Hosted Images

Images supplied through URLs require those resources to remain available.

Uploaded Images

Uploaded images are embedded into the generated code as data URLs and can make it much larger.

You're Ready

You've created a customized advertisement using OK Ads and generated embeddable HTML and JavaScript.

For more advanced behavior, explore positioning, mobile controls, scroll visibility, and rotation groups.

Tip: Start with a single advertisement and test it on a real page before adding multiple rotating or scroll-triggered placements.