Streamer.bot Chat

Features

Streamer.bot ships with a built-in chat client to provide you with direct integration between chat and your bot's actions.

Multi Stream Support

By default, the chat window will enable a tabbed view for all broadcaster accounts you have connected.

While on the combined chat view, you can toggle which chat(s) to send to:

Shortcuts

Keyboard shortcuts exist to easily direct your chat messages to/from different accounts:

Command Menus

Autocomplete menus exist for the following options:

Slash Commands

Slash commands contain a set of actions that are directly integrated with your Streamer.bot instance.

For example, you can type /action to reveal a menu with all actions in your Streamer.bot instance to directly execute.

Some commands support Multi-Platform execution, such as /title which can set the title of both Twitch and YouTube broadcasts simultaneously.

Streamer.bot Commands

For commands to appear in the command menu they must be configured with:

• Set Location to Start
• Start with the ! prefix

When selecting a command, Enter will submit the command immediately to chat.

If you wish to add input for a command, use Tab to select the command and continue typing.

Emote Autocomplete

Emote autocomplete can be triggered at any time and contains emotes from the following sources:

• Twitch
• YouTube
• 7TV (Twitch & YouTube)
• FFZ (Twitch)
• BTTV (Twitch & YouTube)

To select an emote and continue typing, you can use either Enter or Tab

Quick Actions

In settings, you can configure Quick Actions for 3 different sources.

Quick Actions allow you to immediately execute any of your Streamer.bot actions with custom arguments.

Global

Global Quick Actions are displayed in the bottom-left of the chat window and can be executed at any time.

User

User Quick Actions are displayed in the View User popup windows that display when you click on a username in chat.

Additional arguments are populated with the usual user args for the respective platform.

Message

Per-message quick actions appear when you hover over a specific chat message.

Additional arguments are populated with the usual message args for the respective platform.

Event

Event quick actions appear when you hover any event message

Highlights

Message and event highlights can be customized for a variety of events.

OBS Browser Dock

You can dock the Streamer.bot chat in your OBS studio instance.

Setup

Settings

All settings in OBS Studio docks and browser sources are shared with each other, but they are separate from the internal Streamer.bot chat window.

Sync from Streamer.bot

You can sync settings from the main Streamer.bot chat window in Settings > General

This is a one-way sync, from Streamer.bot to the docked chat and will override all existing settings on the docked chat.

Limitations

Docked chat is limited in some ways due to requiring the WebSocket Server to function independently of Streamer.bot:

• Local Access 127.0.0.1 might be required
  • This depends on the security settings of your web browser or environment
    • i.e. modern web browsers will block connections to other IP Addresses
  • The recommended solution to work around this is with secure tunnels
    • e.g. Tailscale Serve, Cloudflare Tunnel, ngrok, etc...
• Built-in moderation actions are removed
  • Custom quick actions can be used as a workaround for most of these
• Most built-in slash commands are removed

Overlay

Chat overlay mode allows you to easily add chat as a browser source in OBS Studio or other streaming software.

Setup

Custom Styles

Currently, customization of chat and overlay requires custom CSS overrides.

Some data-attributes have been added to the DOM for easier targeting of specific elements.

Chat Messages

These attributes are available specifically on chat message rows.

Events

These attributes are available on all rows visible in chat, including chat messages.

Examples

Below are some example snippets showing how to target these attributes in your CSS:

/* Hide all rows originating from Twitch */
[data-platform="twitch"] {
  display: none !important;
}

/* Hide messages from a specific username */
[data-username="someannoyinguser69"] {
  display: none !important;
}

/* Highlight messages from a specific user */
[data-username="bestmodever"] {
  background-color: rgba(255, 215, 0, 0.2);
  border: 1px solid gold;
  border-radius: 4px;
}

/* Custom CSS for Twitch Follow events */
[data-event-source="Twitch"][data-event-type="Follow"] {
  background-color: rgba(100, 65, 165, 0.2);
  border: 1px solid rebeccapurple;
  border-radius: 4px;
}