# Time load the welcome message

**URL:** <https://community.elfsight.com/t/time-load-the-welcome-message/58784>\
**Category:** Customization\
**Tags:** whatsapp-chat\
**Created:** [June 26, 2024, 11:43am UTC](https://community.elfsight.com/t/time-load-the-welcome-message/58784 "2024-06-26T11:43:31Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Luan\_Pereira](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/luan_pereira/32/29834_2.png) [@Luan\_Pereira](https://community.elfsight.com/u/Luan_Pereira)\
**Post date:** [June 26, 2024, 11:43am UTC](https://community.elfsight.com/t/time-load-the-welcome-message/58784/1 "2024-06-26T11:43:31Z")

</div>

Hi! It would be interesting if there was a way to customize the time to load the welcome message or if you could reduce this time, I think it’s a long time.

---

<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:** [June 26, 2024, 4:13pm UTC](https://community.elfsight.com/t/time-load-the-welcome-message/58784/3 "2024-06-26T16:13:03Z")

</div>

Hi there @Luan_Pereira and welcome to the Community 👋

Our devs came up with 2 solutions for your case:

1. You can make the Welcome Message appear immediately by adding the code below to the Custom CSS field on the Appearance tab of your widget’s settings:

```auto

[class*="ChatLayout__DotsContainer-sc"] {
  display: none;
}

[class*="ChatLayout__Message-sc"] {
  opacity: 1 !important;
}

```

  

1. There is a way to control the message delay by adding this script to the Custom JS section on the Appearance tab of your widget’s settings:

```auto
const MESSAGE_DELAY = 500;

const waitForElem = (selector) =>
  new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });

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

waitForElem(
  '[class*="eapps-whatsapp-chat"] [class*="Bubble__BubbleComponent-sc"]'
).then((bubble) => {
  bubble.addEventListener(
    'click',
    () => {
      setTimeout(() => {
        const style = document.createElement('style');
        style.innerHTML = `
          [class*="ChatLayout__DotsContainer-sc"] {
            display: none !important;
          }
    
          [class*="ChatLayout__Message-sc"] {
            opacity: 1 !important;
          }
        `;
        document.body.append(style);
      }, MESSAGE_DELAY);
    },
    { once: true }
  );
});

```

  

Do not forget to set the desired delay in milliseconds in the 1st line of the code (MESSAGE\_DELAY).

Give it a try and let me know how it worked 😉