Shopify 2.0 Dawn: How to make inbox chat icon smaller?

[Ben31]

Hi There,

Have seen lots of answers but this doesn't work for Dawn on Shopify 2.0 as far as we can tell...

/* Shopify inbox chat icon */
button.chat-toggle.chat-toggle--\#000000 {
  height: 50px !important;
  width: 50px !important;
}
button.chat-toggle > svg {
  height: 25px !important;
  width: 25px !important;
}

Does anyone know how to override? Many of the styles look to be set via the iFrame call. Does anyone know how to get access to the iFrame call or override?

<iframe id="dummy-chat-button-iframe" name="dummy-chat-button-iframe" src="about:blank" scrolling="no" style="height: 68px; width: 68px; position: fixed; bottom: 24px; border: none; z-index: 2147483647; overflow: hidden; right: 24px;"></iframe>

Any help would be much appreciated.

Cheers, Ben

[tim · Accepted solution]

One option is to use transform on iframe:

#dummy-chat-button-iframe {
    transform: scale(0.75);
}

JS approach works as well, except  you should not reference first element, must be like this:

var element = iframe.contentWindow.document.getElementById("dummy-chat-button");

[Ben31]

Sorry, should've mentioned that we have the following CSS which targets the inset but changing the height and width using css crops the icon instead of making it smaller...

/* Chat icon */
#dummy-chat-button-iframe {
  bottom: 5px !important;
  right: 5px !important;
}

And here's an example if we try overriding the size and width, it crops it instead of changing its size...

Does anyone know how to change the size?

[Ben31]

Looks like I have to us JS because the inbox/chat icon is now in an iframe (which is why previous answers no longer work I think).

So have been trying...

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

But I can't affect any change on the icon, let alone make it smaller.

Does anyone know how to do this no that the icon is in an iframe?

[tim · Accepted solution]

One option is to use transform on iframe:

#dummy-chat-button-iframe {
    transform: scale(0.75);
}

JS approach works as well, except  you should not reference first element, must be like this:

var element = iframe.contentWindow.document.getElementById("dummy-chat-button");

[Ben31]

Wow, thank you - much appreciated ! I haven't used transform like that before, so simple.

With regard to the JS (so I can change the "d attribute (path) in the svg icon), when using this...

var iframe = document.getElementById("dummy-chat-button-iframe");  
var element = iframe.contentWindow.document.getElementById("dummy-chat-button");
sink.setAttribute("d", "M32 4.6c-16.6 0-30 10.7-30 24 0 6.7 3.5 12.8 9.1 17.2L4.7 59.4l19.1-7.6a37 37 0 0 0 8.2.9c16.6 0 30-10.7 30-24S48.6 4.6 32 4.6zm-9.9 26.2a3 3 0 1 1-4.2-4.2 3.1 3.1 0 0 1 4.2 0 3 3 0 0 1 0 4.2zm12 0a3 3 0 1 1-4.2-4.2 3.1 3.1 0 0 1 4.2 0 3 3 0 0 1 0 4.2zm12 0a3 3 0 0 1-2.1.9 3 3 0 0 1-2.1-5.1 3.1 3.1 0 0 1 4.2 0 3 3 0 0 1 0 4.2z");

I see the following error in dev tools...

TypeError: Cannot read properties of null (reading 'contentWindow')

Am I doing that right or have I misunderstood what you said about line 2 - sorry, my JS is terrible!

Any help would be much appreciated.

Cheers, Ben

[tim]

Do not see where the sink comes from -- share a preview link so we are looking at the same code.

Something like this works for me from the dev tools console:

var i = document.getElementById('dummy-chat-button-iframe');
var d = i.contentWindow.document;
var svg = d.querySelector('#shopify-chat-dummy svg');
var path = svg.firstElementChild;

svg.setAttribute('viewBox' ,'0 0 65 65');
path.setAttribute('fill', 'green');
path.setAttribute('d', "M32 4.6c-16.6 0-30 10.7-30 24 0 6.7 3.5 12.8 9.1 17.2L4.7 59.4l19.1-7.6a37 37 0 0 0 8.2.9c16.6 0 30-10.7 30-24S48.6 4.6 32 4.6zm-9.9 26.2a3 3 0 1 1-4.2-4.2 3.1 3.1 0 0 1 4.2 0 3 3 0 0 1 0 4.2zm12 0a3 3 0 1 1-4.2-4.2 3.1 3.1 0 0 1 4.2 0 3 3 0 0 1 0 4.2zm12 0a3 3 0 0 1-2.1.9 3 3 0 0 1-2.1-5.1 3.1 3.1 0 0 1 4.2 0 3 3 0 0 1 0 4.2z");

If you're trying in console, be sure that it runs from the top document -- it tends to 'sink' inside the iframe if you inspect element properties.

[MaBa]

Hi @tim,

I tried this code

#dummy-chat-button-iframe { transform: scale(0.75); }

and works fine but when i click on the icon, it turns back to the original size. I need to close the chat window and reload the page to make it smaller again. Any idea on how to avoid it?

[atertonien]

@tim hi, your css code worked, but @MaBa is right: the shopify inbox button comes back at original css after it is clicked until you refresh the page. Do you have a solution for this maybe?
Thank you

[JavaBird]

Try this

#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
  bottom: 5px !important;
  right: 5px !important;
  z-index: 999 !important;
}

