🔥 Add a Pulsating "Online" Indicator to Your AI Chatbot

[Petar_Dietrich]

Want to give your AI Chatbot a more dynamic, live feel? Adding a subtle, pulsating green dot next to the status caption immediately lets visitors know your assistant is active and ready to help.

If you run into any issues or need help tweaking colors and timing, simply reply to this post with your question or issue.

Enjoy!

---

Step-by-Step Guide: (refer to images for details and result)

1. Go to AI Agent Profile > click Edit.

2. Set the Caption field to Online.

3. Add the CSS and JavaScript snippets below to your widget/site settings.

1. Custom CSS

Paste this code into your widget’s Custom CSS field:

/* Add online indicator next to bot caption - use with JS code for pulsating effect */

[class*="es-window-header-Caption"]::before {
  content: '';
  display: inline-block;
  width: 6px; /* adjust to change dot size */
  height: 6px; /* adjust to change dot size */
  border-radius: 50%;

  /* JS overrides this during the pulse */
  background-color: var(--online-dot-color, #56bc89);
  opacity: var(--online-dot-opacity, 0.3);
  transform: scale(var(--online-dot-scale, 0.9));

  /* JS controls the glow */
  box-shadow: var(--online-dot-glow, 0 0 0 transparent);

  transition:
    background-color 900ms ease-in-out,
    opacity 900ms ease-in-out,
    transform 900ms ease-in-out,
    box-shadow 900ms ease-in-out;
}

[class*="es-window-header-Caption"] {
  display: flex;
  align-items: center;
  gap: 4px;
}

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

2. Custom JS

Paste this code into your widget’s Custom JS field:

/* Make online indicator pulsate */

(function() {
  const LIGHT_GREEN = '#56bc89';
  const DARK_GREEN = '#176b43';
  const INTERVAL = 1000;

  let active = false;

  function pulseDot() {
    const caption = document.querySelector(
      '[class*="es-window-header-Caption"]'
    );

    if (!caption) return;

    active = !active;

    /* Darker green at highest intensity */
    caption.style.setProperty(
      '--online-dot-color',
      active ? DARK_GREEN : LIGHT_GREEN
    );

    /* Full opacity at peak */
    caption.style.setProperty(
      '--online-dot-opacity',
      active ? '1' : '0.3'
    );

    /* Keep the dot essentially the same size */
    caption.style.setProperty(
      '--online-dot-scale',
      '0.9'
    );

    /* Darker, subtle glow at peak */
    caption.style.setProperty(
      '--online-dot-glow',
      active ?
      '0 0 5px rgba(23, 107, 67, 0.55)' :
      '0 0 0 transparent'
    );
  }

  /* Initial state */
  document.documentElement.style.setProperty(
    '--online-dot-color',
    LIGHT_GREEN
  );

  document.documentElement.style.setProperty(
    '--online-dot-opacity',
    '0.3'
  );

  document.documentElement.style.setProperty(
    '--online-dot-scale',
    '0.9'
  );

  document.documentElement.style.setProperty(
    '--online-dot-glow',
    '0 0 0 transparent'
  );

  setInterval(pulseDot, INTERVAL);
})();

---

[Helga]

Worked beautifully! Thanks a lot for sharing, Petar!

[Petar_Dietrich]

Happy you liked it! Thanks for adding the animated image.

** Our job is not to make products, but to make products better **