Search code examples
javascriptiframeshopifyshopify-template

How to style Shopify 2.0 inbox/chat icon (inside an iframe)?

The 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.

What I 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: 20px;
  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.

My Questions:

  1. Based on the above info, can anyone show me the JS required to style elements within the iframe?
  2. 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?
Solution

  • Using transform on the iframe scales multiple CSS properties at once without the need for JS...

    /* Shopify inbox chat icon */
#dummy-chat-button-iframe {
  transform: scale(0.75);
  bottom: -5px !important;
  right: -5px !important;
}

    After re-sizing, the other rules move the icon closer to the bottom/right edge.

    One problem: after someone chats and closes the chat window, the icon goes back to its original size/location.

    I guess this is where JS would work better?