[RussSKT]

Ive been looking for a solution too, no idea about coding, but found this and its worked! Thanks

[SadafArif]

@atertonien @MaBa Did you find the solution to the problem of the button returning to its original size and place after clicking? If so please share.
@JavaBird I tried your code but the above problem still persists.

[JavaBird]

@SadafArif The #shopify-chat > iframe selector should've taken care of it... Can you post your store url so I can take a look?

[SadafArif]

https://sadaf-arif-1680.myshopify.com/
@JavaBird 
If I use the below, after clicking the button, it returns to its original place & not obey the code (on mobile)

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

If I use the below, the chat windows cut above the screen (on mobile) where the X is not even visible

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

[JavaBird]

Try this:

#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
  bottom: 5px !important;
  right: 5px !important;
  z-index: 2 !important;
}

#shopify-chat > iframe[isOpen=true], #shopify-chat {
  z-index: 999 !important;
}

[SadafArif]

Hello @JavaBird 
The above code I mentioned stopped working suddenly.
So I have edited the code so that the chat button X doesn't go 65px up on mobile
That's working now but the button doesn't stay at 65px bottom after the chat iframe is closed.
Here's the code:

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

  #shopify-chat > iframe[isOpen="true"] {
    bottom: 0px !important;
    z-index: 999 !important;
  }
}

I want the button to be at 65px bottom when not clicked & chat window at 0px bottom so the X is visible. (I have temporarily moved the chat button to the right with different spacing)
Can you please provide the code for this? 

[JavaBird]

I would also remove the bottom offset here:

[SadafArif]

@JavaBird Actually I wanted the bottom offset as I want the chat to go above the rewards button on mobile. I slightly edited your code to give a bottom offset to both open & close views & it works perfectly now. Below is the code.

@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;
  }
}

Thank you for the help @JavaBird 

[MAXING]

Yes, its icon got smaller, but when I opened and closed it, it got bigger again.

[jtraderj · Accepted solution]

The transform works for desktop but not for mobile - there is a conflict.  For mobile, need to call a different object. This is the setup for desktop and mobile, with option to keep the chat window at full size for mobile.

/* Shopify Inbox Chat Button Position (Desktop) */
@media only screen and (min-width: 990px) {

#dummy-chat-button-iframe, #shopify-chat > iframe, #shopify-chat {
transform: scale(0.83); /* Reduce size */
position: fixed; /* Fixes the button to stay in the same position on the screen */
bottom: 3px; /* Adjust the vertical position from the bottom of the screen */
right: 3px; /* Adjust the horizontal position from the right side of the screen */
z-index: 1000; /* Ensure the button stays on top of other elements */
}
}

/* Shopify Inbox Chat Button Position (Mobile) */
@media only screen and (max-width: 989px) {
inbox-online-store-chat {
transform: scale(0.70); /* Reduce button size */
position: fixed !important;
bottom: 3px !important; /* Adjust the bottom position */
right: 3px !important; /* Adjust the right position */
z-index: 1000 !important; /* Ensure it's on top of other elements */
}

/* Target the dialog box when it's open */
inbox-online-store-chat[is-open="true"] {
transform: none !important; /* Remove scaling for full-screen dialog */
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 1001 !important; /* Ensure it's on top of everything else */
}
}

[Ben31]

@jtraderj  Awesome. Have tested this and it works great thank you. Marked as the solution.