PROBLEM
Shopify’s chat icon gets in the way of a lot of content (a common question on their forums) but the old CSS solutions don’t work because the new inbox/chat icon is now inside an iframe – and my JS is lame.
HAVE TRIED
Have read many Stackoverflow answers as well as blog posts but can’t get it working sorry. And combined with the age of some of the answers, it’s unclear if the answers I’ve tried are the ‘correct’ way of doing things.
Never the less, here’s a simplified version of where I’m at…
<iframe id="dummy-chat-button-iframe" name="dummy-chat-button-iframe" src="about:blank"></iframe>
<script>
var iframe = document.getElementById("dummy-chat-button-iframe");
var element = iframe.contentWindow.document.getElementById("dummy-chat-button")[0];
element.style.height = "40px";
element.style.width = "40px";
</script>
The above was a test to see if I could affect elements within the iframe, the actual selectors/styles I need to target would be…
button#dummy-chat-button.chat-toggle {
margin-top: 3px;
height: 40px;
width: 40px;
padding: 0;
}
button.chat-toggle svg {
width: auto;
height: 25px;
margin: auto;
}
NOTE: I have no control over the iframe’s HTML, styles or the iframe call itself, so can only use CSS and JS from outside the iframe (if possible).
QUESTIONS
- Based on the above info, can anyone show me the JS required to style elements within the iframe?
- Given the amount of styles I need to change, should I add a
<style>element to the head of the iframe and is this possible using JS?
Sorry my JS is so limited, any help or pointers in the right direction would be much appreciated.
Cheers, Ben