-
Notifications
You must be signed in to change notification settings - Fork 0
Overlays
This script provides some HTML overlays to integrate with your favourite streaming software and display information on screen.
To use overlays there are a few things you need to know.
The first one, may seem obvious, but yet: The chatbot must be on, and the script installed and enabled in order for the information to update.
Overlays are placed in the script's directory in a subdirectory named overlays.
An example route would be: C:/Users/$YOURUSER/AppData/Roaming/Streamlabs/Services/Scripts/FaceitIntegration/overlays.
HTML Overlays need a chatbot API key. In order to set it, just go to the scripts tab in Streamlabs Chatbot, then right click on FaceitIntegration and select Insert API Key. After that you can use the HTML Overlays for this script.
In your Streaming Software, select a new browser/html source and as a source, select the html file for the overlay you want to use.
To style it, add in OBS the CSS code for the styling you want to achieve.
The session overlay is an html overlay that displays the overall information for the current session. It displays the amount of matches played, matches won and matches lost for a session, and the elo balance for it.
Theming the session overlay is completely up to you, you'll need some skill on CSS, though. Anyway, two basic themes are proposed, you can modify them at will:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font-family: 'Verdana', 'Tahoma', 'sans-serif';
font-weight: bolder;
font-size: 16px;
}
body {
overflow: hidden;
}
main {
box-sizing: border-box;
padding: .5em;
width: 100%;
}
.container {
background: rgba(0, 0, 0, 0.4);
margin: .5em 0;
padding: .5em 0;
border-radius: 5px;
display: grid;
grid-template-columns: 50% 50%;
}
.container #matchesPlayed, .container #eloBalance {
grid-column-start: 1;
grid-column-end: span 2;
padding: 8px 0;
}
.container #matchesWon {
grid-column-start: 1;
}
.container #matchesLost {
grid-column-start: 2;
}
.container #matchesWon, .container #matchesLost {
grid-column-end: span 1;
}
#matchesPlayed, #eloBalance, #matchesWon, #matchesLost {
color: #fff;
text-align: center;
}
#matchesPlayed .label, #eloBalance .label, #matchesWon .label, #matchesLost .label {
text-transform: uppercase;
}
#matchesPlayed, #eloBalance {
display: flex;
flex-direction: column-reverse;
}
#matchesPlayed .label, #eloBalance .label {
font-size: 1.125em;
}
#matchesPlayed .value, #eloBalance .value {
font-size: 3.125em;
}
#matchesWon, #matchesLost {
display: flex;
flex-direction: column;
}
#matchesWon .label, #matchesLost .label {
font-size: 1em;
}
#matchesWon .value, #matchesLost .value {
font-size: 2.1875em;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
font-family: 'Verdana', 'Tahoma', 'sans-serif';
font-weight: bolder;
font-size: 16px;
}
body {
overflow: hidden;
}
main {
box-sizing: border-box;
padding: .5em;
width: 100%;
}
.container {
background: rgba(0, 0, 0, 0.4);
margin: .5em 0;
padding: 2.5em 1.25em;
border-radius: 5px;
display: grid;
grid-template-columns: 30% 20% 20% 30%;
}
.container #matchesWon .label, .container #matchesWon .value, .container #matchesLost .label, .container #matchesLost .value {
padding-top: .4em;
}
#matchesPlayed, #eloBalance, #matchesWon, #matchesLost {
color: #fff;
text-align: center;
}
#matchesPlayed .label, #eloBalance .label, #matchesWon .label, #matchesLost .label {
text-transform: uppercase;
}
#matchesPlayed, #eloBalance {
display: flex;
flex-direction: column-reverse;
}
#matchesPlayed .label, #eloBalance .label {
font-size: 1.125em;
}
#matchesPlayed .value, #eloBalance .value {
font-size: 3.125em;
}
#matchesWon, #matchesLost {
display: flex;
flex-direction: column;
}
#matchesWon .label, #matchesLost .label {
font-size: 1em;
}
#matchesWon .value, #matchesLost .value {
font-size: 2.1875em;
}If you don't want to show the information at all times? You can add this snippet to the CSS displayed above and your overlay will appear and disappear from time to time in your OBS.
main {
animation: showHide linear 150s infinite;
}
@keyframes showHide {
0% {
opacity: 0;
}
20% {
opacity: 0;
}
39% {
opacity: 0;
}
40% {
opacity: 1;
}
59% {
opacity: 1;
}
60% {
opacity: 0;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
}
}