How to Add Online Indicator Before Caption

Ask the Community General Questions
1

Howdy,

To ensure our AI chatbot follows a standard UI format, can you guys provide a code snippet (CSS and/or JS) that will allow us to add an online indicator right before our caption “Online”? See below.

Thank you!

Screenshot_2
Screenshot_2528×749 49.6 KB

Screenshot_3
Screenshot_3493×634 24.8 KB

3

Hi Petar!

Sure, this CSS code will do the trick :slightly_smiling_face:

[class*="window-header__Caption-sc"]::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(14, 193, 47);
}

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

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

Perfect! You guys make it look easy. :slight_smile: Thank you!

ai-chatbot-online-indicator-new-position
ai-chatbot-online-indicator-new-position525×779 29.9 KB

5

Great, you’re welcome :wink:

6

Hello Team,

Just wanted to let you know that the CSS rules you provided above no longer work. Most likely, your developers – once again – changed the affected class(es).

Can you please check this one more time and provide the updated CSS rules?

Also, can you send a reminder to your developers asking them to implement measures that will prevent all of your CSS selectors or classes from continuous changes?

This is not the first time this has happened. Kindly consider “freezing” all selectors and classes that have been previously published and/or provided to your customers via this forum.

Thank you! :slightly_smiling_face:

Update: A detailed review of your widget confirms the affected CSS class changed

from this: window-header__Caption-sc
to this: es-window-header-Caption

7

Hi there, @Petar_Dietrich :waving_hand:

You’re right, the temporary class has been replaced with the stable one (all classes starting with .es are stable), so it won’t change after the future updates.

Apologies for this inconvenience and thank you for understanding!