Customize your live count widget
Pick a counter and an account, then change everything you see: the card, the fonts, the corners, how the number rolls and a live graph. The preview updates as you go. Copy the link into OBS as a browser source, or the code into your website.
How the options work
Every choice ends up in the link as a short option, and only the ones that differ from the chosen style. The widget checks each value when it loads: colours must be colour codes, fonts come from a fixed list, and numbers stay within their range. A link without any of these options shows the counter exactly as before, so older OBS sources never change.
| Option | What it does | Example |
|---|---|---|
look | dark, light, clear (no card) or none (the original design with your colours and fonts). | look=clear |
lay | stack puts the count under the name instead of next to it. | lay=stack |
hide add | Parts to leave out (avatar, name, check, label, goal, logo) or to add (handle, graph, pill). | add=graph,pill |
tf cf | Font for the text and for the count, for example dmsans, inter, roboto, poppins, montserrat, bebas, mono or pixel. | cf=bebas |
pb cb bc | Page background, card background and card border. A colour code without the #, or none. | cb=1e293b |
tc cc bar | Colour of the text, of the count and of the goal bar. | cc=facc15 |
up dn | Colour of the count while it rolls up or down. | up=22c55e |
ring | 0 hides the platform colour around the picture and the platform icon. | ring=0 |
cr ar | Corners of the card (0 to 40) and of the picture (0 to 60), in pixels. | cr=16 |
cw lh tn | Weight of the count (100 to 900), line height in em (0.8 to 2) and tn=0 for proportional digits. | cw=700 |
sp | How long one roll of the number takes, in seconds (0.1 to 5). | sp=2 |
ts ds | Thousands separator (comma, dot, space, apos, none) and decimal separator (dot, comma). | ts=dot |
gw gc gt gs | Graph time window in minutes (1 to 1440), line colour, line thickness (1 to 8) and gs=area for a filled graph. | gw=30 |
scale | Draws the whole widget bigger, from 0.5 to 4. | scale=2 |
Advertisement
Questions
Does my old OBS link change?
No. Links without these options look exactly like they always did. Only a link you copy from this page gets the new look.
Can I keep the card transparent?
Yes. Pick "No card, for OBS scenes" as the style, or tick None next to the card background. The page background is transparent unless you pick a colour.
Why is the graph empty at first?
The widget draws the graph from the numbers it sees while it is open. In OBS it keeps running, so after a while it shows the whole time window you picked.
Which size should the OBS source be?
Use the width and height shown under the preview. For a bigger widget pick a larger Size instead of stretching the source, so the text stays sharp.