> For the complete documentation index, see [llms.txt](https://docs.customiframe.com/llms.txt).
> Use it to discover all available pages before exploring further.

# Custom Watermarks

Add a text or image watermark overlay to any embedded iFrame in Elementor and Gutenberg using Custom iFrame Pro.


## Overview

Custom iFrame Custom Watermarks let you place a text label or logo overlay on top of any embedded iFrame. Use watermarks for branding, white-label client demos, or to mark embedded content as belonging to your site.

Custom iFrame is a WordPress plugin by CoderzStudio that embeds 100+ external sources in Elementor and Gutenberg without writing any code.

<Callout kind="info">
  Custom Watermarks is a Pro feature. It requires Custom iFrame Pro (Starter, Studio, or Agency plan). [View pricing](https://customiframe.com/pricing) — plans start at $29 one-time.
</Callout>

## Requirements

- [Custom iFrame Free plugin installed and active](/getting-started/installation)
- Custom iFrame Pro plugin installed and active
- WordPress with Elementor or the Gutenberg block editor

## How the Watermark Works

The watermark is an overlay element placed on top of the iFrame. It does not modify the embedded website in any way. The embedded content remains untouched. This means:

- No cross-domain restrictions
- Works on all embed types: video, documents, maps, forms, websites
- The watermark persists regardless of what the embedded page shows

## Watermark Types

**Text watermark:** A plain-text label. Use for website names, product names, or attribution text. Full typography, color, and opacity control.

**Image watermark:** A logo or custom icon uploaded from your media library. Use for brand marks and visual identities.

## How to Add a Watermark

### In Elementor

<Steps>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame widget. Click **Edit with Elementor**.
  </Step>
  <Step title="Enable the Watermark" icon="eye" title-type="p">
    Select the widget. In the **Content** tab, scroll to the **Watermark** section. Toggle **Enable Watermark** to **Yes**. More options appear.
  </Step>
  <Step title="Choose Text or Image" icon="type" title-type="p">
    Set **Watermark Type** to **Text** or **Image**.

    For **Text:** Enter your label. Choose a **Position**: Top Left, Top Right, Bottom Left, or Bottom Right.

    For **Image:** Upload your logo from the media library. Choose a position.
  </Step>
  <Step title="Style the watermark" icon="palette" title-type="p">
    Switch to the **Style** tab. Open the **Watermark** section. Adjust font family, size, weight, color, and opacity for text watermarks. Adjust size and opacity for image watermarks.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The watermark is now live on the embedded content.
  </Step>
</Steps>

### In Gutenberg

<Steps>
  <Step title="Open your page in the block editor" icon="layout" title-type="p">
    Go to the page with the Custom iFrame block. Click **Edit**.
  </Step>
  <Step title="Enable the Watermark" icon="eye" title-type="p">
    Select the block. In the right panel, scroll to the **Watermark** section and toggle it on. More options appear.
  </Step>
  <Step title="Choose Text or Image" icon="type" title-type="p">
    Choose the watermark type.

    For **Text:** Enter your brand text. Choose a position.

    For **Image:** Upload your logo from the media library. Choose a position.
  </Step>
  <Step title="Publish" icon="check" title-type="p">
    Click **Update** or **Publish**. The watermark is now live.
  </Step>
</Steps>

<Callout kind="success">
  The watermark is live. It appears over the embedded content on every page load.
</Callout>

## Watermark Position Options

| Position | Common use case |
|---|---|
| Top Left | Channel branding, site attribution |
| Top Right | Logo mark, product name |
| Bottom Left | Copyright notice, URL |
| Bottom Right | Most common placement for logo watermarks |

## Style Tips

- **Opacity:** A slightly transparent watermark (50–70%) looks professional without blocking content.
- **Color:** Choose a color that contrasts with the embedded content but does not draw excessive attention.
- **Font size:** Keep text watermarks small (12–16px) for a subtle brand presence.
- **PNG with transparency:** Use a PNG logo with a transparent background for the cleanest image watermark result.

## FAQ

<ExpandableGroup>
  <Expandable title="Does the watermark modify the embedded website?" default-open="false">
    No. The watermark is an overlay on top of the iFrame element. The embedded website remains untouched. This avoids cross-domain and browser security restrictions.
  </Expandable>
  <Expandable title="Does the watermark work on video embeds?" default-open="false">
    Yes. The watermark appears on top of any embed type including YouTube videos, Vimeo players, PDFs, maps, and external websites.
  </Expandable>
  <Expandable title="Can a visitor remove or hide the watermark?" default-open="false">
    The watermark renders in the DOM above the iFrame. A visitor using developer tools could hide it client-side, but this does not affect other visitors. The watermark is for branding, not copy protection.
  </Expandable>
  <Expandable title="Can I use Custom Watermarks and Device Frame at the same time?" default-open="false">
    Yes. Both are independent Pro features. Enable both on the same widget or block to show branded content inside a device mockup.
  </Expandable>
</ExpandableGroup>

---

## Related Guides

- [Custom Watermark in Elementor](/elementor/advanced/iframe-watermark)
- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Set Up Custom iFrame in Gutenberg](/getting-started/gutenberg-setup)
- [Device Frame Display](/features/device-frame)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)