Search code examples
javascriptphpwordpresspardot

Get WordPress page title and pass through to iframe as URL parameter


We're using Pardot forms embedded on some pages on a WordPress site through a WP page template, and I have some URL parameters that are being passed from the main window into the iframe, so they can be captured in Pardot, which is working.

However I also need to get the WordPress page title (not the full meta title tag) and pass that to the iframe as well. I was thinking to append it to the end of the URL as a parameter like the others, but I'm not sure how best to do that.

This is the code that is currently in the WP page template:

    <script type="text/javascript">
        var form = 'https://go.sample.com/XXX/YYY/';
        var params = window.location.search;
        var thisScript = document.scripts[document.scripts.length - 1];
        var iframe = document.createElement('iframe');

        iframe.setAttribute('src', form + params);
        iframe.setAttribute('width', '100%');
        iframe.setAttribute('height', 700);
        iframe.setAttribute('type', 'text/html');
        iframe.setAttribute('frameborder', 0);
        iframe.setAttribute('allowTransparency', 'true');
        iframe.setAttribute('id', 'formiFrame');
        iframe.style.border = '0';

        thisScript.parentElement.replaceChild(iframe, thisScript);
    </script>

How could I modify the above code to get that result?

This is where I got the code that is working for the existing URL parameters: https://help.salesforce.com/s/articleView?id=000383147&type=1


Solution

  • So I was able to make it work by adding this code:

        var postTitle = '<?php echo urlencode(get_the_title()); ?>';
        if (params) {
            params += '&post_title=' + postTitle;
        } else {
            params = '?post_title=' + postTitle;
        }
    

    Put altogether:

    <script type="text/javascript">
        var form = 'https://go.sample.com/XXX/YYY/';
        var params = window.location.search;
        var postTitle = '<?php echo urlencode(get_the_title()); ?>';
        if (params) {
            params += '&post_title=' + postTitle;
        } else {
            params = '?post_title=' + postTitle;
        }
        var thisScript = document.scripts[document.scripts.length - 1];
        var iframe = document.createElement('iframe');
    
        iframe.setAttribute('src', form + params);
        iframe.setAttribute('width', '100%');
        iframe.setAttribute('height', 700);
        iframe.setAttribute('type', 'text/html');
        iframe.setAttribute('frameborder', 0);
        iframe.setAttribute('allowTransparency', 'true');
        iframe.setAttribute('id', 'formiFrame');
        iframe.style.border = '0';
    
        thisScript.parentElement.replaceChild(iframe, thisScript);
    </script>
    

    This solution worked perfectly. If there are other parameters already, then it adds the post title at the end. If there aren't other parameters, it adds it using the correct syntax as well.