How to Restyle the "Write your message..." Container

[AeroConsultants (Petar Dietrich)]

Hi there,

I would like to change the appearance of our AI Chatbot’s message container to look like this.

Specifically:

1. Reduce the height of the “Write your message…” container.
2. Change the current “send” or “submit” button icon from an “up arrow” to a “paper plane” icon as noted here.
3. Upon clicking the “Write your message…” field, ensure the field only displays one focus border color (e.g., blue), and not two adjacent borders (e.g., blue and gray) as you can see here.

Anyone got a CSS or JS code that can help me achieve the above?

Thank you!

[Irene]

Dear @AeroConsultants,

Regarding points 1 and 2, I’ll see if the customization like this can be done for you – will get back to you after I make sure if it’s possible with the dev team

As for the point 3, it can be achieved with the following CSS code placed in the Custom CSS section of your widget:
.es-interaction-field-container {
box-shadow: none;
}

Let’s stay in the loop – I’ll get back to you on this along with the other requests

[AeroConsultants (Petar Dietrich)]

Hi @Irene! We meet again

Thanks for that. In response:

Items 1 and 2. Awesome. [Note: If the “paper plane” can be rotated 90 degrees counter-clockwise (facing up) that would be cool. Also, we may end up retaining the current “arrow” icon, so if possible, please ensure the code change is made via JS (i.e., entered into our JS panel) so we can disable it as our needs change]. Curious: It appears you guys changed the styling of this field in the past, correct?

Item 3. Fixed. Thank you!

Cheerio!

[Irene]

Haha yeah, it’s like we’re having a brainstorm to make your AI Chatbot the best one

Speaking of the change in the interface of the AI Chatbot, yes, we recently updated it to look a bit different and fresh

If you’re a fan of the previous look, here is the code for the widget to match the demo page (with the paper plane rotated too):

.es-window-footer {
  padding: 8px 0 0 0
}

.es-window-footer:has([class*="footer__ScrollableContent-sc"]) {
  padding: 8px 0 20px 0
}

.es-interaction-field-container {
  border-radius: 0
}

[class*="interaction-field__Actions-sc"] {
  z-index: 99;
  position: absolute;
  inset: 0 0 0 0;
  padding: 0;
  padding-right: 12px;
  align-items: center;
}

.es-interaction-field-container {
  border: 1px solid rgba(17, 17, 17, 0.1);
}

[class*="interaction-field__Actions-sc"] [class*="Icon__IconContainer-sc"] {
  position: relative;
}

[class*="interaction-field__Actions-sc"] [class*="Icon__IconContainer-sc"] svg {
  display: none;
}

[class*="interaction-field__Actions-sc"] [class*="Icon__IconContainer-sc"]:after {
  content: '';
  width: 16px;
  height: 16px;
  position: absolute;
  inset: 0 0 0 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="5 5 18 18" fill="white"><path d="M9.166 7.5a.714.714 0 0 0-.998.83l1.152 4.304a.571.571 0 0 0 .47.418l5.649.807c.163.023.163.26 0 .283l-5.648.806a.572.572 0 0 0-.47.418l-1.153 4.307a.714.714 0 0 0 .998.83l12.284-5.857a.715.715 0 0 0 0-1.29L9.166 7.5Z"></path></svg>');
  transform: rotate(270deg);
}

Check it out and let me know what you think!

To get rid of the arrow icon, you need to delete the 3 last snippets of the code above (all that mention Icon__IconContainer-sc class). This way, you’ll see the initial arrow in your text field

Eager to hear what you think of this style!

[AeroConsultants (Petar Dietrich)]

Hey @Irene,

Wow! That worked – but then again, you knew that, right?

Three Findings:

(a) In order to match the current window’s padding and border radius, I made the following changes to your code:

.es-window-footer {
padding: 8px 16px 20px 16px
}

.es-window-footer:has([class*=“footer__ScrollableContent-sc”]) {
padding: 8px 16px 20px 16px
}

.es-interaction-field-container {
border-radius: 12px;
}

Our new “look” (thanks to Team Elfsight):

(b) The CSS Rule you provided got rid of the blue border that appears when we click on the message field. Can you ask your Dev Team to fix that as well?

Update: I fixed this by adding the following CSS Rule to the above:

.es-interaction-field-container:focus-within {
border: 1px solid #278dc5;
}

(c) When I enter a message into the newly configured message box, the message box does not scroll up (above the “paper plane” icon) when entering a long text. The “paper plane” icon needs to remain at the bottom of the input field.

Update: It appears your Dev Team is testing our widget configuration and/or code. The above CSS Rules are presently working only on mobile devices, not desktop devices. Our widget test panel proves it.

[Irene]

Hi,

So sad that you encountered issues in the end! I see that right now you got rid of the customization above, as it’s not in the Custom CSS section anymore. But I need to say that when I added it back with all your modifications, it seems to have worked for me alright on PC view as well as on mobile.

I want to get it all working great for you, so could you please confirm if there’s still an issue from point (c) on your side? And it’d be really helpful if you provided the final CSS that’s causing trouble with all the alterations made on top of the ones described in your message

Along with fixing the error if it’s present, I’ll pass the paper plane request to the team too

[AeroConsultants (Petar Dietrich)]

Hi Irene,

So, I entered the code exactly as originally provided (now live) and this is what I get:

(1) The container borders (left and right side padding) is zero (does not match native configuration. No worries, I can take of that. Details:

(2) No focus (blue) border when I click the message container field. Details:

(3) When entering a long string (text), the full text is not above the “paper plane” icon. This behavior is different from the widget’s natvie behavior. Details:

(4) (removed)

I hope the above helps. Pardon the long response!

Thank you!

[AeroConsultants (Petar Dietrich)]

Update: Using the code provided by @Irene, and adding our own changes, we’re good to go!

[Irene]

Dear @AeroConsultants,

So happy that my solutions were useful! I’m glad that you made everything work

Let me know if I can do anything else to better your experience