Unexpected AI Chatbot formatting behavior

Ask the Community General Questions
1

  • Issue description: The AI Chatbot on elfsight (editing) looks awesome. It’s left aligned, uses bullet points, well laid out, easy to read. The same AI Chat bot on my website looks like a 3 year old drew out the responses on dirty toilet paper with zero formatting guidelines. Why the difference? Why the unexpected formatting behavior on my live site? Yes, it’s published. I’ve already added CSS to left align, to no avail (on the live site). Frustrated…

  • Link to the page with the widget in question: First picture is the AI Chatbot on my website. The second picture is the AI Chatbot on my elfsight editing platform.

  • Test Page (No index) – Home Front Design Build

  • Chatbot on website
    Chatbot on website463×705 84.2 KB

    Chatbot on ES
    Chatbot on ES460×664 92.6 KB

1 Like
3

Hi there, @user30940 :waving_hand:

I am so sorry for all the inconvenience!

I’ve forwarded this issue to the devs and will update you once it’s fixed :slightly_smiling_face:

1 Like
4

Thank you for waiting!

We’ve fixed the issue with this code added to the Custom CSS field on the General tab of your widget’s settings:

.es-message-content-container h1, .es-message-content-container h2, .es-message-content-container h3, .es-message-content-container h4, .es-message-content-container h5, .es-message-content-container h6, .es-message-content-container p, .es-message-content-container ul, .es-message-content-container ol, .es-message-content-container blockquote {
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 20px !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    color: rgb(255, 255, 255) !important;
    text-transform: inherit !important;
    text-align: inherit !important;
}

.es-message-content-container li {
  font-size: 15px !important;
  line-height: 20px !important;
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

.es-message-content-container ul {
  list-style: disc !important;
}

Please check your website and let me know if message formatting is fine now :slightly_smiling_face: