Standard Presets

Pre-made presets for common alerts

Preset 1: Follow

--icon-unicode: "\\f234";
--bits-icon: none;
--alert-identifier-name: "follow";
--bubble-text-content: "+1";
--icon-background-color: #e74c3c;
--alert-identifier-color: #e74c3c;
--bubble-container-color: #e74c3c;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;

Preset 2: Donation

--icon-unicode: "\\f4c0";
--bits-icon: none;
--alert-identifier-name: "donation";
--bubble-text-content: "{amount}";
--icon-background-color: #02b85b;
--alert-identifier-color: #02b85b;
--bubble-container-color: #02b85b;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;

Preset 3: Raid

--icon-unicode: "\\f0c0";
--bits-icon: none;
--alert-identifier-name: "raid";
--bubble-text-content: "{count}x";
--icon-background-color: #00ff80;
--alert-identifier-color: #00ff80;
--bubble-container-color: #00ff80;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;

Preset 4: Host

--icon-unicode: "\\e595";
--bits-icon: none;
--alert-identifier-name: "host";
--bubble-text-content: "+{amount}";
--icon-background-color: #d0e73c;
--alert-identifier-color: #d0e73c;
--bubble-container-color: #d0e73c;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;

Preset 5: Sub

--icon-unicode: "\\f521";
--bits-icon: none;
--alert-identifier-name: "subscriber";
--bubble-text-content: "{months}x";
--icon-background-color: #1db0dc;
--alert-identifier-color: #1db0dc;
--bubble-container-color: #1db0dc;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;

Preset 6: Gifted Sub

--icon-unicode: "\\f06b";
--bits-icon: none;
--alert-identifier-name: "gifted sub";
--bubble-text-content: "{amount}x";
--icon-background-color: #c620ff;
--alert-identifier-color: #c620ff;
--bubble-container-color: #c620ff;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{gifter} ➡ {name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;

Preset 7: Bits

To be able to use bits you have to set “icon-unicode” to “none” and use the

variable “--bits-icon: var(’bit-variable-name’)” so it shows the bits icon instead of the icon from Font-Awesome.

Bits colors and variables names

"Bit Variables":
1 bit → --bit-1
100 bit → --bit-100
1000 bit → --bit-1000
5000 bit → --bit-5000
10000 bit → --bit-10000
100000 bit → --bit-100000

"Bit Colors":
1 bit: #9f9f9f
100 bit: #c574ff
1000 bit: #02dedb
5000 bit: #478cfe
10000 bit: #ff6246
100000 bit: #feb90b

--icon-unicode: none;
--bits-icon: var(--bit-1);
--alert-identifier-name: "cheer";
--bubble-text-content: "{amount}x";
--icon-background-color: #9f9f9f;
--alert-identifier-color: #9f9f9f;
--bubble-container-color: #9f9f9f;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;

Preset 8: Merch

--icon-unicode: "\\f54e";
--bits-icon: none;
--alert-identifier-name: "merch";
--bubble-text-content: "{product}";
--icon-background-color: #47d1b1;
--alert-identifier-color: #47d1b1;
--bubble-container-color: #47d1b1;
--alert-box-right-side-color: whitesmoke;
--alert-user-text: "{name}";
--message-background-color: none;
--fontFamily: "Open Sans", sans-serif;
--alertAnimation-Entry: var(--bounce-in-fwd);
--alertAnimation-Exit: var(--scale-out-top);
--iconAnimation: var(--pulsate-bck);
--user-message-animation-Entry: var(--text-focus-in);
--user-message-animation-Exit: var(--text-focus-out);
--alert-box-positon-x: center;
--alert-box-positon-y: start;