Stream Widgets

Hexeum Chat Widget Install Guide

Table of Contents

Table of Contents

To make the process as simple as possible, we have created this guide to help you setup your chat widgets, along with details on customisation.

Video Tutorial for Installation & Customisation

Installing Chat Widget

  • Inside of your main downloads folder you see 4 different text files titled: html, css, js and fields. Keep these files handy as we will be using them in the next stage.
  • Head over to your overlays page on Streamelements and click the New Overlay button.
  • Choose 1080p resolution and hit start.
  • On the left click Add widget button then choose Static/Custom -> Custom Widget
  • Expand the position Position, size and style section and change the width & height to 800 pixels.
  • Now expand Settings and Open Editor.
  • You’ll notice the tab names correspond with the names of the text files in your download.
  • Copy the text from each file into the corresponding tab. e.g open HTML text file and paste it into the HTML tab.
  • Click done, then save using the button at the top right of the editor.

Adding Chat Widget to OBS

  • Select the Copy Overlay URL button at the top right of Streamelements
  • Launch OBS and add a new Browser Source to the scene.
  • In the browser source properties, paste the streamelements overlay URL into the URL field.

Changing Dimensions

In the case you want to change the dimensions of the widget e.g you want to increase it’s width or height to better fit your layout, you can do this quite easily.

  • Open up the chat widget in Streamelements and select it in the editor.
  • On the left, expand position, size & style, now change to your desired width and height.
  • Save the overlay using top right button in the editor.
  • Now, in OBS, right click the browser source you use for the chat widget, select properties.
  • Change the width and height of browser source to match what you set in Streamelements.

Customizing Chat Widget

The chat widget has a bunch of customisation options. You can use this section as a quick reference for what each of them does.

Preview

Send Test Message: Sends a fake message for the purpose of testing.

Preview Mode: This enables a test version of the chat widget appear so you can quickly see the changes you make. Make sure this setting is set to OFF before going live.

Alignment

Horizontal Alignment: Changes the chat message direction as well as position from left to right.

Vertical Alignment: New messages will appear from top or bottom based on this alignment setting.

Alerts

Enable Integrated Alerts: Acts as the master switch for integrated alerts, allowing you to toggle all alerts on or off, overriding each alerts individual settings.

Enable Event Message: Choose whether or not you want to display the users message along with the alerts.

Active Events: You can enable or disable specific events from displaying in chat using these settings.

Font Options

Message Font: Choose a google font from the dropdown to change the style used for messages. This font setting also changes the text used by alerts.

Username Font: Changes font of the username in chat messages (not alerts). This will also update the font used for displaying pronouns.

Message Font Size: Sets size of the message text and alerts text.

Username Font Size: Sets size of the username text and pronouns.

Message Font Weight: Dropdown to choose thickness of the message text and alerts text.

Username Message Weight: Dropdown to choose thickness of username text and pronouns.

Chat Options

Hide Commands: Enable this to hide commands from displaying in chat.

Muted Users: Enter a comma seperate list of usernames here. Those users will not have their messages shown in chat.

Enable Pronouns: Display a users pronouns beside their name. Pronouns can be set by Twitch users, using pronouns.alejo.io.

Big Emotes: THICC emotes in chat

Fade Out Messages: Enable this to fade messages after a certain amount of time has passed.

Hide After Seconds: Works with fade messages toggle, and sets duration after which messages will fade.

Display Badges: Toggle Twitch badges that display next to usernames.

Max Messages: Choose a max number of messages to display at any time in chat. Setting this to 999 will allow unlimited messages.

Chat Colors

Name color: Color picker for usernames.

Message color: Color picker for the chat bubble message.

Message Background Color 1: Message bubble background uses a gradient made of two colors. This is the first color.

Message Background Color 2: 2nd color for the the message background gradient.

Name Background: Color picker for the background where usernames are displayed.

Event Background Color: Color picker for the integrated alerts background color.

Event Text Color: Color picker for the event text.

Decoration Color: Color picker for any decorative elements displayed beside the alerts.

Effects

Decoration Glow: Toggle glow on or off for decorative elements.