How to Embed a Convertri Page Into a WordPress Post

Why I Wrote This (And What I Wish I Knew Earlier)

When I first tried to embed a Convertri page into a WordPress post, I assumed the Convertri WordPress plugin would handle it. But here's the catch: the plugin only allows you to link a landing page to a WordPress page, not a blog post.

That was frustrating because I wanted to:

Keep my Convertri opt-in page inside a regular blog post
Retain my blog’s design, headers, and SEO structure
Share and track blog links with UTM parameters

After a lot of trial and error, I figured out a custom HTML workaround that loads the Convertri page inside a blog postwith full UTM support and it works beautifully. This guide walks you through exactly how I did it.

What this Tutorial Covers

How to embed a Convertri page into a WordPress post
How to make the URL dynamic with UTM tracking
How I connect the form to AWeber for email collection

Step 1: Use the Standard WordPress Editor (Gutenberg)

When creating a new post, you may see options like DBL Site Builder which I use or other plugins. For this method, you must use the Standard Editor (Gutenberg). Click "Use Standard Editor" if prompted:

Once you’re in Gutenberg, continue to the next step.

Step 2: Add Column and a Custom HTML Block

Click the + icon to add a new block
Type Column
Select 100

Type "Custom HTML"
Select it to add HTML to your post

Step 3: Use This Generic Embed Script

Paste the following code and replace the baseUrl value with your own Convertri page URL:


<head>
  <meta id="viewport-meta" name="viewport" content="width=480">

  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: auto;
    }

    #iframe-container {
      width: 100%;
      height: 600px;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      border: 1px solid #ccc;
      box-sizing: border-box;
      padding: 10px;
      margin: 20px auto;
    }

    #iframe-container iframe {
      width: 100%;
      height: 100%;
      border: none;
    }

    @supports not (-webkit-overflow-scrolling: touch) {
      #iframe-container {
        overflow: auto;
      }
    }

    @media screen and (-ms-high-contrast: active),
    (-ms-high-contrast: none) {
      #iframe-container {
        overflow: visible;
      }
    }
  </style>

  <!--[if IE]>
    <style>
      #iframe-container {
        overflow: visible;
      }
    </style>
  <![endif]-->
</head>

<body>
  <div id="iframe-container"></div>

  <script>
    function getUTMParams() {
      const params = new URLSearchParams(window.location.search);
      const utmKeys = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'utm_id'];
      const utmParams = new URLSearchParams();

      utmKeys.forEach(key => {
        if (params.get(key)) {
          utmParams.set(key, params.get(key));
        }
      });

      return utmParams.toString();
    }

    const baseUrl = 'https://YOUR-CONVERTRI-PAGE-URL';
    const utmString = getUTMParams();
    const iframeSrc = utmString ? `${baseUrl}?${utmString}` : baseUrl;

    const iframe = document.createElement('iframe');
    iframe.src = iframeSrc;
    iframe.allowFullscreen = true;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    iframe.style.border = 'none';

    document.getElementById('iframe-container').appendChild(iframe);
  </script>

  <script>
    var MESSAGE_REGEXES = {
      META_CONTENT: /META_CONTENT: (.*)/,
    };

    var MESSAGE_HANDLERS = {
      META_CONTENT: function (data) {
        var meta = document.getElementById('viewport-meta');
        if (meta) meta.content = data;
      },
    };

    function isOriginTrusted(origin) {
      var trustedDomain = 'YOUR-CONVERTRI-DOMAIN';
      return origin.endsWith(trustedDomain);
    }

    function receiveMessage(event) {
      if (!isOriginTrusted(event.origin)) return;

      for (var key in MESSAGE_REGEXES) {
        var matches = event.data.match(MESSAGE_REGEXES[key]);
        if (matches) {
          var payload = matches[1];
          MESSAGE_HANDLERS[key](payload);
        }
      }
    }

    if (window.addEventListener) {
      window.addEventListener('message', receiveMessage, false);
    } else {
      window.attachEvent('onmessage', receiveMessage);
    }
  </script>
</body>

Update these line with your own Convertri page URL and domain:

const baseUrl = 'https://YOUR-CONVERTRI-PAGE-URL.com';

var trustedDomain = 'YOUR-CONVERTRI-DOMAIN';

Step 4: Preview and Publish

You have now successfully achieved the steps to Embed a Convertri Page Into a WordPress Post.

Click Preview to see your Convertri page live inside your post. If everything looks good, click Publish.

Your landing page now:

Loads in a blog post
Preserves UTMs
Keeps users on your domain

Step 5: How the Funnel Works

When you have successfully learnt how to Embed a Convertri Page Into a WordPress Post you now have the following steps that complete your funnel:

Visitor clicks a link to your blog post with UTM parameters
Blog post loads and embeds your Convertri landing page via iframe
Visitor opts in using Convertri form
The form submits to AWeber, adding the subscriber to your list

Why I Use AWeber for Email Marketing

I use AWeber for all my email marketing needs. It’s free to get started, easy to use, and built for small business owners like us.

AWeber Free:

✅ Free for up to 500 subscribers
✅ Drag-and-drop email builder
✅ Automated welcome sequences
✅ Convertri and WordPress integrations