Loading
OBS Rank Overlay
No install, just one URL. Enter your Riot ID, pick a widget and add it as an OBS Browser Source. It refreshes on its own every minute.
No install, just one URL. Enter your Riot ID, pick a widget and add it as an OBS Browser Source. It refreshes on its own every minute.
No install, just one URL. Enter your Riot ID, pick a widget and add it as an OBS Browser Source. It refreshes on its own every minute.
The checkerboard is transparent. Your game shows through on stream.
OBS defaults to 800×600, which leaves empty space or cuts the widget off. These numbers change with Size, so enter them again after changing it. Suggested size per canvas
Each widget has its own URL. To use several, add one Browser Source per widget.
✓ This Riot ID goes into the URL: Syrant#SYR4K
Takes about two minutes the first time. Same steps for every widget.
Pick a widget above and press 'Copy URL'. All your settings live inside this URL.
In OBS, click + under 'Sources' → 'Browser'. Name it anything (e.g. ValKD Rank) and press OK.
Paste into URL, then enter the Width and Height from the red box above. Leaving the OBS default 800×600 adds empty space or cuts the widget off.
Drag it above your game capture in Sources, then move it where you want. Stretching the corners makes it blurry, so change the size with 'Size' on this page.
PRISM Live Studio and Streamlabs work the same way: add a 'Browser' (or 'Web') source. It doesn't matter which platform you stream to.
Check Settings → Video → 'Base (Canvas) Resolution' in OBS and pick the matching size for sharp text.
| Canvas | Suggested size |
|---|---|
| 1280 × 720 | 0.75 |
| 1920 × 1080 | 1 |
| 2560 × 1440 | 1.25 ~ 1.5 |
| 3840 × 2160 | 2 |
① Make sure the source is above your game capture ② the eye icon is on ③ double-click the source → 'Refresh cache of current page'. If the URL has no Riot ID, you'll see a one-line notice instead of the widget.
Set the source Width and Height to the numbers in the red box on this page. They change when you change the size, so enter them again. Then right-click the source → Transform → Reset Transform.
If you cleared 'Custom CSS' in the source properties, restore the default: body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }
Settings are stored in the URL, so copy the new URL and paste it into the source's URL field again.
Widgets reload every minute and stats refresh every 10 minutes, so a short delay after a match is normal. Live in-match kills aren't shown.
If there's no record since midnight (Korea time) yet, there's nothing to compare against, so it shows '-'. Today's change builds up after the first load.
Don't stretch the source in OBS. Make it bigger with 'Size' on this page and enter the new Width and Height in the source properties.
Yes. No login or install: enter your Riot ID, paste the URL into an OBS Browser Source and your rank and RR show on stream.
It's a Browser Source in OBS, PRISM Live Studio or Streamlabs, so it works the same whichever platform you stream to.
Widgets refresh on their own every minute. Right after a match, the new RR can take a few minutes to show.
Yes. Make !rank, !today and !record commands for Nightbot, StreamElements and Fossabot.
Chat bot commands