Why this script wizebot-chat-history ?

I am a streamer on Twitch platform.

To display the chat in OBS, we can use a Wizebot widget overlay. This allows us to have a different chat while enjoying effects and features from Wizebot.
However when using some scenes in OBS with different chat configurations for each scene, the chat history is lost.

The purpose of this script is to maintain this history and ensure it is available even if we are not streaming.

How to prepare your AlmaLinux 9.3 or 9.4

Connect to a ssh with a root or similar account on your AlmaLinux :

dnf install epel-release

dnf module enable nodejs:20

dnf install nodejs -y

dnf install chromium -y

dnf install git -y

node -v

Install the script

With your ssh session :

cd /var

mkdir nodejs

cd nodejs

git clone https://github.com/AlexiaGossa/wizebot-chat-history

cd wizebot-chat-history

npm i puppeteer

npm install puppeteer-core

npm install -g npm

How to use the script

1. Go to your wizebot.tv admin panel

2. Open Widgets (overlays)

3. Open Widget chatbot

4. Create a new widget

5. Select the clean (on the right side) template

6. Import the following HTML code into the Wizebot HTML part :

<link href="https://fonts.googleapis.com/css?family=Inter" rel="stylesheet">

<div class="template message_div animated fadeIn">
    <div>
        <div class="sticker" style="background-color:{user_color};"></div>
        <div class="time">{message_time}</div>
        <div class="badges"></div>
        <div class="nicksimple">{user_display_name}</div>
        <div class="nick"></div>
        <div class="left"></div>
        <div class="message" msgtype="{message_type}"></div>
    </div>
</div>
<div id="messagescontainer">
<div id="messages" dir="ltr"></div>
</div> 

<!-- Horizontal order : dir="ltr" = Left to right / dir="rtl" = Right to left -->
<!-- TAGs available : {user_name} {user_display_name} {user_name_full} (Display name + Username) {user_color} {user_invert_color} (For background ?) {user_badges} {message_text} {message_time} {message_type} {message_color} (For announcement type) -->

7. Clear the CSS code in the Wizebot CSS part

8. Change the channel name in the Javascript code in the Wizebot JAVASCRIPT part to your channel name

   For my Twitch channel, I use : var channel_name = "alexia_vassiliki";

9. Click on "Copy the link" on the top of the Wizebot web page

10. With your ssh session, open the wizebot-url.txt with nano nano wizebot-url.txt and paste the link into nano.

Customize the design

Now you could modify the CSS file named wizebot-inject.css to apply your own design.

Don't forget to restart the nodeJS script after each modification.

Run the script

Configure your firewall / Open ports

Open 1 or 2 TCP ports on your system :

8080 for HTTP

8443 for HTTPS if you provide some certs

Want to immediately test the script ?

You want to execute the wizebot-chat-history script now ?

Run the command : node wizebot-node.js

You'll see the following text :

HTTP server started
Running...

Press CTRL+C to stop the script.

Install and start the script with the system

With your ssh session :

chmod +x wizebot-run.sh

We add the script into cron at startup, this command edit the cron with vim :

crontab -e

And adding the following line into the cron

@reboot sh /var/nodejs/wizebot-chat-history/wizebot-run.sh > /var/nodejs/wizebot-chat-history/wizebot-run.log

Note : If you prefer edit the cron with nano instead of vim

export VISUAL=nano

Or reselect VIM

export VISUAL=vim

Wizebot history URL parameters

We assume the script is running on a system using the IP 192.168.1.126 and using the HTTP 8080 port.

---

Basic display

> http://192.168.1.126:8080/

---

Clear history immediately

The History is immediately cleared. All opened webpages need to be reloaded.

Open a new browser tab and paste the following url.
> http://192.168.1.126:8080/?reset

Wait for tab loading and close it. Now you need to reload all other tabs and windows displaying the chat.

This feature is very usefull before starting a new live stream to clear all previous messages.

---

Display a flat color below the chatbot

There is 2 parameters : height and heightcolor :
height is chatbot text area in percents.
heightcolor is flat area color using a rgb value.

URL samples
> http://192.168.1.126:8080/?height=80%&heightcolor=rgb(255,230,200)
> http://192.168.1.126:8080/?height=63%&heightcolor=rgb(255,255,255)

---

Change text messages size

messagesize is message size in css units (I recommand you to use vw and vh).
More information about CSS units.

URL samples
> http://192.168.1.126:8080/?messagesize=2.5vw
> http://192.168.1.126:8080/?messagesize=4vh

---

Change the nickname size

nicksize is nickname size in css units (I recommand you to use vw and vh).

URL samples
> http://192.168.1.126:8080/?nicksize=4vw
> http://192.168.1.126:8080/?nicksize=5.2vh

---

Highlight a new message

Highlighting a new message is a feature very useful for streamer to highlight all new incoming messages.
highlight parameter without any value will enable the feature. The new incoming messages is blinked some few seconds to highlight them.

URL sample
> http://192.168.1.126:8080/?height=60%&heightcolor=rgb(255,255,255)&messagesize=3vw&nickname=5vw&highlight

---

Combine multiple parameters

You could combine multiple parameters... You must use ? for the first parameter and & for each of the following parameters.

URL samples
> http://192.168.1.126:8080/?height=80%&heightcolor=rgb(200,255,200)&messagesize=2vh&nickname=3vh
> http://192.168.1.126:8080/?height=60%&heightcolor=rgb(255,255,255)&messagesize=3vw&nickname=5vw