1. Open a console in a folder/directory of your choice.
2. git clone https://github.com/Treee/twitch-overlay - Clone the repository Requires Git
3. npm install - Install dependencies. Requires NodeJS
4. npm run build - Build the code.
5. Locate ./build/overlay-widgets/emote-widget/index.html file. This is the browser source for the emote widget overlay. Open it in the browser to test.

• Note - The above file assumes there is a server listening on the port defined in ./src/overlay-widgets/emote-widget/index.ts on line 8

Thie file ./src/overlay-widgets/emote-widget/emote-widget-config.ts contains all the configurations for the overlay. These are controlled by query string parameters.

Example - ./build/overlay-widgets/emote-widget/index.html?channel=myTwitchChannel&botMode=true

In the above example channel and botMode are configuration keys and myTwitchChannel and true are values.

Query String Example

./build/overlay-widgets/emote-widget/index.html?botMode=true&showGlobal=true&showBttv=true&channel=myTwitchChannel

Hard Coded Example

export class EmoteWidgetConfig {
    channel: string = 'itsatreee';
    defaultImageUrl: string = 'https://cdn.betterttv.net/emote/5d3c7708c77b14468fe92fc4/2x';
    showTwitch: boolean = true;
    showBttv: boolean = true;
    showGlobal: boolean = false;
    botMode: boolean = false;
    totalEmotes: number = 100;
    secondsToRain: number = 10;
    secondsToWaitForRain: number = 23;
    numTimesToRepeat: number = 1;
}

Follow the steps here.

./src/overlay-widgets/emote-widget/emote-widget-config.ts

The name of the twitch channel whose emotes to use.

A boolean true/false to determine if the overlay connects to the emote server.

The url of an image to use in the event emotes are not available.

A boolean true/false to include Twitch emotes in the list of drawable emotes.

A boolean true/false to include BTTV Channel emotes in the list of drawable emotes.

A boolean true/false to include BTTV Global emotes in the list of drawable emotes.

When botMode is false, how long do emotes rain on the screen.

When botMode is false, how long do emotes wait before raining again on the screen.

When botMode is false, how many times should the overlay repeat its loop.