Bug | Chatbox Does Not Expand/Collapse and Broken Widget Image

[Petar_Dietrich]

Howdy,

Without changing anything to our configurator’s settings, this morning, I discovered the following:

1. The Expand/Collapse button for the widget does not work as it used to. Now, when I click the button, the widget only gets wider or narrower (i.e., it does not shrink, default mode is expanded).

2. The widget’s image in the configurator is broken.

Note: Before reporting this bug, I doiuble-checked all widget configurator’'s settings, browser add-ons, and cleared cached.

Fix appreciated. Thank you.

---

1. Chatbox does not expand/collapse vertically (vertical height is fixed)

2. Broken Widget Image

[Petar_Dietrich]

Update:

Just now: The broken image issue solved itself (fixed). However, the chatbox only expands/shrinks in the horizontal direction (not vertical). There is no configurator setting to change this behavior.

Perhaps all I need to do is adjust the vertical height and width of the chatbox, but there is no setting for this (like there is for the embedded chat configuration).

[Max]

Hi there, @Petar_Dietrich

I’ve just checked your widget and the Expand button is working fine on my end

Default

Expanded:

Could you please double-check it? If the issue still persists, please open the Dev Console, click on the Expand button and then take a screenshot of what you see in the Console.

[Petar_Dietrich]

Whoa! That’s not what I see in the configurator. On the frontend, the expansion is minimal. What are you using? A 65-inch screen? LOL.

No change (with UBlock enabled or disabled). Also, we see a huge number of Elfsight injections into our configurator when UBlock is enabled. It would be great if you can review and fix our issue, and also explain the injections.

Chatbox Expanded and UBlock Disabled:

Chatbox Expanded and UBlock Enabled: (NOT A GOOD THING, TOO MANY INJECTIONS)

[Max]

Hi there, @Petar_Dietrich

The ad blockers, like Ublock, may mistake the widget for an ad, that’s why you see these alerts in the console when it’s enabled.

Unfortunately, this is beyond our control, and we cannot resolve it on our end. I am sorry!

As for the Expand Chat option, we’ve checked things and there is no issue on our end now. We’ve also checked the previous revisions of your widget and they’re working the same way as the current revision does.

From your screenshots, it looks like the screen height is quite small. Because the widget takes up the full height, there’s no extra space for it to expand:

You might want to test your website on a device with a larger screen to see if the Expand option works properly.

Let me know if that helps clarify things or if you have any other questions

[Petar_Dietrich]

Will do, thank you. What screen size and operating system are you using?

Also, how can I adjust the height of the chatbox on mobile and desktop devices (separately) for the Floating Chat configuration? The Embedded Chat configuration has it (see below). Why does the Floating Chat Configuration not have the same feature?

Cheers!

---

[Max]

16-inch display (1900*1200px), Windows 11.

Currently, you can change the height of the chat window only with the CSS code. I see that you’ve already added one for the mobile version:

To apply it to the desktop only, change max-width to min-width. The good news is that we’re currently working on adding this option for the Floating layout.

Feel free to upvote this request to get notified about the release - Change size of chat window (width and height)

[Petar_Dietrich]

Unfortunately, that did not work. So, I reverted back to our original CSS styling.

To make sure I got things right, can you provide the CSS rule(s) that allows me to reduce the height of the chatbox in mobile, tablet, and desktops while allowing the chatbox to expand vertically AND horizontally when I click the Expand icon?

Also, can you provide the CSS rule that allows me to change the font size of the text inside the input (i.e., comment entry) box? Currently, I have this but the input box is missing.

/* Assistant Message */
.es-message-assistant .es-message-content-container p {
  font-size: 15px;
}

/* User Message */
.es-message-user .es-message-content-container p {
  font-size: 15px;
}


/* Quick Replies */
.es-quick-reply-button {
  font-size: 15px;
}

Thank you!

[Max]

Hi there, @Petar_Dietrich

Here is a CSS code to change the font size of the “Ask me anything placeholder” and input text:

[class*="TextControlBase__TextControlBasePlaceholder-sc"] {
  font-size: 15px;
}

[class*="TextControlBase__TextControlBaseTextarea-sc"] {
  font-size:15px;
}

As for the code for changing the chat window height on different devices, I’ve checked the solution I’ve shared before and it’s working fine.

Mobile:

@media (max-width: 500px) {
  .es-window-container {
    height: 650px;
  }
}

Desktop:

@media (min-width: 500px) {
  .es-window-container {
    height: 650px;
  }
}

Tablets:

@media (min-width: 768px) and (max-width: 896px) {
 .es-window-container {
    height: 650px;
  }
}

Since the chat window is full screen on mobile devices by default, the Expand button shouldn’t be working there. It appeared there after a recent update and our devs are working on the fix.

As for the Expand button on other devices, it’s working fine on my end. Feel free to test it out and let me know how it worked

[Petar_Dietrich]

Thank, @Max! As always, I appreciate your help and dedication. Cheers!

[Max]

It’s my pleasure