How to Setup Notifications/Widgets

This version (2022/09/18 10:16) was approved by expertsonline.

If you have difficulty setting this up, or have any questions or suggestions, please post on the forums.

Notifications are VIP Only

To get VIP, you will need to make a payment of $5/month Here

This guide will run you through setting up notifications/widgets from Deepbot onto your streaming software.

Pre-requisites

A. OBS Classic - OBS Website
B. CLR Browser Plugin - OBS Forum Thread
- Latest CLR Browser 32bit - Download Link
- Latest CLR Browser 64bit - Download Link
C. You need to update your MS Visual C++ Run Times to 2013 - Here (Click download and choose x86 or x64 accordingly.)
D. Latest version of .NET Framework:
- Web install: Here
- Offline install: Here
E. Once you have finished all the steps listed above, you can now move onto the next steps.

Note: Having difficulty getting this installed? Check out this video here explaining the plugins and the install process

Setup

A. For Follows/Donation Notifications, you will need to “Enable Notifications/On-Screen Notifications” as well as check mark the box “OBS CLR Browser”. Both options can be found on the “Config Tab” > “Follower/Donation Notification Options”.
B. Open OBS > “Add New Source” > Select “CLR Browser”
C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

Notification/Widget Name	Default Version	Second Version
Cheer	Here
Cheer Goal Tracker	Here
Donation	Here 800×370	Here
Donation Goal Tracker	Vertical Version 300×300	Horizontal Version
Drag Race	Here 900×650
Follow	Here 500×100	Here
Host	Here	Here
Leader Board/Event List	Here
OBS/Twitch Chat Overlay	Here
Roulette	Here	Minimal Version Here
Subscriber	Here
Subscriber Goal Tracker	Here 300×150
Widgets	Default Widget	Image-Only Widget

Note: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:

dur= - This means how long should the notification/widget stay visible.
f= - Means it will display follows on the Leader Board/Event List. (Use f=1)
h= - Means the height of the overall Host notification.
hidecountdown= - Means it will hide the countdown for the Roulette visual.
hidewinners= - Means it will hide winners for the Roulette visual.
num= - Means how many lines should be displayed for Leader Board/Event List.
test= - When set to 1, it will be a preview/test. When set to 0, it will NOT be a preview/test.
time= - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
w= - Means the width of the overall Host notification.

D. If you notice scroll bars, try increasing the dimensions.
E. Once done, click “OK”

Pre-requisites

A. OBS Studio - OBS Website
B. CLR Browser Plugin - OBS Forum Thread
- Windows - Download Link
  - To install: Extract to the root of your installation folder. For those that used the OBS Studio installer, that would be: C:\Program Files (x86)\obs-studio\
- Mac OS X (Stable Version) - Download Link
  - To install: Download the dmg and double click the “OBS Browser Plugin Install.mpkg”.

Setup

A. For Follows/Donation Notifications, you will need to “Enable Notifications/On-Screen Notifications” as well as check mark the box “OBS CLR Browser”. Both options can be found on the “Config Tab” > “Follower/Donation Notification Options”.
B. Open up OBS Studio > Under sources, Right Click > Select “Add” > Select “BrowserSource”.
C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

Notification/Widget Name	Default Version	Second Version
Cheer	Here
Cheer Goal Tracker	Here
Donation	Here 800×370	Here
Donation Goal Tracker	Vertical Version 300×300	Horizontal Version
Drag Race	Here 900×650
Follow	Here 500×100	Here
Host	Here	Here
Leader Board/Event List	Here
OBS/Twitch Chat Overlay	Here
Roulette	Here	Minimal Version Here
Subscriber	Here
Subscriber Goal Tracker	Here 300×150
Widgets	Default Widget	Image-Only Widget

Note: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:

dur= - This means how long should the notification/widget stay visible.
f= - Means it will display follows on the Leader Board/Event List. (Use f=1)
h= - Means the height of the overall Host notification.
hidecountdown= - Means it will hide the countdown for the Roulette visual.
hidewinners= - Means it will hide winners for the Roulette visual.
num= - Means how many lines should be displayed for Leader Board/Event List.
test= - When set to 1, it will be a preview/test. When set to 0, it will NOT be a preview/test.
time= - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
w= - Means the width of the overall Host notification.

D. If you notice scroll bars, try increasing the dimensions.
E. Input any Custom CSS in the CSS Box. If you do not have any Custom CSS, skip this step.
F. Once done, click “OK”.

