CSS Ai Chat Conversation Window

[Shawn_Martin1 (Shawn Martin)]

Hey Max,

wondering if you could send me the CSS so that would allow text to fit thr entire chat windo from right to left fit text versus how it’s situated now - also if I can change the opacity to allow to see through to the background of widget?

Thank you.

Shawn

[Max]

You’d like to display all text (bot replies and users’ messages) full width, am I right?

[Shawn_Martin1 (Shawn Martin)]

Yes please both plus would like to change the opacity of the background color as well.

[Max]

Here is the code for changing the opacity of the chat window and bubble:

[class*='ButtonBase__ButtonContainer-sc'] {
  opacity: 0.5;
}

[class*='window__Container-sc'] {
  opacity: 0.5;
}

And this code will make the messages full width:

[class*='dialog-message__Background-sc'] {
  max-width: unset;
}

Check it out and let me know if it help

[Max]

Would you mind if I make the personal messages you’ve recently sent to me public?

These solutions might be helpful for other users too

[Shawn_Martin1 (Shawn Martin)]

Yes of course.

Do you add CSS to the CSS Codes section when someone requests a change? That would be awesome so we can all share & benefit and it’s less back and forth repeating for you as well?!

Thank you,
Shawn Martin

···

On Feb 19, 2025, at 8:20 AM, Max via Elfsight Community notifications@elfsight.discoursemail.com wrote:

| Max Support Specialist
February 19 |

• | - |

Would you mind if I make the personal messages you’ve recently sent to me public?

These solutions might be helpful for other users too

---

Visit Message or reply to this email to respond to Max.

To unsubscribe from these emails, click here.

[Max]

We usually do this, but since we are currently receiving a large number of requests, we may not publish them right away. However, we’ll do our best to add them as soon as possible

[Shawn_Martin1 (Shawn Martin)]

Hey Max,

This code doesn’t seem to work the way I am needing it to…

I had a hyphen placed instead of a semi-colon for the width CSS, so that code works.

The entire window opacity is effected - only needing the text blocks within the window.

Can you help?

Thank you.
Shawn

[Max]

Hi @Shawn_Martin1

To change the opacity of the text blocks only, please use this code:

[class*="typography__Container-sc"] {
  opacity: 0.3;
}

[Max]

Sorry for misunderstanding!

Could you please send me a link to the page where your widget is installed?

[Max]

Thank you so much!

I’ve forwarded your request to the devs and will update you tomorrow

[Max]

Hi @Shawn_Martin1

Here is the code:

.global-styles,
:root {
  --message-bg: rgba(17, 17, 17, 0.7);
}

[class*="dialog-message__Background-sc"] * {
  color: #fff;
}

[class*="dialog-message__Background-sc"] {
  background-color: var(--message-bg) !important;
  position: relative;
}

[class*="dialog-message__StyledTailIcon-sc"] path {
  fill: var(--message-bg) !important;
}

The background color is set in the 3rd line, the last value controls the opacity:

Try it out and let me know how it worked for you

[Shawn_Martin1 (Shawn Martin)]

Works great! only thing is there’s a path or tail that isn’t included with styling the opacity? I tried messing around with it but couldn’t get it to change color or opacity. Can you help?

Thanks Max!
Shawn Martin

[Max]

Ah, I see this!

I’ll talk to the devs and let you know if it’s feasible

[Max]

Thank you for waiting, @Shawn_Martin1!

Please try to use this code instead

global-styles,
:root {
  --message-bg: rgba(16, 16, 16, 1);
}

[class*="dialog-message__Background-sc"] * {
  color: #f2f2f2;
}

[class*="dialog-message__Background-sc"] {
  background-color: var(--message-bg) !important;
  position: relative;
  opacity: 0.6;
}

[class*="dialog-message__StyledTailIcon-sc"] {
  fill: var(--message-bg) !important;
}