Features Back to top

  • Custom animation popups.
  • Supports /clear command.
  • Smoothscroll animation.
  • Supports both Twitch and Youtube Live chat.

Download Back to top

Download all the necessary file via Ko-fi. All the files can be opened using Notepad or any text editor. Simply unzip the file, drag and drop the individual file into the notepad app.

Download

Installation Back to top

  1. Open your Streamlabs web dashboard and proceed to chat widget section.
  2. Look for Enable Custom HTML/CSS and tick the enabled box.
    3. Streamlabs custom fields section
  3. After that, few new fields will be available as shown below.
    4. Streamlabs custom fields section
  4. Extract the zip file you downloaded from Ko-fi. In TXT the folder contains all the necessary codes needed which is (HTML, CSS, JS & Custom-Field). These code files can be open using notepad or any other text editor. On Streamlabs widget page, click on each tab and replace the content with their respective code. HTML on the HTML tab, CSS on CSS tab and so on.
  5. For Custom Fields, if it is your first time editing this field, you have to click on Add Custom Fields > Edit Custom Fields > paste the code in and then click Update.
  6. The Custom Fields tab should now look like the example shown below.
    7. Streamlabs custom fields section
  7. You can now customize the chat box.

Customization Back to top

  1. On Custom Fields section, you can customize the chat box and make changes as you please.
  2. But, before that, make sure your Streamlabs settings are set as recommended below.

Streamlabs Settings Back to top

  1. Themes Ignore
  2. Badges Choose as you please
  3. Extra Emotes Recommended to enable
  4. Background Color Ignore
  5. Text Color Ignore
  6. Font Size Ignore
  7. Hide Message After Always show messages
  8. Chat Delay Choose as you please
  9. Hide Chatter Recommended to disable
    10. Hide Chatter Option

    If you choose to enable this option, please make sure to use JS-Hide-Chatter file instead of normal JS file in the JS tab. You must also enable both Hide Common Chat Bots & Hide commands starting with `!` option.

    If you use custom made or named bot, you have to find code snippet below in the JS file and insert your bot name(s) into it.

    const botNames = ["nightbot","moobot","xanbot","deepbot","vivbot","phantombot","streamelements"];
  10. Muted Chatters Recommended to disable
  11. Custom Bad Words Recommended to disable
  12. Enable Custom HTML/CSS Enabled

Color Picker Back to top

8 digits hex color picker. Use the slider to set both color and it's transparency level.

Support Back to top

Please post your issue on Discord.

Other themes Back to top

Click here to view other themes.