Pre-requisites

A. xSplit - xSplit Website

Setup

A. For Follows/Donation Notifications, you will need to “Enable Notifications/On-Screen Notifications” as well as check mark the box “OBS CLR Browser”. Both options can be found on the “Config Tab” > “Follower/Donation Notification Options”.
B. Open xSplit > Add Sources or Add > Select “Other” > “Webpage URL” (If you do not see this option, you may have to go to plugin store).
C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

Notification/Widget Name	Default Version	Second Version
Cheer	Here
Cheer Goal Tracker	Here
Donation	Here 800×370	Here
Donation Goal Tracker	Vertical Version 300×300	Horizontal Version
Drag Race	Here 900×650
Follow	Here 500×100	Here
Host	Here	Here
Leader Board/Event List	Here
OBS/Twitch Chat Overlay	Here
Roulette	Here	Minimal Version Here
Subscriber	Here
Subscriber Goal Tracker	Here 300×150
Widgets	Default Widget	Image-Only Widget

Note: In some of the URLs, you will notice different variables towards the end of the URL. Here is a list of what the variable means:

dur= - This means how long should the notification/widget stay visible.
f= - Means it will display follows on the Leader Board/Event List. (Use f=1)
h= - Means the height of the overall Host notification.
hidecountdown= - Means it will hide the countdown for the Roulette visual.
hidewinners= - Means it will hide winners for the Roulette visual.
num= - Means how many lines should be displayed for Leader Board/Event List.
test= - When set to 1, it will be a preview/test. When set to 0, it will NOT be a preview/test.
time= - Means how many seconds should it stay visible after last notification for Leader Board/Event List.
w= - Means the width of the overall Host notification.

D. If you see scroll bars or image is cut off, try increasing the dimensions.
E. Once done, click “OK”
- If you plan on using Custom CSS, make sure to tick the Custom CSS box near the bottom. Then Hit Edit CSS Button to input css.
- Note: If you do use Custom CSS, make sure to replace single quotes( ' ) with double quotes ( “ ) in the CSS.

Notification/Widget Name	Default Version	Second Version
Cheer	Here
Cheer Goal Tracker	Here
Donation	Here 800×370	Here
Donation Goal Tracker	Vertical Version 300×300	Horizontal Version
Drag Race	Here 900×650
Follow	Here 500×100	Here
Host	Here	Here
Leader Board/Event List	Here
OBS/Twitch Chat Overlay	Here
Roulette	Here	Minimal Version Here
Subscriber	Here
Subscriber Goal Tracker	Here 300×150
Widgets	Default Widget	Image-Only Widget

For users who wish to use CSS to customize their notifications, here are the style sheets:

C. A box should pop-up where you can enter the URL of the notification you want as well as add any custom CSS you want. Current available options for Notifications/Widgets:

Notification/Widget Name	Default Version	Second Version
Cheer	Here
Donation	Default Donation	Custom Donation Notification
Donation Goal Tracker	Vertical	Horizontal
Drag Race	Here
Follow	Here	Here
Host	Here
Leader Board/Event List	Here
OBS/Twitch Chat Overlay	Here
Streamer Threads	Here
Subscriber	Here
Subscriber Goal Tracker	Here
Widgets	Default Widget

Need Help with Custom Notifications? Check out the following links:

body {
    background-color: transparent;
    color: black;
}
#cheer-notification {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 200px;
}
.cheerleftimg {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 120px;
    height: 120px;
    background: url(http://static-cdn.jtvnw.net/bits/light/animated/blue/4);
    background-repeat: no-repeat;
    background-position-y: 0px;
    border: none;
}
.cheerleftamount {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 120px;
    height: 30px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 24px;
}
.cheerrightamount {
    position: absolute;
    top: 120px;
    left: 680px;
    width: 120px;
    height: 30px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 24px;
}
.cheerrightimg {
    position: absolute;
    top: 0px;
    left: 680px;
    width: 120px;
    height: 120px;
    background: url(http://static-cdn.jtvnw.net/bits/light/animated/blue/4);
    background-repeat: no-repeat;
    background-position-y: 0px;
}
#header {
    position: absolute;
    top: 20px;
    left: 120px;
    width: 560px;
    height: 60px;
    text-align: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    font-size: 28px;
    opacity: 0;
}
.cheername {} .cheerheaderamount {} .cheermsg {
    position: absolute;
    top: 60px;
    left: 120px;
    width: 560px;
    height: 60px;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.cheermsg {
    opacity: 0;
}
.cheername:after {
    content: ' cheered';
}
.cheerheaderamount:after {
    content: ' bits!';
}
.emote {
    margin: -5px 0px;
    max-height: 26px;
    background-position: center;
    vertical-align: middle;
    display: inline-block;
    background-repeat: no-repeat;
}
.triggerHeader {
    animation: mode0 3s 1;
}
.triggerMsg {
    animation: slideUp 5s 1;
}
@-webkit-keyframes mode0 {
    0% {
        transform: scale(0);
        opacity: 0.0;
    }
    60% {
        transform: scale(1.1);
    }
    80% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@-webkit-keyframes slideUp {
    0% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    40% {
        -webkit-transform: translateY(100%);
        opacity: 0;
    }
    70% {
        -webkit-transform: translateY(-8%);
    }
    80% {
        -webkit-transform: translateY(4%);
    }
    90% {
        -webkit-transform: translateY(-4%);
    }
    95% {
        -webkit-transform: translateY(2%);
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
#donor-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 800px;
    height: 365px;
    background-repeat: no-repeat;
}
#donor-notification .date {
    margin-right: 40px;
    padding-top: 43px;
    text-align: right;
    line-height: 20px;
    vertical-align: top;
    font-size: 20px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: white;
}
#donor-notification .streamname {
    margin-left: 34px;
    padding-top: 28px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 24px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #FFF;
    color: black;
}
#donor-notification .message {
    margin-left: 38px;
    float: left;
    padding-top: 9px;
    width: 70%;
    line-height: 40px;
    text-align: left;
    vertical-align: top;
    font-size: 20px;
    font-family: Verdana;
    color: black;
}
#donor-notification .amount {
    float: right;
    width: 21%;
    padding-top: 17px;
    text-align: left;
    line-height: 26px;
    vertical-align: top;
    font-size: 30px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #fff;
    color: black;
}
#donor-notification .donor {
    margin-left: 520px;
    padding-top: 147px;
    text-align: left;
    line-height: 28px;
    vertical-align: middle;
    font-size: 28px;
    font-family: Comic Sans MS;
    text-shadow: 2px 2px 1px #fff;
    color: black;
}

