I want to open the Shopify inbox chat box when the user clicks the contact us button .

[samthk]

I have a contact us button on my website that needs to open the Shopify inbox chat box when the user clicks the button. Is it possible to do this ?

[Noman01]

By Clicking Open Shopify Inbox Chat

<a class="site-nav__link site-nav__link--icon" href="{{ request.path | append: "/?chat" }}" > Open Chat Box</a>

[gobrandbrite]

Did you figure out how to do this? Thanks!

[Noman01]

<a class="site-nav__link site-nav__link--icon" href="{{ request.path | append: "/?show_chat" }}" > Open Chat Box</a>

Try this it will work because Shopify inbox updates its handle form /?chat to /?show_chat.

[DuraPaw]

Unfortunately, it did not work for us.

[Noman01]

<a class="site-nav__link site-nav__link--icon" href="{{ request.path | append: "/?chat" }}" > Open Chat Box</a>

Try this it will work because Shopify inbox updates its handle form  /?show_chat to /?chat.

[DuraPaw]

Hi Noman01, what this link does is refresh the page and then open the chat box. Is there a way to prevent the refresh and simply just open the chat box?

Thank you for taking the time to respond and help.

[Noman01]

Hi, @samthk  

yes you can use the following code : <a href="/?chat"> Contact US </a>

or you can add /?chat this to your link in the navigation. 

[greenvalleycode]

Hi Muhammed, this is a great solution! It works, but instead of simply opening up the chat window, this link bounces the user to the homepage and then opens the chat window. Do you know how to open the chat window without redirecting or refreshing the page?

[Noman01]

@greenvalleycode  <a class="site-nav__link site-nav__link--icon" href="#" onclick="openChatBox(event)">Open Chat Box</a>

<script>
function openChatBox(event) {
event.preventDefault(); // Prevent the default link behavior
// Logic to open your chat box goes here, for example:
// document.querySelector('.chat-box').style.display = 'block';

// Update the URL without refreshing the page
const currentPath = window.location.pathname;
history.pushState(null, null, `${currentPath}/?chat`);
}
</script> try this