View Categories

How to Add a Watermark to Embedded iFrame in Elementor

Table of Contents

If you embed external content using an iframe, chances are you also want branding.
A logo. A name. A subtle “hey, this is ours”. That’s exactly what the Watermark feature in Custom iFrame is built for.

This guide shows you how to add a text or image watermark to embedded iframe in Elementor, step by step.

This feature is part of Custom iFrame Pro.

Get Pro →

Quick Overview

  1. Install and activate Custom iFrame Free and Custom iFrame Pro.
  2. Open your page in Elementor and drag the Custom iFrame widget onto the page.
  3. Paste your external page URL into the Source field.
  4. Enable Watermark and choose Text or Image.
  5. Switch to the Style tab and adjust the watermark to match your branding.

What Does the Watermark Actually Do?

Before we click anything, here’s what’s happening behind the scenes:

  • The watermark is added on top of the iframe
  • It does not modify the embedded website
  • It works as a branding overlay

This means:

  • Your logo or text stays visible
  • The embedded content remains untouched
  • No cross-domain or security issues (yep, browsers are picky)

Perfect for:

  • Brand protection
  • White-label demos
  • Client previews
  • Embedded dashboards
  • Reports and PDFs inside iframes

Step 1: Add Custom iFrame Widget in Elementor

  1. Install Custom iFrame Free and Custom iFrame Pro Plugins in WordPress.
  2. Edit the page with Elementor in which you want to add iframe.
  3. Drag the Custom iFrame widget onto the page
  4. In source URL field, paste your external content URL.

At this point, your iframe is live. Now let’s add watermark and brand it.

Step 2: Add Watermark to Embedded iframe

  1. Go to the Content tab
  2. Scroll down to Watermark
  3. Toggle Enable Watermark → Yes

Once enabled, more options appear instantly.

Step 3: Choose Watermark Type (Text or Image)

You have two branding options.

Option 1: Text Watermark

Best for:

  • Website name
  • Product name
  • “Powered by …” branding

Steps:

  1. Set Watermark Type → Text
  2. Enter your text (for example: Coderz Studio)
  3. Choose the Position (Top Left, Top Right, Bottom Left, Bottom Right)
Custom iFrame settings panel in Elementor showing watermark configuration options including text type, emoji label, and bottom-right positioning—illustrating how to add watermark to embedded iFrame in Elementor for branding or content protection.

Option 2: Image Watermark

Best for:

  • Logos
  • Brand marks
  • Custom icons

Steps:

  1. Set Watermark Type → Image
  2. Upload or select your logo
  3. Choose the Position

This is ideal if you want visual branding without text clutter.

Step 4: Style the Watermark

Now let’s make it look good.

  1. Switch to the Style tab
  2. Open the Watermark section

Here you can control:

Typography (Text Only)

  • Font family
  • Font size
  • Font weight

Color

  • Pick any color
  • Match your brand palette

Opacity

  • Control visibility
  • Keep it subtle or bold
Custom iFrame style settings in Elementor showing watermark customization options including typography, color, and opacity—demonstrating how to visually refine watermark appearance when embedding content in WordPress.

A slightly transparent watermark looks professional and doesn’t distract users.

This guide walked you through how to add and customize a watermark using the Custom iFrame Pro plugin in Elementor.

From enabling text or image watermarks to adjusting style and opacity, you now have full control over iframe branding. Set it up based on your branding needs to keep your embeds professional, protected, and clearly yours.