Skip to content

Overlays

Fernando Carrascosa edited this page May 9, 2021 · 3 revisions

Overlays

This script provides some HTML overlays to integrate with your favourite streaming software and display information on screen.

How to use Overlays

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

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 HTML Overlays for this Script

Session

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

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:

Vertical
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;  
}  
  
Horizontal
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;  
}

Show/Hide Effect

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;  
  }  
}
Clone this wiki locally