Custom on-screen chat for Streamlabs Chat Box or StreamElements Custom Widget.
- Replaces emoji with jdecked/twemoji.
- Adds pronouns next to the names of users if they have them setup through https://pr.alejo.io/.
- Changes the badges and emotes to use the best quality.
- Makes name colors readable.
- Adds support for emote effects by FFZ.
- Clears chat messages appropriatly whenever someone is timed out, banned or if their message is deleted and also clears the whole chat when the
/clear
command is used. - Mitigates a bug in Streamlabs Chat Box where the message is HTML encoded whenever
<
and>
are contained within the message and emotes where placed incorrectly. Note that this mitigation will not display ffz, bttv, and 7tv emotes, but at least the message is readable again.
Note that there is a StreamElements and a Streamlabs version.
- Go to your
Streamelements Dashboard
then toStreaming tools
and thenOverlays
. - Click on
NEW OVERLAY
. - Enter the overlay resolution (e.g. 1080p) and press
START
. - Click on the
ADD WIDGET
button on the top left or on the+
button on the bottom left. - Hover
STATIC / CUSTOM >
and then click onCustom widget
. - Click on the
OPEN EDITOR
button on the top left and if that is not here then click on the widget and thenSettings
->OPEN EDITOR
. - Click on the
HTML
tab and put the contents of the filestreamelements/custom.html
into the textbox overriding what was in there before. - Click on the
CSS
tab and put the contents of the filestreamelements/custom.css
into the textbox overriding what was in there before. - Click on the
JS
tab and put the contents of the filestreamelements/custom.js
into the textbox overriding what was in there before. - Click on the
FIELDS
tab and put the contents of the filestreamelements/fields.json
into the textbox overriding what was in there before. - Click on the
DATA
tab and put the contents of the filestreamelements/data.json
into the textbox overriding what was in there before. - Click
DONE
. - Move and resize the widget to your liking.
To customize the widget click on the chat widget and then open Settings
on the left.
There is a feature to replace or hide emotes as well, for details see the CHANGELOG.md and click on the widget and then Settings
-> OPEN EDITOR
-> JS
.
- Go to your
Streamlabs Dashboard
then toAll Widgets
and then to theChat Box
. - Set
Enable Custom HTML/CSS
toEnabled
. - Click on the
HTML
tab and put the contents of the filestreamlabs/custom.html
into the textbox overriding what was in there before. - Click on the
CSS
tab and put the contents of the filestreamlabs/custom.css
into the textbox overriding what was in there before. - Click on the
JS
tab and put the contents of the filestreamlabs/custom.js
into the textbox overriding what was in there before. - Press the
Save Settings
button at the end of the page.
Streamlabs Customizations:
To adjust the padding on the left side of messages with more than one line do the following:
- Go to your
Streamlabs Dashboard
then toAll Widgets
and then to theChat Box
. - Click on the
Add Custom Fields
button on the bottom right corner. - Click on the
Edit Custom Fields
button on the bottom right corner. - Replace the contents of the textbox with the contents of the file
streamlabs/custom.json
. - Press the
Update
button on the bottom right corner. - Adjust the padding by using the slider and save the settings.
To use all features except displaying the pronouns of users do the following:
- Go to your
Streamlabs Dashboard
then toAll Widgets
and then to theChat Box
. - Click on the
JS
tab. - Replace
"showPronouns": true,
with"showPronouns": false,
and save the settings.
To hide known global frog emotes from bttv and 7tv do the following:
- Go to your
Streamlabs Dashboard
then toAll Widgets
and then to theChat Box
. - Click on the
JS
tab. - Replace
"showFrogEmotes": true
with"showFrogEmotes": false
and save the settings.
There is a feature to replace or hide emotes as well, for details see the CHANGELOG.md.
To build the overlay from source you need the following requirements:
- Make sure
node
andnpm
is installed for example by installing Node.js.
Install dependencies:
npm install --include=dev
To clean the dist
folder first use:
npm run clean
To build the sources after cleaning the dist
folder run:
npm run build
This will compile the files into the dist
folder.
To format the files use:
npm run fmt
To check the sources for compilation or linter errors use:
npm run check
The following files have their license information within the file itself:
src/features/ffz.ts
src/features/ffz.css
streamlabs/custom.css
streamlabs/custom.js
streamelements/custom.css
streamelements/custom.js
All other fies are distributed under the MIT license.
See COPYING for details.
This project is not affiliated with or endorsed by Streamlabs, StreamElements, jdecked/twemoji, pr.alejo.io, nor FrankerFaceZ.