Customize the animation in Whatsapp Chat bubble

Ask the Community Customization
1

Hello,
Can I keep the animation working continuously? Explained int he attachment

cccc
cccc1095Ă—803 111 KB

1 Like
3

Hi there, @Yasser_Kifah and welcome to the Community :wave:

Happy to say that it’s possible! Just add this code to the Custom JS field on the Appearance tab of your widget’s settings and let me know if it worked :wink:

function installStyles() {
  const styles = document.createElement('style');
  styles.innerHTML = `
    @keyframes es-chats-pulse {
      0% {
        transform: scale(1);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: scale(1.2);
        opacity: 0;
      }
    }

    [class*="Bubble__BubbleComponent-sc"]::before {
      animation: es-chats-pulse 1s linear infinite;
      animation-delay: 0s;
    }

    [class*="Bubble__BubbleComponent-sc"]::after {
      animation: es-chats-pulse 1s linear infinite;
      animation-delay: 0.5s;
    }
  `;
  document.head.append(styles);
}
installStyles();
4

Sounds good! it works
Thank you

1 Like
5

Great, you’re always welcome :wink:

6

A post was split to a new topic: Chat should take place in the widget instead of redirection to WhatsApp app