For EU users who wish to use the Euro Cheque you can add this line to your CSS tab in the CLR browser plugin:

#donor-notification {
background-image: url('deepbot.tv/images/notification/ChequeEUR.png') !important;
}

Custom Donation Notification

body {
    background-color: transparent;
    color: white;
}
sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
#donor-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1024px;
    height: 150px;
    background-repeat: no-repeat;
    background-size: cover;
}
#donor-notification .header {
    color: #37b2e5;
    font-size: 38px;
    font-family: Algerian;
}
#donor-notification .streamname {
    float: left;
    visibility: hidden;
}
#donor-notification .message {
    font-size: 20px;
    font-family: Verdana;
    color: #37b2e5;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}
#donor-notification .amount {
    font-family: Algerian;
    color: #DBDB1A;
    font-size: 50px;
}
#donor-notification .donor {
    font-family: Algerian;
    color: #DBDB1A;
    font-size: 50px;
}
#donor-notification .title {
    padding-top: 30px;
    width: 100%;
    float: left;
    text-align: center;
}
#donor-notification .messagebox {
    width: 100%;
    text-align: center;
}

Donation Tracker Mode 1

body {
	background-color: transparent;
	color: white;
}
 
#content {
	width:300px;
	margin:5px;
	margin-left: 45px;
}
 
#thermometer {
	width:70px;
	height:300px;
	position: relative;
	background: #ddd;
	border:1px solid #aaa;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	-ms-border-radius: 12px;
	-o-border-radius: 12px;
	border-radius: 12px;
 
	-webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-moz-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-ms-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	-o-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
	box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}
 
#thermometer .track {
	height:280px;
	top:10px;
	width:20px;
	border: 1px solid #aaa;
	position: relative;
	margin:0 auto;
	background: rgb(255,255,255);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(0,0,0)), color-stop(1%,rgb(255,255,255)));
	background: -webkit-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:      -o-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:     -ms-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:    -moz-linear-gradient(top, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background:   linear-gradient(to bottom, rgb(0,0,0) 0%,rgb(255,255,255) 10%);
	background-position: 0 -1px;
	background-size: 100% 5%;
}
 
