Call us or whatapp up now ( one click )

[Ink_Kode]

Hi, I’m looking for a widget that offers WhatsApp and call options on the page with a call to action with one click.

[Max]

Hi there @Ink_Kode

Sure, here is the code for the Click to Call widget:

const listenerBlock = (selector, callback) => {
  const initialTargetNode = document.querySelector(selector);
  if (initialTargetNode) {
    return callback(initialTargetNode);
  }

  const mutationObserver = new MutationObserver((mutations, observer) => {
    mutations.forEach(({ addedNodes }) =>
      addedNodes.forEach((node) => {
        if (node.nodeType === Node.ELEMENT_NODE) {
          const targetNode = node.querySelector(selector);
          if (targetNode) {
            observer.disconnect();
            return callback(targetNode);
          }
        }
      })
    );
  });

  mutationObserver.observe(document.body, {
    childList: true,
    subtree: true,
  });
};

listenerBlock(".eapp-click-to-call-button-component", (button) => {
  const link = document.querySelector(".eapp-click-to-call-window-phone");
  button.addEventListener("click", (e) => {
    e.stopPropagation();
    link.click();
  });
});

This code should be added to the Custom JS field on the Style tab of your widget’s settings. Check it out and let me know how it worked.

As for the WhatsApp Chat app, I’ll check with our dev team if it’s possible to customize it this way. I’ll get back to you once any news comes up

[Ink_Kode]

Excellent, thank you so much. Will try and let you know.

[Ink_Kode]

Hey, yeah, that worked like a charm. Thank you.

I’ll be eagerly waiting for the same on WhatsApp. " fingers crossed"

Best,
Hassan

[Max]

Awesome! This code should work for WhatsApp Chat (should be added to the Custom JS field):

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement("[class*='FloatingButton__FloatingButtonContainer-sc'] button[class*='ButtonBase__ButtonContainer-sc']")
.then(() => {
  const openChatButton = document.querySelector("[class*='FloatingButton__FloatingButtonContainer-sc'] button[class*='ButtonBase__ButtonContainer-sc']");
  const chatButton = document.querySelector("[class*='MessageField__MessageButtonContainer-sc'] button[class*='ButtonBase__ButtonContainer-sc']");
  openChatButton.addEventListener('click', (e) => {
    e.stopPropagation();
    chatButton.click();
  });
});

Try it out and let me know if did the trick

[Ink_Kode]

It works great; thank you. You really made a difference to my business.

[Max]

Wow, happy to hear that

In the meantime, we’d like to remind you about our new challenge. Just answer 3 simple questions about your favorite widget, and you’ll get a chance to win a 3-month extension to any of your subscriptions.

Check the details and jump in - we are eager to hear your thoughts

[Ink_Kode]

Hi Max,

I just got back here for a tiny issue; I need your support with,

after adding the code, the widget worked great; however, it was not showing on every page.

I then added the code, as in this article: Adding Elfsight widget to Squarespace website - Elfsight Help Center. However, it reverted back to the old issue where it’s no longer a one-click prompt.

How can I get the click-to-call widget to appear on all website pages?

Thanks
Hassan

[Max]

Hi there @Ink_Kode

I see that currently the widget is displayed on all pages. As for the call option with one click, I’ll check it with the devs and will get back to you tomorrow

[Ink_Kode]

ok, great, thanks.

[Max]

Thank you for waiting! @Ink_Kode

Please add this code to the Custom CSS field on the Style tab of your widget’s and let me know if it helped:

.global-styles, [class*="FloatingWindow__Container-sc"] {
  display: none;
}

[Ink_Kode]

Hi Max,thanks; I have tried the code, and unfortunatley, it did not affect the problem. it still shows these same ways: a multiple clicks to call button.

[Max]

Oh, I so sorry!

We’ve double-checked things and added these codes to your widget’s settings.

1. Custom CSS:

.global-styles, .eapp-click-to-call-window-component {
  display: none;
}

2. Custom JS:

const waitForElement = (selector, root = document) => new Promise(res => {
  let i = 0;

  const check = () => {
    const component = root.querySelector(selector);

    if (component) {
      res(component);
    } else if (i !== 50) {
      setTimeout(check, 100);
      i++;
    }
  };

  check();
});

waitForElement(".eapp-click-to-call-window-phone")
.then(() => {
  const openChatButton = document.querySelector(".eapp-click-to-call-button-component");
  const chatButton = document.querySelector(".eapp-click-to-call-window-phone");
  openChatButton.addEventListener('click', (e) => {
    e.stopPropagation();
    chatButton.click();
  });
});

Please check your website and let me know if everything is working fine now

[Ink_Kode]

Hi Max,

thank you. so I just checked; when clicking on the call button, it changes to an X sign without a dial prompt.

you may ask the team to check the same on my site https://sentineldubai.com/

[Max]

This occurs because you have added the widget’s installation code to the homepage twice:

The upper code prevents the first widget from working correctly. In your blog page, there is only one Click-to-Call installation code and everything is working fine.

Thus, to make the widget work correctly, you should remove the 2nd installation code from your homepage.

Please give it a try and let me know if it helped

[Ink_Kode]

Yes, that did the trick. thanks for the awesome support as always.

[Max]

No sweat