https://github.com/h37ix/yuuki-bullet-chat
a StreamElements Custom Overlay for Bullet Chat
https://github.com/h37ix/yuuki-bullet-chat
css js json livestream livestreaming obs streamelements
Last synced: 5 months ago
JSON representation
a StreamElements Custom Overlay for Bullet Chat
- Host: GitHub
- URL: https://github.com/h37ix/yuuki-bullet-chat
- Owner: H37IX
- Created: 2025-05-03T14:23:30.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-05-07T17:39:38.000Z (5 months ago)
- Last Synced: 2025-05-08T23:53:03.961Z (5 months ago)
- Topics: css, js, json, livestream, livestreaming, obs, streamelements
- Language: JavaScript
- Homepage:
- Size: 11.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# StreamElements Bullet Chat Widget by H37iX & Yuuki
A collaboration with [Yuuki](https://yuukitrap.carrd.co/) to build a customizable bullet chat widget for use as a StreamElements Custom Overlay. This widget displays chat messages scrolling across the screen with various animation and styling options. Created after Yuuki noted the lack of a fully functional StreamElements overlays for bullet-style chat. We were unable to quickly find a free/shared version of the code needed to make this work so we are posting it here for others who may want to use it.
## Example
## Features
- **Direction Control**:
- Choose whether messages come from the left side, right side, or randomly from both sides
- **Animation Controls**:
- Speed: Control how fast messages move across the screen
- Duration: How long messages stay visible
- Fade Out: Toggle whether messages fade out at the end
- Fade Duration: Control how long the fade out takes
- **Styling Options**:
- Font Family: Select from Google Fonts
- Font Size: Customize the text size
- Username Color: Custom color for usernames (with opacity control)
- Message Color: Custom color for message text (with opacity control)
- Background Color: Optional message background with customizable color and opacity
- **Preview Feature**:
- Simple checkbox option to enable/disable the style preview
- Creates a sample message showing how your settings will look
- Preview is clearly labeled with "[PREVIEW]" text
- Only visible in the editor (not seen by viewers) unless you hit SAVE while checkbox enabled
## Installation
1. **Create a New Custom Widget**:
- Go to your StreamElements dashboard
- Navigate to "My Overlays"
- Open an existing overlay or create a new one
- Click the "+" button to add a new widget
- Select "Custom Widget"
2. **Add the Required Files**:
- In the Custom Widget Editor, you'll see tabs for HTML, CSS, JS, FIELDS, and DATA
- Copy the contents of each file in this repository to the corresponding tab:
- `html.html` → HTML tab
- `styles.css` → CSS tab
- `script.js` → JS tab
- `fields.json` → FIELDS tab
3. **Save and Add to Overlay**:
- Click "Done" to save the widget
- Resize and position the widget as needed in your overlay
- Make sure to hit SAVE after each change you want to see in OBS or your overlay preview window in a browser
## Customization Options
### Message Direction
- **Left → Right**: Messages appear from the left side and move right
- **Right → Left**: Messages appear from the right side and move left
- **Both (Random)**: Messages randomly appear from either side
### Animation Settings
- **Speed**: Controls how fast messages move across the screen (1-50 pixels per frame)
- **Duration**: How long messages stay visible before disappearing (1-10 seconds)
- **Fade Out**: When enabled, messages fade out at the end of their duration
- **Fade Time**: Controls how long the fade out animation takes (0.1-5 seconds)
### Styling Options
- **Message Font**: Choose from hundreds of Google Fonts
- **Font Size**: Set the text size (10-100 pixels)
- **Username Color**: Custom color for usernames with opacity control
- Option to use Twitch's native username colors instead of custom colors
- **Chat Text Color**: Custom color for message text with opacity control
- **Background Color**: Custom color for message background with opacity control
## Extra Features Added
### Message Spacing
- Messages are automatically spaced vertically to prevent overlap
- Minimum spacing between messages: 50 pixels
### Message Deletion
- Supports moderator message deletion
- Automatically removes messages when deleted by moderators
- Handles both single message deletion and user message deletion (timeout/ban)
## Troubleshooting
- If messages aren't appearing, check your browser console for any error messages
- Make sure your chat is connected and working in StreamElements
- Try refreshing the widget if settings changes aren't taking effect and be sure to save any changes in stream elements before trying to preview them
## Need Help?
For more information on custom widgets in StreamElements, refer to:
- [StreamElements Custom Widget Documentation](https://docs.streamelements.com/overlays/custom-widget)
- [StreamElements Custom Widget Events](https://docs.streamelements.com/overlays/custom-widget-events)
- [StreamElements Widget Structure](https://docs.streamelements.com/overlays/widget-structure)
-H37🧬