#thermometer .progress {
	height:0%;
	width:100%;
	background: rgb(20,100,20);
	background: rgba(20,100,20,0.6);
	position: absolute;
	bottom:0;
	left:0;
}
 
#thermometer .goal {
	position:absolute;
	top:0;
}
 
#thermometer .end-amount {
	display: inline-block;
	padding:0 0px 0 25px;
	border-top:1px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	color:#333;
}
 
#thermometer .progress .amount {
	padding:0 25px 0 0px;
	position: absolute;
	border-top:1px solid #060;
	font-family: Trebuchet MS;
	font-weight: bold;
	color:#060;
	right:0;
}

Donation Tracker Mode 2

body {
	background-color: transparent;
	color: white;
}
 
#content {
	/* width:100%; */
	padding: 10px 10px;
}
 
#thermometer {
	position: relative;
	margin: 0px 10px 10px 10px;
	height:100px;
	background: #ddd;
	border:1px solid #aaa;
	-webkit-border-radius: 12px;
	-webkit-box-shadow: 1px 1px 4px #999, 5px 0 20px #999;
}
 
#thermometer .track {
	height:50px;
	top: 0px;
	border: 1px solid #aaa;
	margin: 20px 20px;
	background: rgb(255,255,255);
}
 
#thermometer .progress {
	height: 50px;
	width:10%;
	background: rgb(20,100,20);
	background: rgba(20,100,20,0.6);
}
 
#thermometer .goal {
	position:absolute;
	width: 100%;
}
 
#thermometer .start-amount {
	position: absolute;
	float: right;
	display: inline-block;
	border-top:0px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	top: 50px;
	right: 0px;
	width: 100%;
	color:#333;
}
#thermometer .end-amount {
	position: absolute;
	float: right;
	display: inline-block;
	padding-right: 40px;
	border-top:0px solid black;
	font-family: Trebuchet MS;
	font-weight: bold;
	top: 50px;
	right: 0px;
	color:#333;
}
#thermometer .progress .amount {
	display: block;
	position: absolute;
	text-align: center;
	border-top: 0px solid #060;
	font-family: Trebuchet MS;
	font-size: 32px;
	font-weight: bold;
	color: #060;
	top: 27px;
	width: 100%;
}

Default Follow Notification

body {
    background-color: transparent;
    color: white;
}
#follow-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 100px;
    background-color: #0A2027;
    border-radius: 10px;
}
#follow-notification .leftimage {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-position-x: 0px;
    background-position-y: 0px;
    background-size: 100px;
    float: left;
    border-radius: 10px;
}
#follow-notification .followname {
    margin-left: 96px;
    padding-top: 15px;
    text-align: center;
    width: 385px;
    line-height: 55px;
    vertical-align: middle;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#follow-notification .header {
    margin-right: 115px;
    padding-top: 10px;
    text-align: left;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #FFFDE8;
    color: red;
    float: right;
    border-bottom: red;
    border-bottom-style: double;
}

Custom Follow Notification

body {
    background-color: transparent;
    color: white;
}
#follow-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 100px;
    border-radius: 10px;
    background-image: url("http://deepbot.tv/images/Achievement.gif");
    background-repeat: no-repeat;
}
#follow-notification .followname {
    margin-left: 96px;
    text-align: center;
    width: 313px;
    font-size: 32px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#follow-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}

Host Notification

body {
    background-color: transparent;
    color: white;
}
#host-notification {
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border-radius: 10px;
    background-image: url("http://deepbot.tv/notifications/images/host.gif");
    background-repeat: no-repeat;
    overflow: hidden;
}
#host-notification .hostname {
    margin-top: 20px;
    text-align: center;
    width: 313px;
    font-size: 24px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
.hostdiv {
    text-align: center;
    vertical-align: middle;
    margin-top: 4px;
    margin-left: 2px;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
    border-radius: 50%;
    width: 44px;
    height: 38px;
    line-height: 36px;
    background: #0000;
    border: 3px solid #F00;
    font: 22px Arial, sans-serif;
    -webkit-transform: rotate(-45deg);
}
.hostnumber {
    position: relative;
    top: 11%;
}
#host-notification .header {
    text-align: center;
    width: 500;
    vertical-align: top;
    font-size: 26px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 1px 1px 1px #97A02A;
    text-decoration: underline;
    color: red;
    visibility: hidden;
    padding-top: -50px;
}
.hostname:after {
    content: ' is bringing the party!';
}
.hostnum:after {
    content: '';
}

