Chat button/Icon in menu

[oaklystore]

Hey!

Is there any way to make shopify inbox in my store as an "Live chat" icon next to search icon, cart? Or as a button?

Im attaching example.

I do not want floating icon as this cover some sections/images in my store. I want this to be in menu or as an icon.

[CodingFifty]

Hey! @oaklystore,

Could you kindly share your store URL and password (if it’s password-protected) so I can review it and provide you with an update?

[oaklystore]

Hey!

Its oaklystore.com

[CodingFifty]

Where is the live chat icon showing on your end? Is it floating somewhere? Because I’m not seeing the live chat icon on this store at all.

[oaklystore]

I have now enabled chat, please have a look.

[tim]

Here is what you can do without any theme code edits.

Add a new link to your menu, call it Chat and make it point to #chat (address is important).

Then add a "Custom liquid" section into your Footer section group and paste this code:

<script>
  document.addEventListener('click', e=> {
    let target = e.target.closest('[href$="#chat"]');
    if (target) {
      e.stopImmediatePropagation();
      e.preventDefault();
      let chat = document.querySelector('inbox-online-store-chat');
      if (!chat) return;
      let buttonSelector = chat.getAttribute('is-open') == 'true' ? ".chat-app--close-button" : ".chat-toggle";
      chat.shadowRoot.querySelector(buttonSelector)?.dispatchEvent(new Event('click'));
      return false;
    }
  });
</script>

<style>
  inbox-online-store-chat#ShopifyChat[is-open="false"] {
    transform: translateX(-100vw);
  }
</style>

The code will listen to click on any link like <a href="#chat">...</a> and will open/close the chat app. 

Preview in my test store: https://qf4vm29deon22n7j-23104437.shopifypreview.com -- click "Chat" in main menu.

Not quite the button you've asked for, but otherwise would need to modify the theme code which I currently have no access to.

OR, can decorate this link with CSS... 

[oaklystore]

Thank you so much. I will test this out soon! 🙂

With regards to this icon, I wanted to make same but as an icon so its visible on mobile next to search and cart so client doesnt have to open mobile menu. It would be more visible, accessible and better looking solution 🙂 I can email you to give you the access if you are able to help 🙂