The Mobalytics Builds Widget allows you to embed data for a champion build in your own website!
You’re able to customize:
- The Champion
- The Role (defaults to most games played if no role is specified)
- The Layout of the widget (“Full” or “Compact”)
Examples
1
Here’s an example of a widget using the following options:
- champion:
rell
- role:
UNKNOWN
- layout:
full
2
Here’s an example of a widget using the following options:
- champion:
maokai
- role:
UNKNOWN
- layout:
compact
Usage
Standalone version
Using a Script
tag
- Go to the GitHub repo and check out the releases
- Grab the name of the latest release (eg,
v0.2.1-alpha
at the time of writing) - Embed the following script into the
<head>
of your website on pages where you’d like to display a Builds Widget:<script async src="https://cdn.jsdelivr.net/gh/joneslloyd/builds-widget@<VERSION>/dist/index.bundle.js" />
where<VERSION>
is the version tag that you grabbed in the previous step (eg,https://cdn.jsdelivr.net/gh/joneslloyd/[email protected]/dist/index.bundle.js
) - Add your first widget by using the following tag in your page, where you’d like your widget to appear:
<div data-moba-widget="build"><script type="application/json">{"champion": <CHAMPION>,"layout": <LAYOUT>,"role": <ROLE>}</script></div>
(eg,<div><script type="application/json">{"champion":"varus","layout": "full"}</script></div>
) - That’s it!
Using Google Tag Manager
- Go to the GitHub repo and check out the releases
- Grab the name of the latest release (eg,
v0.2.1-alpha
at the time of writing) - Log in to Google Tag Manager
- Go to the Tags section
- Create a new tag, and select "Custom HTML" as its type
- In the box for the custom HTML, paste the following script:
<script async src="https://cdn.jsdelivr.net/gh/joneslloyd/builds-widget@<VERSION>/dist/index.bundle.js" />
where<VERSION>
is the version tag that you grabbed in the previous step (eg,https://cdn.jsdelivr.net/gh/joneslloyd/[email protected]/dist/index.bundle.js
) - Give the Custom HTML tag an appropriate name, and set its trigger as "All Pages"
- Publish this tag
- Now you can add your first widget. Use the following tag in your page, where you’d like your widget to appear:
<div data-moba-widget="build"><script type="application/json">{"champion": <CHAMPION>,"layout": <LAYOUT>,"role": <ROLE>}</script></div>
(eg,<div><script type="application/json">{"champion":"varus","layout": "full"}</script></div>
) - That’s it!
WordPress plugin version
- Grab the WordPress plugin
- ZIP the folder you downloaded, then on your WordPress site, go to Plugins > Add New > Upload, and upload the ZIP file
- Activate the WordPress plugin
- On posts you’d like to use the widget on, just use the following shortcode:
[moba-builds-widget champion="X" layout="Y" role="Z"]
, whereX
is a valid champion name,Y
is a valid layout (“full” or “compact”), andZ
is a valid role for the chosen champion (use one ofADC
,JUNGLE
,MID
,SUPPORT
,TOP
,UNKNOWN
– Defaults toUNKNOWN
if you don’t specify a value)
Customization
As already mentioned, there are three properties of widgets that you can control:
- champion
- layout
- role
Champion
This can be any valid champion name. If the champion’s name has spaces in it, that’s fine (just include them). If the champion’s name has special characters/punctuation, remove them.
If you don’t provide a champion, it will default to amumu
.
Layout
This can be full
or compact
. The full version gives a little more information, but takes up more space.
If you don’t provide a layout, it will default to full
.
Role
This can be any of: ADC
, JUNGLE
, MID
, SUPPORT
, TOP
, UNKNOWN
.
If you don’t provide a role, it will default to UNKNOWN
.
Development
For maximum transparency, the widget source code is available here.
To contribute to its development, follow the below steps after cloning the repo:
Build (for demos, etc)
- Run
yarn build
- Use the
index.html
page to show the widget off
Dist (for CDN)
- Run
yarn dist
- Load the
index.bundle.js
via JSDELIVR
Local dev
- Load the
index.bundle.js
via JSDELIVR - Ports need to be in the range of
3000
to3005
to be able to use the Mobalytics API without authentication (the default of3000
should be fine)