Question 11801 in Shopify Question posted in
The Shopify help center can be found here.

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?
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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?


  2. 0

    You can create your own button and style it however you want

    <style>
.custom-chat-button {
    // Your customized style here
}
</style>
<button class="custom-chat-button" onclick="openChatSupport();">Chat with us</button>

    Then use javascript to open the chat window by simulating a click on the real button

    function openChatSupport() {
    if(document.querySelector('#dummy-chat-button-iframe')) {
        openDummy();
    }
    else if(document.querySelector('#shopify-chat > iframe')) {
        openReal();
    }
}

function openDummy() {
    let dummy = document.querySelector('#dummy-chat-button-iframe');
    $(dummy).contents().find("#dummy-chat-button").click();
}

function openReal() {
    let real = document.querySelector('#shopify-chat > iframe');
    $(real).contents().find("button.chat-toggle").click();
}

    The following CSS will hide the original buttons

    #dummy-chat-button-iframe {
    display: none;
}

#shopify-chat > iframe {
    display: none;
}

#shopify-chat > iframe[isopen="true"] {
    display: initial;
}

    Update (As of Early 2023) shopify no longer uses the isopen attribute on the iframe. As a hacky workaround, you can detect whether or not the chat is opened using the min-height (desktop) and left (mobile) attributes on the iframe:

    #shopify-chat > iframe[style*="min-height"], #shopify-chat > iframe[style*="left: 0"] {
    display: initial;
}
    Login or Signup to reply.
  3. 0

    In Shopify 2.0, you can do it with just CSS.

    The below solution:

    • Makes the chat icon goes above some other app icons (& looks better)
    • Solves the following problem: After someone clicks on the chat and closes the chat window, the icon goes back to its original size/location (doesn’t obey the CSS) [as mentioned in CMSCSS answer]

    Add these to your base.css (at the very last)

        @media only screen and (max-width: 750px){
      #dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
        bottom: 65px !important;
        right: 10px !important;
        z-index: 2 !important;
      }
    }

        @media only screen and (max-width: 750px){
      #shopify-chat > iframe[isOpen=true], #shopify-chat {
        bottom: 0px !important;
        z-index: 999 !important;
      }
    }

    1st code block:

    The chat button is going up 65px so there can be another app’s button below it. This also holds the chat button at the same position even after closing the chat window. Adjust bottom & right padding as per your requirement.

    2nd code block:

    The iframe is opened so we need to make the bottom padding 0 so the iframe doesn’t cut through the top while open.

    The above code works only on mobile devices.
    If you want to do the same for the desktop then duplicate both the code blocks & change max with min in the 1st line & adjust your bottom & right paddings.

    Hope this solves your issue (if so, you know what to do)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search