@font-face {
    font-family: 'Dolce Vita';
    src: url('fonts/Dolce Vita.ttf');
}
#infoContainer {
    width: 0px;
    height: 0px;
    background: #2e5794;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    color: white;
    font-family: 'Dolce Vita';
    -webkit-box-shadow: 0px 0px 20px #0f3369;
}
#infoHeader {
    width: 400px;
    height: 26px;
    background: #0f3369;
    position: relative;
    overflow: hidden;
    text-align: center;
    font-size: 24px;
}
#infoContent {
    width: 400px;
    height: 94px;
    background: #2e5794;
    position: relative;
    overflow: hidden;
    color: white;
}
#infoContentText {
    text-align: center;
    display: table-cell;
    height: 80px;
    width: 300px;
    vertical-align: middle;
}
#InfoImage {
    width: 90px;
    height: 90px;
    float: left;
    background-image: url("images/twitchLogo.png");
    background-repeat: no-repeat;
    background-size: contain;
}

Leader Board

@font-face {
    font-family: 'Dolce Vita';
    src: url('fonts/Dolce Vita.ttf');
}
#infoContainer {
    width: 300px;
    height: 180px;
    background: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    color: white;
    font-family: 'Dolce Vita';
    //-webkit-box-shadow: 0px 0px 20px #0f3369;
}
.leaderText {
    background: transparent;
    position: relative;
    overflow: hidden;
    text-align: left;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bold;
    color: black;
}

OBS Chat v9

::-webkit-scrollbar {
    visibility: hidden;
}
html {
    height: 95%;
    width: 95%;
}
BODY {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    color: #FFF;
    height: 95%;
    width: 95%;
    overflow: hidden;
}
.nick {
    font-weight: bold;
    text-transform: capitalize;
    text-shadow: 1px 1px 0 #000;
}
.emote {
    margin: -4px 0px;
}
.tag {
    display: inline-block;
    text-indent: 21px;
    background-position: 0 center;
    background-repeat: no-repeat;
    display: inline-block;
    vertical-align: bottom;
    height: 18px;
    width: 18px;
    padding: 0;
    margin-right: 3px;
    margin-bottom: -1px;
    text-indent: -9999px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    overflow: hidden;
}
.turbo {
    background-color: #6441a5;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_turbo.svg);
    background-size: 100%;
}
.moderator {
    background-color: #34ae0a;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_mod.svg);
    background-size: 100%;
}
.broadcaster {
    background-color: #e71818;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_broadcaster.svg);
    background-size: 100%;
}
.staff {
    background-color: #200f33;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_staff.svg);
    background-size: 100%;
}
.admin {
    background-color: #faaf19;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_admin.svg);
    background-size: 100%;
}
.global_mod {
    background-color: #0C6F20;
    background-image: url(http://www-cdn.jtvnw.net/images/xarth/badge_globalmod.svg);
    background-size: 100%;
}
.creator {
    background-image: url(http://deepbot.deep.sg/images/obschat/creator.gif);
}
.support {
    background-image: url(http://deepbot.deep.sg/images/obschat/support.png);
}
.vipbronze {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipbronze.png);
}
.vipsilver {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipsilver.png);
}
.vipgold {
    background-image: url(http://deepbot.deep.sg/images/obschat/vipgold.png);
}
.chat_line {
    padding-left: 5px;
    padding-right: 5px;
    margin-right: -10px;
    padding-top: 2px;
    padding-bottom: 3px;
    line-height: 16px;
    word-wrap: break-word;
    color: #FFF;
}
#chat_box {} #chat_container {
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    height: 95%;
    width: 95%;
}

Drag Race

body {
    background-color: transparent;
    color: white;
}
#race-track {
    background-image: url('http://deepbot.tv/images/widgets/racetrack/racetrack.png');
    width: 900px;
    height: 650px;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    display: none;
}
#race-track .Car1 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carblue.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 8px;
}
#race-track .Car2 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/cargreen.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 91px;
}
#race-track .Car3 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carblack.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 171px;
}
#race-track .Car4 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carpurple.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 251px;
}
#race-track .Car5 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carred.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 331px;
}
#race-track .Car6 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/cargold.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 411px;
}
#race-track .Car7 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/caryellow.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 491px;
}
#race-track .Car8 {
    position: absolute;
    background-image: url('http://deepbot.tv/images/widgets/racetrack/carskyblue.png');
    background-size: cover;
    width: 150px;
    height: 70px;
    margin-top: 571px;
}

