Using KapChat on Twitch

What is KapChat?

KapChat is a hosted service that can be used to add Twitch chat to your stream. Designed to reflect Twitch chat, it features chat badges, user name colors, emotes and real-time removal of messages.

With eight built-in themes, KapChat has a design theme that is sure to fit your stream. You can even customize fine details using full CSS support. KapChat also displays all your favorite FrankerFaceZ and BetterTTV emotes, so you can never miss a SourPls in your chat.


Features

Twitch protocols

  • Chat tags
  • Deleted messages
  • Emotes
  • Subscriptions
  • User colors

Customization

  • Themes
  • Full CSS support (for advanced users)
  • Chat fade
  • Show/hide bots

Third party emote support

  • BetterTTV emotes
  • FrankerFaceZ emotes

Adding KapChat to stream

Adding KapChat couldn’t be easier with common streaming software.

OBS

Head over to the KapChat page and click the green install button. Kapchat uses a CLR Browser plugin, which has been added with a batch file to make the installation easier. After downloading and unzipping the file, install the plugin by double-clicking the install.bat file.

After installing the OBS browser plugin, you will get to create your chat display. Clicking next on the KapChat Installation will bring you to a page with all sorts of customization options.

  • Username: This is the channel in which the chat will be taken from. Use the channel name and not the Twitch link.
  • Chat Fade: The checkbox enables or disables the chat fade option, which will fade out messages over a selective amount of time.
  • Chat Fade Length: In seconds, the default time is 30 seconds. Feel free to play around with these settings. If the Chat Fade checkbox is unchecked, you can ignore this setting.
  • Show Bots: By default KapChat ignores bots. Custom bots can be added on the BTTV Manager Page. Common bots (e.g. Nightbot, Moobot, Xanbot) will already be recognized and do not need to be added. Enabling this will show all bot messages.
  • Chat Theme: Select a chat theme from the list of eight. You can preview the display by clicking the Preview button.

When all the settings are to your liking, you can continue. A hosted URL will be generated and this will be copied to OBS.

To Display: Add a new source for OBS and select CLR Browser. Give it a name of your choosing.

  • URL: Paste the hosted URL generated by the KapChat page into the URL textbox.
  • Dimensions: If you’re unsure of a size, NightDev suggests a height of 600px and a width of 300px. You can then edit these to your liking and placement in your overlay.

Congrats! You now have a chat overlay in your stream.

If you ever need to customize any of the main features (e.g Chat Fade, Theme), head back to the KapChat site and get a new hosted URL. Then replace the old URL in your source.

OBS MultiPlatform

The OBS MultiPlatform brower olugin can be found here. An installation guide is included.

XSplit

XSplit has a built-in web plugin, so there is no need to download anything. Complete the same steps in the OBS guide, skipping everything OBS related, and get the hosted link.

In XSplit, navagate to Add > Other > Webpage URL. Paste the generated URL into the popout box. From here you can edit the size and placement within XSplit.

Custom CSS (Advanced)

If the default themes don’t have something you are looking for, you can change them using custom CSS. Important: Custom CSS is for advanced users. NightDev will not offer support for CSS related issues.

NightDev has provided CSS selectors for people to improve upon on. They can be found on the fourth page of the installation directions.

To access in OBS, click on the CSS tab at the top of the CLR Browser settings.

To access on XSplit, right-click the webpage source > Enable Custom CSS checkbox in HTML section > Edit CSS.

For useful CSS and KapChat tips, check out the NightDev Forums.


KapChat and NightDev Fourms are owned and operated by NightDev, LLC. 
XSplit is owned by SplitmediaLabs, Ltd. 
OBS is an open-source software maintained on their Github.