Bubble Chat

 Bubble Chat 1.1.0

✅ This widget has passed review and has been verified to follow the Widget Gallery Guidelines.

cafeaunat
she/her

New member
Developer
Artist
Streamer
cafeaunat submitted a new resource:

Bubble Chat - Chat overlay with bubble appearance

Bubble Chat by @cafeaunat 🫧
View attachment 94

[ this chat was based on zaytri's slime chat widget https://forums.slime2.stream/resources/slime-chat.10/ ]
this means most features from slime chat also applies to bubble chat, such as pronouns, dynamic emote sizes, filters, animations, chat alignment etc.

this thread walks you through how to set up a slime2-widget...

Read more about this resource...
 

MavisDeLuna
they/them

Moon Monarch
Artist
Streamer
Hello! I've been toying with this, but when adjusting the colors on the settings, they do not save. They reset right back to the "pink" template, even after correctly following the instructions and placing the "bubble-chat-data.js" in the "assets" folder. It continues to show as pink in OBS.

Nothing I seem to be doing is fixing it, so I'm worried it's a bug. Thanks for making this adorable widget!
 
Last edited:

Zaytri
she/her

Glitch Witch
Admin
Developer
Streamer
^ @cafeaunat I've confirmed that it's a bug in your code, not with slime2 or a UX issue because the other settings save fine, while custom colors don't. Might work better if you had a separate button to load a selected theme, rather than controlling it with the selection value directly, or a "custom" selection that doesn't try to inject anything.
 
OP
OP
cafeaunat

cafeaunat
she/her

New member
Developer
Artist
Streamer
hi! thank you for letting me know, and thank you zaytri for confirming the bug. i've implemented a quick-fix that should solve the issue. 📦

one caveat is that if you have selected a custom color and then switch between light or dark mode, it will overwrite the color values to the color theme's colors. just something to look out for. i don't think this was introduced with the quick-fix, and rather something that was there all along. will look into this in the future 🌷
 

SamLikesHam
She/They

New member
I really dont know if im doing something wrong here but the bubbles arent showing my alignment settings in obs. I change it to align to the right and the bubbles themselves move to the right but they are still aligned left if that makes sense. I am downloading the settings after changing and putting it in the folder and then refreshing it on OBS but its not updating

showing correct in browser
1702574261578.png

showing on obs after updating the settings and putting the new settings in the folder.
1702574273821.png
 

richelle_png
she/her

New member
Streamer
hiii~

i'm not sure where i've gone wrong with setting up, but the chat bubbles seems to be confined to smaller dimensions although i have them set to 1920x1080 in the obs source settings? but in the browser setup it looks fine.

these are some of the things i've tried-

changing the dimensions to a range of different sizes
refreshing the source
deleting the custom CSS in the obs source settings
resaving the widget data
deleting and re-adding the source to obs

unfortunately nothing has worked 🥴
 

Attachments

  • 1.png
    1.png
    65 KB · Views: 9
  • 2.png
    2.png
    11.6 KB · Views: 9
  • 3.png
    3.png
    150 KB · Views: 9

komiburne
They/Them

New member
Hello! I'm having trouble with the Bubble chat setting not being saved. I am not sure if I am doing something right.
 
OP
OP
cafeaunat

cafeaunat
she/her

New member
Developer
Artist
Streamer
Hello! I'm having trouble with the Bubble chat setting not being saved. I am not sure if I am doing something right.
hi there! are there any specific settings that seems to not be saved? or just all of them?

if you haven't already, you can check out the widget setup guide here: https://forums.slime2.stream/resources/widget-setup.3/
but in short, when you click the "save widget data" button, you will get a download of a file called bubble-chat-data.js make sure that this file is not called bubble-chat-data.js (1) or similar!

you then want to make sure that bubble-chat-data.js is in the same folder as the overlay-bubble-chat.html , it should look like this

1707768460716.png

it's not only easier in my personal opinion, but you have to open overlay-bubble-chat.html in your browser, and edit everything there. the save widget data-button will not work within OBS! then when you import it to OBS you make sure to set the height and width, and you can also make sure to update the overlay with the Refresh-button in OBS

1707768622756.png
 
Back
Top