Mobalytics Widgets allow you to install useful widgets with data insights for League of Legends to your website.
⭐ Star us on GitHub — it motivates us a lot!
Add Mobalytics Widgets script section right before closing <body/> tag
<script async src="https://cdn.jsdelivr.net/gh/mobalyticshq/mobalytics-widgets/build/mobalytics-widgets.js"></script>
Add host node for the widget (LoL Amumu Champion Build example)
<div data-moba-widget="lol-champion-build" data-moba-champion="amumu"></div>
Done! Here is a minimal code snippet
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div data-moba-widget="lol-champion-build" data-moba-champion="amumu"></div>
<script async src="https://cdn.jsdelivr.net/gh/mobalyticshq/mobalytics-widgets/build/mobalytics-widgets.js"></script>
</body>
</html>
If you want to install the script on your own server instead of using Jsdelivr CDN, use the following link to download.
LoL Champion Build Widgets display the most popular champion build on automatically choosen or specified role.
| Attribute | Description |
|---|---|
data-moba-widget |
Widget ID lol-champion-build |
data-moba-champion |
Slug of the champion, follow instructions to see full slugs list. |
data-moba-champion-role |
Role of the champion, possible values areADC, JUNGLE, MID, SUPPORT, TOP. |
data-moba-champion-tier-icon |
Show or hide champion tier iconON, OFF. |
Example
<div data-moba-widget="lol-champion-build"
data-moba-champion="amumu"
data-moba-champion-role="jungle"></div>
LoL Champion Build Compact Widgets display the most popular champion build on automatically chosen or specified role in a compact way.
| Attribute | Description |
|---|---|
data-moba-widget |
Widget ID lol-champion-build-compact |
data-moba-champion |
Slug of the champion, follow instructions to see full slugs list. |
data-moba-champion-role |
Role of the champion, possible values areADC, JUNGLE, MID, SUPPORT, TOP. |
data-moba-game-mode |
Game Mode, possible values areARAM, ARENA, SUMMONER_RIFT. |
data-moba-champion-tier-icon |
Show or hide champion tier iconON, OFF. |
Example
<div data-moba-widget="lol-champion-build-compact"
data-moba-champion="amumu"
data-moba-champion-role="jungle"></div>
LoL Champion Tooltip Widget uses links to Mobalytics champion build pages as a host node to show tooltip on hover over these links.
| Attribute | Description |
|---|---|
data-moba-tooltip |
Tooltip ID lol-champion-tooltip |
Example
<a target="_blank"
href="https://mobalytics.gg/lol/champions/khazix/build"
data-moba-tooltip="lol-champion-tooltip">Khazix link with tooltip</a>
- Open Mobalytics Champions Page
- Navigate to specific champion page e.g "ahri"
- Copy champion slug from the page URL
