Time load the welcome message

Ask the Community Customization
1

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.

1 Like
3

Hi there @Luan_Pereira and welcome to the Community :wave:

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:

[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:
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 :wink: