AI Chatbot conversation overlaps its own text entry field when installed in Google Sites

Ask the Community General Questions
1

I’m experiencing the following rendering and/or state issues of the elfsight AI Chatbox when installed on my Google Sites website:

  • Issue description:

    1. The virtual assistant chat box is open by default, but should be closed by default at page load.
    1. The virtual assistant chat conversation overlays the text entry field, obscuring the text field and send button with conversation balloons.

  • Link to the page with the widget in question:

  • True Parents In Alaska - Virtual Assistant

2 Likes
3

Hi there and welcome to the Community, @user10400 :wave:

I see that you’ve chosen in Chat Window Only for the Greetings display, but haven’t published changes. This is why the greeting was displayed above the bubble on page load.

I’ve published this change and now the greeting appears in the chat window only.

As for the overlay issue, everything seems to be working fine on my end:

image
image665×925 30.6 KB

Could you please double-check it? If the issue still persists, please send me a screenshot of what you see :pray:

1 Like
4

I published it and it was still the same, so I added the following Custom CSS and it works correctly now:
.window__Body-sc-212ba1b8-2 {
overflow: auto;
}

.ghgGIy {
margin-top: 10px;
}

I don’t know if this will continue working in the future or for other sites, though.

2 Likes
5

Ah, got it, thanks!

Your solution is correct, but we recommend using the static classes in the codes because they are more stable. Here is the adjusted version I’ve saved in your widget :slightly_smiling_face:

[class*="window__Body-sc"] {
overflow: auto;
}

[class*="widget-window__QuickRepliesContainer-sc"] {
  margin-top: 10px;
}
1 Like