---
description: "No automation from live stream software? No problem! Manually updated progress bars can still look awesome!"
featured_image: "/images/bg_dots_blurple.jpg"
---

# Use for free

<div style="text-align: left;">
<form class="black-80 sans-serif" onsubmit="return false;">
    <label for="session_token" class="f6 b db mb1 mt3 sans-serif mid-gray">
        Session token
    </label>
    <input id="session_token" type="text" class="w-100 f5 pv3 ph3 bg-light-gray bn">
    <div class="requirements f6 gray glow i ph3 overflow-hidden">
        Paste some code here to join someone's else work.
    </div>
    <div class="requirements f6 gray glow i ph3 overflow-hidden">
        Automatically generated.
    </div>
    <div class="requirements f6 gray glow i ph3 overflow-hidden">
        Automatically saved. (in your browser)
    </div>
    <div class="w-100" style="text-align: right;">
        <input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Generate another" onclick="generate_another();">
    </div>
</form>

## Display Page

<form class="black-80 sans-serif" style="text-align: center;" onsubmit="return false;">
<input id="url_0" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" readonly>
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Link to clipboard" onclick="copyClipboard(url_0);">
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Open in new tab" onclick="openTab(url_0);">
<div class="requirements f6 gray glow i ph3 overflow-hidden">
    This goes into OBS, XSplit, CasparCG, etc.
</div>
</form>

## Control Panel

<form class="black-80 sans-serif" style="text-align: center;" onsubmit="return false;">
<input id="url_1" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" readonly>
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Link to clipboard" onclick="copyClipboard(url_1);">
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Open in new tab" onclick="openTab(url_1);">
<div class="requirements f6 gray glow i ph3 overflow-hidden">
    This controls what gets displayed in your stream
</div>
</form>

## Operator Panel

<form class="black-80 sans-serif" style="text-align: center;" onsubmit="return false;">
<input id="url_2" type="text" class="w-90 f5 pv3 ph3 bg-light-gray bn" readonly>
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Link to clipboard" onclick="copyClipboard(url_2);">
<input class="w-40 mv2 white pa3 bn hover-shadow hover-bg-black bg-animate bg-black" type="button" value="Open in new tab" onclick="openTab(url_2);">
<div class="requirements f6 gray glow i ph3 overflow-hidden">
    This allows you to distribute a workload with people working in your stream
</div>
</form>

</div>
<style>
input[type=button] {
    cursor: pointer;
}
</style>
<script>
function uuidv4() { // https://stackoverflow.com/a/2117523
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
    var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}
</script>
<script>
function save_changed_session_token() {
    localStorage.setItem('last_session', session_token.value);
    var displayUrl = `${window.location.origin}${window.location.pathname}/display/#${session_token.value}`;
    displayUrl = displayUrl.replace('://', ':///').replace(/\/\//g, '/');
    url_0.value = displayUrl;
    var controlUrl = `${window.location.origin}${window.location.pathname}/control/#${session_token.value}`;
    controlUrl = controlUrl.replace('://', ':///').replace(/\/\//g, '/');
    url_1.value = controlUrl;
    var operatorUrl = `${window.location.origin}${window.location.pathname}/operator/#${session_token.value}`;
    operatorUrl = operatorUrl.replace('://', ':///').replace(/\/\//g, '/');
    url_2.value = operatorUrl;
}
</script>
<script>
session_token.onkeyup = save_changed_session_token;
session_token.onkeydown = save_changed_session_token;
session_token.onchange = save_changed_session_token;
session_token.value = localStorage.getItem('last_session') || uuidv4();
save_changed_session_token();
</script>
<script>
function generate_another() {
    session_token.value = uuidv4();
    save_changed_session_token();
}
</script>
<script>
function copyClipboard(linkElem) {
    linkElem.select();
    linkElem.setSelectionRange(0, 999999);
    document.execCommand('copy');
}
</script>
<script>
function openTab(linkElem) {
    window.open(linkElem.value, '_blank');
}
</script>