> 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 Watermark on iFrame in Elementor

Step-by-step guide to add a text or image watermark to an embedded iFrame in Elementor using the Custom iFrame Pro WordPress plugin.


## Overview

Custom iFrame lets you add a watermark to any embedded iFrame in Elementor. Display a text label or logo overlay on top of your embed for branding, white-label demos, or content protection.

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

<Callout kind="info">
  This 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](/getting-started/installation)
- Elementor installed
- An external URL or content to embed

## Step 1: Add the Custom iFrame Widget

<Steps>
  <Step title="Install Custom iFrame Free and Pro" icon="download" title-type="p">
    Install and activate both the Custom iFrame Free and Custom iFrame Pro plugins from your WordPress dashboard.
  </Step>
  <Step title="Open your page in Elementor" icon="layout" title-type="p">
    Go to the page where you want the watermarked embed. Click **Edit with Elementor**.
  </Step>
  <Step title="Drag the Custom iFrame widget onto the page" icon="move" title-type="p">
    Search for **Custom iFrame** in the widget panel. Drag the widget onto the page.
  </Step>
  <Step title="Paste your content URL" icon="clipboard" title-type="p">
    In the **Source** field, paste the URL of the external content you want to embed. The iframe loads in the editor.
  </Step>
</Steps>

## Step 2: Enable the Watermark

<Steps>
  <Step title="Open the Content tab" icon="settings" title-type="p">
    Select the Custom iFrame widget. Go to the **Content** tab.
  </Step>
  <Step title="Enable the watermark" icon="eye" title-type="p">
    Scroll down to **Watermark**. Toggle **Enable Watermark** to **Yes**. More options appear.
  </Step>
</Steps>

## Step 3: Choose the Watermark Type

You can use a text label or an image logo.

### Text Watermark

Best for website names, product names, or "Powered by" branding.

<Steps>
  <Step title="Set the type to Text" icon="type" title-type="p">
    Set **Watermark Type** to **Text**.
  </Step>
  <Step title="Enter your text and position" icon="align-left" title-type="p">
    Enter the watermark text (for example: your brand or site name). Choose the **Position**: Top Left, Top Right, Bottom Left, or Bottom Right.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776999076/elementor/advanced/watermark/watermark-settings.webp"
      alt="Custom iFrame watermark settings panel in Elementor showing text watermark type, label input, and bottom-right position selected"
      width="375"
      height="756" priority={true} fetchPriority="high" />
  </Step>
</Steps>

### Image Watermark

Best for logos, brand marks, or custom icons.

<Steps>
  <Step title="Set the type to Image" icon="image" title-type="p">
    Set **Watermark Type** to **Image**.
  </Step>
  <Step title="Upload your logo and set position" icon="upload" title-type="p">
    Upload or select your logo from the media library. Choose the **Position** to place it on the embed.
  </Step>
</Steps>

## Step 4: Style the Watermark

<Steps>
  <Step title="Open the Style tab" icon="palette" title-type="p">
    Switch to the **Style** tab. Open the **Watermark** section.
  </Step>
  <Step title="Adjust typography, color, and opacity" icon="sliders" title-type="p">
    For text watermarks: set the font family, size, and weight. Choose a color that matches your brand palette. Adjust opacity to keep the watermark subtle without blocking the content.

    <Image
      src="https://res.cloudinary.com/dcn414hjc/image/upload/v1776999078/elementor/advanced/watermark/watermark-style.png"
      alt="Custom iFrame Style tab in Elementor showing watermark typography, color picker, and opacity controls for branding an embedded iframe"
      width="374"
      height="646" priority={true} fetchPriority="high" />
  </Step>
</Steps>

<Callout kind="success">
  Click **Update** or **Publish**. Your watermark is now live on the embedded content.
</Callout>

The watermark overlays the iframe without modifying the embedded website. It appears on top of the content and works across all embed types. See the [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup) guide for all available widget options.

This guide showed you how to add and style a watermark in Elementor using Custom iFrame Pro. From enabling the watermark to choosing text or image and adjusting style, the setup runs entirely through the Elementor editor.

## 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. The embedded website remains untouched. This avoids cross-domain and browser security issues.
  </Expandable>
  <Expandable title="Can I use an image logo as my watermark?" default-open="false">
    Yes. Set Watermark Type to Image and upload your logo from the media library. Position it anywhere on the embed.
  </Expandable>
  <Expandable title="What is the best opacity for a watermark?" default-open="false">
    A slightly transparent watermark (around 50-70% opacity) looks professional and does not distract visitors from the embedded content.
  </Expandable>
  <Expandable title="Does the watermark work on all embed types?" default-open="false">
    Yes. The watermark overlay works on any content you embed with Custom iFrame, including PDFs, videos, maps, and external websites.
  </Expandable>
</ExpandableGroup>

---

## Also Available For

<Columns cols="2">
  <Card title="Custom iFrame Watermark (Feature)" href="/features/custom-watermarks" icon="layers" horizontal={false}>
    Learn about watermark options across all embed types.
  </Card>
  <Card title="Set Up Custom iFrame in Elementor" href="/getting-started/elementor-setup" icon="settings" horizontal={false}>
    Full guide to all Custom iFrame widget settings.
  </Card>
</Columns>

## Related Guides

- [Set Up Custom iFrame in Elementor](/getting-started/elementor-setup)
- [Style Custom iFrame](/getting-started/styling)
- [Custom Watermarks Feature](/features/custom-watermarks)
- [Device Frame Display](/features/device-frame)
- [iFrame Not Showing](/troubleshooting/iframe-not-showing)