Chat Bubble Plugin - free useful plugin for styling chat

Hey Bubblers,

Releasing another free plugin that we have used internally for a bit.

If you have ever tried to make a chat app, you have discovered that it is impossible to make the text element expand to fit its content.

This element replaces the text element in your chat or messaging feature and will expand to fit the text inside of it.

(this plugin is admittedly a little rough, we may add more dynamic features if enough people request them)

Link to plugin here

Link to editor with sample implementation here

Ryley

9 Likes

Thank you for informing.

Hey @ryley.randall

first thank you for sharing this magical thing with community!

Small thing… It looks like the border radius is not working. Tried to override with CSS + !important but nothin :confused:

Please have a quick look if you find the time, thanks :slight_smile:

Is it possible to override the plugin and make the right side of chat go to the right? Or Bubble won’t let me do that?

#chat_right {
float: right !important;
}

that way we could get something like this (“generation X”)

Select the text alignment to be right aligned instead of left. That should do it for you!

thanks,
Ryley

close… text has to be left aligned

[edit] I’m such a dummy, I think that was your suggestion

not the perfect solution but will work for now

image

Just add option to select bubble side. So select right and then make font alignment back to left.

Thank you for the update!!

I’m having an issue to change the background color:
image

Is it possible to fix?

Is possible add different color for links please?

@ryley.randall Great plugin!
Do you know a way to select a gradient background color ? and also how to set the border roundness independently?

Cheers, Peter

1 Like

Hi @ryley.randall this plugin looks great, I’m just wondering how you can have links clickable using it since it doesn’t seems to have the option you have on text
image

Do you know how to manage links using it ?

Have a nice day !
Benoît

1 Like

Desculpe minha ignorância, mas não entendi como inserir as mensagens utilizando o plugin Chat Bubble. Tenho que colocar um input para entrar com as mensagens, como funciona ?