WhatsApp Chat: How to open WhatsApp app on bubble click instead of the chat window

Pro Tips Elfsight Widgets Tips
1

Want to slip the opening the chat window and redirect the visitors to WhatsApp app on bubble click? We can make it happen:

const PHONE = '+553195142401';
const PREFILLED_MESSAGE = '';

document.addEventListener(
  'click',
  (e) => {
    if (
      !e.target.closest(
        '[class*="eapps-whatsapp-chat"] [class*="Bubble__BubbleComponent-sc"]'
      )
    ) {
      return;
    }

    e.stopImmediatePropagation();
    const message = PREFILLED_MESSAGE ? 
    `?text=${encodeURIComponent(PREFILLED_MESSAGE)}` : '';
    
    window.open(`https://wa.me/${PHONE}${message}`, '_blank');
  },
  true
);

Please add the needed phone number in the 1st line of the script and the desired pre-filled message in the 2nd line.

After that, the resulted code should be placed in the Custom JS field on the Appearance tab of your widget’s settings.

Note: Custom JS doesn’t function in the preview mode, so you can check the result right on your website or through the Share Link


Guys, was this solution helpful? Let us know in the comments :slightly_smiling_face:

2 Likes
Floating button instead of bubble