how do I get a "hubspot CTA" to adopt my theme's CSS?

[tony5280]

I don't see any options in the CTA editor.

I do see that the iframe src (popup in this case) is some type of virtual page from the same domain as the triggering page, so it would make sense that I could get the form popup to inherit my theme CSS somehow. 

But that HOW is eluding me.

I do understand that I can't style an iframe from the parent. What I am expecting is some way to configure the CTA to request my CSS on load.

[tony5280]

the solution. This will inject your stylesheet into ANY modal "pop-up box" CTA. It may work with others, but I hadn't tried em and specifically modal popup forms were my issue. YMMV.

in the module.html, add this script

<script id="fc-data" type="application/json">  
  {
    "modal_css": "{{ get_asset_url('/path/to/css') }}"
    ,"modal_prefix": "hs-overlay-cta-"
  }
</script>

Then in module.js, add this 

const data = JSON.parse(document.getElementById("fc-data").text);
console.log(data.modal_prefix);

document.addEventListener('DOMContentLoaded', (event) => {
    // Function to call when the element appears
    const onElementAppear = (element) => {
        console.log('Element appeared:', element);
        
        // Access the iframe within the element
        const iframe = element.querySelector('iframe');
        
        // Check if the iframe exists
        if (iframe) {
            // Wait until the iframe is loaded
            iframe.addEventListener('load', () => {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                // Create a new link element for the stylesheet
                const link = iframeDocument.createElement('link');
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = 'https:'+data.modal_css;

                // Append the link element to the head of the iframe document
                iframeDocument.head.appendChild(link);
                console.log('Stylesheet added to iframe');
            });
        }
    };

    // Get the parent element (assuming it's the body or another known container)
    const parentElement = document.body;

    // Check if the parent element exists
    if (parentElement) {
        // Create a new MutationObserver instance
        const observer = new MutationObserver((mutationsList, observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    const addedNodes = mutation.addedNodes;
                    addedNodes.forEach((node) => {
                        if (node.id.startsWith(data.modal_prefix)) {
                            onElementAppear(node);
                            // Optionally, you can stop observing once the element is found
                            observer.disconnect();
                        }
                    });
                }
            }
        });

        // Start observing the parent element for child node additions
        observer.observe(parentElement, { childList: true, subtree: true });
    } else {
        console.error('Parent element not found.');
    }
});

[tony5280]

Oh I am so bummed. We just launched, and all of the styling broke.  We were developing in the hs-sites.com domain, which is where the CTAs were firing from. After launch, they're still coming from hs-sites. This styling only works when the iframe and the script are on the same domain, and I'm not sure there's any way to style these now.

[tony5280]

This is a nasty hack =/

[tony5280]

so that's a proof. 

to push a spreadsheet to the frame, replace the yellow background section with:

// Push the stylesheet into the iframe head
                const link = iframeDocument.createElement('link');
                link.rel = 'stylesheet';
                link.type = 'text/css';
                link.href = ''; /*your sheet there*/

[Sasha-A8]

Following this thread. CTAs desperately need more styling options. It's possible that HubSpot doesn't want to impact external website performance by loading external stylesheets into iframes, but I could be wrong.

[tony5280]

It's possible performance is a concern. Someone would surely attach their main theme css, but if the form popup 'cta' is firing on the same domain, that sheet was just loaded and cached.

To circumvent that, simply giving us an area in the CTA to write CSS specific to the object at hand would work great, at least for my case. I don't want to have to have my form styles in two places, but I'd rather have that if it means the look and feel of the CTAs can match my site. With the current options, I can't even get close.

[Sasha-A8]

I haven't tried this, but you may be able to modify the style of an iframe using javascript as long as the iframe originates from the same domain. 

window.addEventListener('DOMContentLoaded', function() {
    var iframe = document.getElementById('myIframe');
    var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

    // You can now use innerDoc to modify styles, add scripts, etc.
    innerDoc.body.style.backgroundColor = '#f4f4f4'; // Change background color
    innerDoc.body.style.fontSize = '16px'; // Change font size
});

The above is from ChatGPT, but I did find a Stack Overflow thread where the solution to be similar. They even mention that you can link stylesheets into the iframe. 

frame.addEventListener("load", ev => {
    const new_style_element = document.createElement("style");
    new_style_element.textContent = ".my-class { display: none; }"
    ev.target.contentDocument.head.appendChild(new_style_element);
});

 
Also, there are some talks in that thread of using an ajax request to load the content of the iframe itself directly as well. 

Let me know if you are able to get any of that to work!

[tony5280]

that's pretty cool! I was just looking at injection options, but it's a shame it's come to this!

[tony5280]

Dear hubspot. This is so hacky.


the following code effectively addresses the iframe dom:

document.addEventListener('DOMContentLoaded', (event) => {
    // Function to call when the element appears
    const onElementAppear = (element) => {
        console.log('Element appeared:', element);
        
        // Access the iframe within the element
        const iframe = element.querySelector('iframe');
        
        // Check if the iframe exists
        if (iframe) {
            // Wait until the iframe is loaded
            iframe.addEventListener('load', () => {
                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

                // Change the background color of the iframe document
                iframeDocument.body.style.backgroundColor = 'yellow';
                console.log('Iframe background color changed to yellow');
            });
        }
    };

    // The form popup is wrapped in a div (replace with your div's id)
    const targetId = 'hs-overlay-cta-999';

    // Get the parent element (assuming it's the body or another known container)
    const parentElement = document.body;

    // Check if the parent element exists
    if (parentElement) {
        // Create a new MutationObserver instance
        const observer = new MutationObserver((mutationsList, observer) => {
            for (let mutation of mutationsList) {
                if (mutation.type === 'childList') {
                    const addedNodes = mutation.addedNodes;
                    addedNodes.forEach((node) => {
                        if (node.id === targetId) {
                            onElementAppear(node);
                            // Optionally, you can stop observing once the element is found
                            observer.disconnect();
                        }
                    });
                }
            }
        });

        // Start observing the parent element for child node additions
        observer.observe(parentElement, { childList: true, subtree: true });
    } else {
        console.error('Parent element not found.');
    }
});

[Sasha-A8]

You ought to mark this one as the solution instead of the other one for people finding this thread in the future.