Streamer Speech Bubble

This a modified version of @Zaytri's Chat Bubbles widget.

It displays speech bubble(s) like the original but with modified settings and styling options that are aimed at displaying just the chat messages from the streamer.

Made for all silent streamers who are afraid to speak!

Modified Features

Message Box:

• Added Individual Corner Rounding Customization;
• Added Individual Padding Customization;
• Added Background 3-Color Gradient and Rotation Customization;
• Added Message Shadow Color, Shadow Offset and Shadow Blur Customization;
• Removed Themes;
• Removed Corner Type;
• Removed Dark Mode;

Username Box:

• Added Enable/Disable Option;
• Added Individual Corner Rounding Customization;
• Added Individual Padding Customization;
• Added Background 3-Color Gradient and Rotation Customization;
• Added Username Shadow Color, Shadow Offset, Shadow Blur Customization;
• Added Show/Hide Username Option;
• Added Show/Hide Timestamp Option;
• Added Timestamp Locale, Timezone and Trim (for removing the date) Customization;

Emotes

• Added Support for All Channel and Global Emote Providers: Twitch, BetterTTV, FrankerFaceZ and 7TV.

Message Filters

• Removed Hide first-time chatters? Option;
• Removed Minimum messages a user must send Option;

User Filters

• Removed Show messages from everyone? Option;
• Removed Show message from subscribers? Option;
• Removed Show message from VIPs? Option;
• Removed Show message from moderators? Option;

Misc.

• Other options may have been rearranged into different sections.

Installation

1. Add the original Chat Bubbles widget overlay using the button below:

2. Press Edit button of the added overlay;

3. Select the widget;

4. Press Settings;

5. Press Open Editor;

6. From this repo copy the content of /source/StreamerChatBubble_HTML.html;

7. Remove all content in HTML tab in Overlay Editor and paste what you copied before;

8. From this repo copy the content of /source/StreamerChatBubble_Style.css;

9. Remove all content in CSS tab in Overlay Editor and paste what you copied before;

10. From this repo copy the content of /source/StreamerChatBubble_Script.js;

11. Remove all content in JS tab in Overlay Editor and paste what you copied before;

12. From this repo copy the content of /source/StreamerChatBubble_Fields.js;

13. Remove all content in Fields tab in Overlay Editor and paste what you copied before;

14. Press Done button;

15. Press Save button;

16. [Optional] Set your twitch username in Settings -> User Filters -> Show message only from these users;

17. Now the Streamer Speech Bubble widget is ready! You can now customize it and tweak the settings to your liking and duplicate the widget into your existing overlays (or use this one)!

Credits

Zaytri - Original developer of Chat Bubbles widget.
GreenComfyTea - Developer of the modified Streamer Speech Bubble version.

Support

You can support me by donating! I would appreciate it! But anyway, thank you!