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, username colors, emotes and real-time removing of messages. With 8 built-in themes, KapChat has a design theme that will fit your stream. You can even customize fine details using the Full CSS Support. KapChat also displays all of your favorite FrankerFaceZ and BetterTTV emotes so you can never miss a SourPls in your chat.
- Chat Tags
- Deleted Messages
- Full CSS support (for advanced users)
- Chat Fade
- Show/Hide Bots
Third Party Emote Support
- BetterTTV Emotes
- FrankerFaceZ Emotes
Adding to Stream
Adding KapChat couldn’t be easier with common streaming software.
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 install easier. After downloading, unzipping the file, install the plugin by double clicking the install.bat file.
After installing the OBS browser plugin you now get to create your chat display. Clicking next on the KapChat Installation will bring you to a page with all sorts of customization.
- 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 select amount of time. This feature is very useful if you don’t want chat lines stuck there until someone sends a message.
- Chat Fade Length: In seconds the default time is 30 seconds, feel free to play around with these time 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 in the BTTV Manager Page, common bots (e.g. nightbot, moobot, xanbot) will already be recognized and do not need to be added. Checking this will show all bot messages.
- Chat Theme: Select a chat theme from the list of 8. 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.
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 600and a
width of 300. You can then edit these to your liking and placement in your overlay.
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 and replace the old URL in your source.
OBS MultiPlatform Brower Plugin can be found here and contains an install guide.
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. And paste the generated URL into the popout box.
From there you can edit the size and placement within xsplit.
Custom CSS (Advanced)
If the default themes don’t have something your looking for you can change them using Custom CSS. Custom CSS is for advanced users and 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 4th page of the install directions.
To access on 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 on HTML section -> Edit CSS.
For useful CSS and KapChat tips, check out the NightDev Fourms.