Streamer Threads Notification

body {
    background-color: transparent;
    color: white;
}
#streamerthreads-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 730px;
    height: 730px;
    border-radius: 5px;
    background-image: url("http://streamerthreads.co.uk/api/bg.png");
    background-repeat: no-repeat;
}
#streamerthreads-notification .streamerthreadsname {
    position: absolute;
    margin-top: 245px;
    text-align: center;
    width: 750px;
    font-size: 58px;
    font-family: Verdana;
    text-shadow: 2px 2px 1px #000;
    font-weight: bold;
    color: #9966ff;
}
#streamerthreads-notification .header {
    position: absolute;
    margin-top: 380px;
    text-align: center;
    width: 750px;
    font-size: 62px;
    font-weight: bold;
    line-height: 26px;
    font-family: 'Verdana';
    text-shadow: 2px 2px 1px #000;
    color: #9966ff;
}
#streamerthreads-notification .header:after {
    content: "'s";
}

Sub Notification

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
    height: 410px;
    background-repeat: no-repeat;
    background-position-y: 30px;
}
#sub-notification .subname {
    margin-left: 55px;
    padding-top: 100px;
    text-align: left;
    width: 385px;
    line-height: 45px;
    vertical-align: middle;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: #ffffff;
}
#sub-notification .streamname {
    margin-right: 40px;
    padding-top: 20px;
    text-align: right;
    line-height: 45px;
    vertical-align: top;
    font-size: 32px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: transparent;
    text-shadow: 0 0 3px rgba(255, 255, 255, 1);
}
#sub-notification .header {
    margin-right: 0px;
    padding-top: 10px;
    text-align: center;
    vertical-align: top;
    font-size: 32px;
    line-height: 26px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #CBC2FF;
    color: black;
}

Sub Notification 3

body {
    background-color: transparent;
    color: white;
}
#sub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 580px;
    height: 370px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://deepbot.tv/notifications/CreditCard.png');
}
#resub-notification {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 580px;
    height: 370px;
    background-repeat: no-repeat;
    background-position-y: 0px;
    background-image: url('http://deepbot.tv/notifications/NoNumCreditCard.png');
}
.subname {
    margin-left: 60px;
    padding-top: 175px;
    width: 380px;
    text-align: left;
    line-height: 14px;
    font-size: 28px;
    font-family: Algerian;
    text-shadow: 2px 2px 1px #000;
    color: ##FF0000;
}
.months {
    position: absolute;
    top: 55px;
    margin-left: 420px;
    width: 20px;
    text-align: right;
    line-height: 14px;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}
.badge {
    position: absolute;
    top: 50px;
    margin-left: 420px;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: 25px 25px;
    width: 30px;
    height: 30px;
    -webkit-animation: rot 3s infinite linear;
}
.msg {
    position: absolute;
    top: 20px;
    margin-left: 40px;
    width: 60%;
    font-size: 28px;
    font-family: 'Squada One', cursive;
    text-shadow: 2px 2px 1px #000;
    color: #FFF;
}
@-webkit-keyframes rot {
    from {
        -webkit-transform: rotate(0deg) translate(-30px) rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg) translate(-30px) rotate(-360deg);
    }
}

Sub Tracker

body {
    background-color: transparent;
    color: white;
}
#content {
    width: 300px;
    margin: 5px;
    margin-left: 45px;
}
#gauge-value {
    color: red;
    width: 300px;
    text-align: center;
    font-size: 52;
    font-weight: bold;
    margin-top: -80px;
    -webkit-text-stroke: 2px;
    -webkit-text-stroke-color: white;
    position: absolute;
    text-shadow: 1px 0px 20px black;
}

How to Setup Notifications/Widgets

Overview

OBS Classic Setup

OBS Studio Setup

xSplit Setup

CLR Browser URLs

CSS Style Sheets

Cheer Notification

Default Donation Notification

For EU users who wish to use the Euro Cheque you can add this line to your CSS tab in the CLR browser plugin:

Custom Donation Notification

Donation Tracker Mode 1

Donation Tracker Mode 2

Default Follow Notification

Custom Follow Notification

Host Notification

Widget

Leader Board

OBS Chat v9

Drag Race

Streamer Threads Notification

Sub Notification

Sub Notification 3

Sub Tracker