Mobalytics Builds Widget documentation

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/builds-widget@v0.2.0-alpha/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/builds-widget@v0.2.0-alpha/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"], where X is a valid champion name, Y is a valid layout (“full” or “compact”), and Z is a valid role for the chosen champion (use one of ADC, JUNGLE, MID, SUPPORT, TOP, UNKNOWN – Defaults to UNKNOWN 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)

Local dev

  • Load the index.bundle.js via JSDELIVR
  • Ports need to be in the range of 3000 to 3005 to be able to use the Mobalytics API without authentication (the default of 3000 should be fine)