Button that opens Shopify chat app is refreshing page and then opening

[cardboardhouse]

Hello everyone,

I’ve tried searching for a solution only but I can’t seen to find one. I want to have an a link that pops up the chat when clicked, I’m currently using /?chat but this actually refreshes the page and opens the chat, not the desired affect.

How can I pop it up without refreshing the page?

Thanks!

Chris

[BiDeal-Discount]

Hi @cardboardhouse

Can you detail with a screenshot? I will support you figure out if you can detail that

[BiDeal-Discount]

Hi @cardboardhouse

Are you using this app https://apps.shopify.com/inbox ?

[cardboardhouse]

It’s hard with a screenshot, but the steps are;

1. link clicked

2. Page refreshes, jumps to top of the page and chat pops up

Desired outcome;

1. Link clicked
2. Chat pops as, as you would if you clicked the chat bubble directly

[cardboardhouse]

yes!

[BiDeal-Discount]

Let try to find Live Chat button on your footer then change the href=“#” & add onclick=“openChatBox(event)”

Then try to add javascript openChatBox(event) function:

[cardboardhouse]

Hey, thanks for the reply!

Sorry but I’m not sure what to do;

1. Where am I adding onclick=“openChatBox(event)”? It won’t let me add it to the link field on the right hand side

2. Am I adding the script to my base.css?

[BiDeal-Discount]

1. Let try to edit code

2. let find the file header.liquid on your code then add it. Don’t use base.css because it only working for CSS code only

If you can’t do it. Let add me as collaborator to support you change it

[BiDeal-Discount]

Hi @cardboardhouse

Does it works?

[cardboardhouse]

I couldn’t figure out how to where to add onclick=“openChatBox(event)”

[BiDeal-Discount]

Let add me as collaborator then I will try to update code for you. My email: huykon225@gmail.com

[cardboardhouse]

Thanks for the offer but I’m not really comfortable adding people I don’t know as collaborator

[BiDeal-Discount]

oh okay. it will difficult to me to support you complete it

[cardboardhouse]

No worries, I will definitely let you know if I can’t figure it out and we will have to try this!

[BiDeal-Discount]

let try to add JS code. It maybe works:

document.addEventListener('DOMContentLoaded', function() {
  const chatLink = document.querySelector('a[href="/?chat"]');

  if (chatLink) {
    chatLink.addEventListener('click', function(event) {
      event.preventDefault();
      try {
        const shopifyChatHost = document.querySelector('inbox-online-store-chat');
        if (shopifyChatHost && shopifyChatHost.shadowRoot) {
          const chatToggleButton = shopifyChatHost.shadowRoot.querySelector('button.chat-toggle');
          if (chatToggleButton) {
            chatToggleButton.click();
          } else {
            console.error('Shopify Inbox: Internal chat toggle button not found.');
          }
        } else {
          console.error('Shopify Inbox: Chat host element not found or shadowRoot not accessible.');
        }
      } catch (error) {
        console.error('Error programmatically opening Shopify Inbox:', error);
      }
    });
  }
});

[cardboardhouse]

No

[cardboardhouse]

No it works!! I added it to main.js and works, thanks so much!

[BiDeal-Discount]

that sounds great