# Customize the animation in Whatsapp Chat bubble

**URL:** <https://community.elfsight.com/t/customize-the-animation-in-whatsapp-chat-bubble/115417>\
**Category:** Customization\
**Tags:** whatsapp-chat\
**Created:** [April 21, 2025, 3:05am UTC](https://community.elfsight.com/t/customize-the-animation-in-whatsapp-chat-bubble/115417 "2025-04-21T03:05:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yasser\_Kifah](https://avatars.discourse-cdn.com/v4/letter/y/e9bcb4/32.png) [@Yasser\_Kifah](https://community.elfsight.com/u/Yasser_Kifah)\
**Post date:** [April 21, 2025, 3:05am UTC](https://community.elfsight.com/t/customize-the-animation-in-whatsapp-chat-bubble/115417/1 "2025-04-21T03:05:41Z")

</div>

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

 ![cccc](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/1/a13939f5b26d8661367dd733a79d67b61e3cbf73.png)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 21, 2025, 3:01pm UTC](https://community.elfsight.com/t/customize-the-animation-in-whatsapp-chat-bubble/115417/3 "2025-04-21T15:01:21Z")

</div>

Hi there, @Yasser_Kifah and welcome to the Community 👋

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 😉

```auto
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();

```

---

<div class="post-metadata">

**Author:** ![Yasser\_Kifah](https://avatars.discourse-cdn.com/v4/letter/y/e9bcb4/32.png) [@Yasser\_Kifah](https://community.elfsight.com/u/Yasser_Kifah)\
**Post date:** [April 21, 2025, 5:21pm UTC](https://community.elfsight.com/t/customize-the-animation-in-whatsapp-chat-bubble/115417/4 "2025-04-21T17:21:55Z")

</div>

> [@Max](#):
>
> Custom JS

Sounds good! it works  
Thank you

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 21, 2025, 5:44pm UTC](https://community.elfsight.com/t/customize-the-animation-in-whatsapp-chat-bubble/115417/5 "2025-04-21T17:44:01Z")

</div>

Great, you’re always welcome 😉

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 22, 2025, 10:18am UTC](https://community.elfsight.com/t/customize-the-animation-in-whatsapp-chat-bubble/115417/6 "2025-04-22T10:18:04Z")

</div>

Split this topic on April 22, 2025, 10:18am UTC

A post was split to a new topic: [Chat should take place in the widget instead of redirection to WhatsApp app](https://community.elfsight.com/t/chat-should-take-place-in-the-widget-instead-of-redirection-to-whatsapp-app/115670)