Archon
Decorative background for title

Stream and Competition Resources

Last updated: September 27, 2023

FF Logs offers a variety of resources and tools that can help enhance your livestream and competitions. Take a look at what we have available!

Guild Specific Widgets

The following stream widgets are available to each guild and can be used with a streaming software such as OBS. These can be found on the guild’s page on Warcraft Logs, in the Widgets tab:

The graphs will scale to fit the browser source size in OBS. Because the text/bars don't scale very well, you might want to add a zoom CSS property to body, such as zoom: 2;. If you do this, you may need to press the "Refresh cache of current page" button in OBS for the graph to fit your browser source again.

These will update in real time as a guild progresses, refreshing every 30 seconds.

Progression Tiles

We have two available widgets for boss progression (horizontal and vertical), featuring guild and pull count information.

Landscape Progress Tile

The landscape progress tile also has extra customization options via its URL query parameters:

isTransparent
Use a transparent boss background image and remove the border. Defaults to false.
showTopLeft / showTopRight / showBottomLeft / showBottomRight
Hide the information in the corresponding corner. Default to true.

For example, setting:

  • isTransparent=true
  • showTopLeft=false
  • showTopRight=false

gives a more compact version of the tile that may fit in nicer with your specific broadcast:

https://www.warcraftlogs.com/embed/guild-progress-tile/29?difficulty=5&guild=460406&isTransparent=true&showTopLeft=false&showTopRight=false

Raw Text Embeds

As we understand you'll likely have certain graphics and theming already sorted, we also have some "raw text" widgets that can be used to insert live data about the current encounter being progressed. (To adjust these URLs to your guild, replace guild=xxx with your own guild id):

Encounter Summary Graphs

Multiple graphs are available on your guild profile to help visualize pulls, percents, and progression time.

Composition and Gear

The following widgets contain composition, loot, and tier set information.

Latest Updates

Latest updates can be guild specific, or set to display activity from all of the top guilds.

General Competition Widgets

You will need custom URLs for these widgets. These stream widgets will update every 30 seconds, and will even update mid-fight to keep the most accurate boss percentage possible, letting guilds overtake each other mid-fight if they get a better percentage.

We can also provide embeds that expose certain details as text so you can style them however you like. Additionally, we can also easily build any custom widgets you need to fit your stream.

Leaderboards

One of our widgets is our RWF Leaderboard. There's a bunch of customization on it for what columns, icons, etc., should show.

This is our default leaderboard. Here are some basic customization examples which change what is displayed:

Other guilds have then styled these widgets with Custom CSS in OBS to make them fit their stream and broadcast theme as if they were native. Here are some examples:

Comparison Encounter Summary Graphs

Multiple graphs are available to help visualize pulls, percents, and progression time. You can show data for multiple guilds at once by using the guilds parameter in the URL. For example, guilds=312,1546,1546,149604,488971 will show pull data for five guilds with those five IDs. You can still use difficulty to swap between heroic (4) and mythic (5), and encounterId to swap between encounters.

The graphs will scale to fit the browser source size in OBS. Because the text/bars don't scale very well, you might want to add a zoom CSS property to body, such as zoom: 2;. If you do this, you may need to press the "Refresh cache of current page" button in OBS for the graph to fit your browser source again.

Example link: https://www.warcraftlogs.com/embed/fight-percentage-per-pull-chart/latest?color=%23517fa5&xAxis=pull&difficulty=5&encounterId=2546&guilds=312,1546,17772,149604,488971

The xAxis parameter in the URL that can be set to either xAxis=pull or xAxis=time. Setting it to time will make the x-axis of the graph use the date of the best percent instead of the pull count. This can be useful for also showing when guilds started and finished fights, and when they made certain chunks of % progress.

Example link: https://www.warcraftlogs.com/embed/encounter-progress-time-chart/28?encounterId=2435

Time Machine

The Time Machine is similar to the leaderboard but also shows what the leaderboard was 12 or 24 hours ago and the difference between then and now. This is a great widget to use when talking about the changes in the race.

Note that the background shown in that image isn't part of the widget. The widget is partially transparent so you can put it on top of whatever you want.

There is a thinner, single-column version also available, which can be used by setting a smaller width (more instructions below).

The base URL is https://www.warcraftlogs.com/embed/time-machine-competition-summary/latest and there are several URL parameters you can use to customize it:

timeMachineCompetition
This lets you change the time period that is used for comparison. A default of 10001 gives 24 hours, and a value of 10002 gives 12 hours.
numberOfGuilds
The number of guilds to show in the time machine. Defaults to 5.
startingRank
The top rank guild to show. Defaults to 1. For example, if you want to see guilds rank 12, 13, 14, & 15, you would set startingRank=12 and numberOfGuilds=4. Note that you cannot view guilds past rank 20.
zoom
Lets you easily magnify the widget. Recommended value of 2 for stream embeds. Defaults to 1 (ideal for embedding in a webpage). Note that mouse-over tooltips are only shown when not zoomed.

Time Machine Examples

Recommended Stream Embed (24 hour time period)

Use a browser source width of 1500 and a height of 1050.

https://www.warcraftlogs.com/embed/time-machine-competition-summary/latest?zoom=2
Recommended Stream Embed (12 hour time period)

Use a browser source width of 1500 and a height of 1050.

https://www.warcraftlogs.com/embed/time-machine-competition-summary/latest?zoom=2&timeMachineCompetition=10002
Stream Embed (Single Column)

Use any of the above embeds, but set browser source width to 650 and height to 850.

Recommended Browser Embed (24 hour time period)

Use an iframe width of 1500 and a height of 1050.

https://www.warcraftlogs.com/embed/time-machine-competition-summary/latest
Recommended Browser Embed (12 hour time period)

Use an iframe width of 1500 and a height of 1050.

https://www.warcraftlogs.com/embed/time-machine-competition-summary/latest?timeMachineCompetition=10002
Browser Embed (Single Column)

Use any of the above embeds, but set iframe width to 650 and height to 850.

Additional Resources

FF Logs offers some additional resources for your stream and competition.

Nightbot Support

Best Percent Chat Command

We have support for a Nightbot Twitch command that viewers can use to get a quick recap of a guild's current progress. If you have Nightbot in your channel, you can add it with:

!commands add !best $(urlfetch https://www.warcraftlogs.com/nightbot/best-percent/<guild-id>)

A guild id can be found at the end of the URL by visiting the guild on Warcraft Logs. Viewers can call best % info by typing !best in the chat.

Time Machine Chat Command

We also offer some very interesting chat commands that will let a viewer see how much progress has been made in either the last 24 hours or the last 12 hours. The responses are of the form:

Last 24 hours: Progressed Halondrus from 62.4% to 12% over an additional 102 pulls (277 pulls total). Defeated Lihuvim after 45 pulls, and Pantheon after 56 pulls.

Add the 24 hour version with:

!commands add !24hours $(urlfetch https://www.warcraftlogs.com/nightbot/time-machine/<guild-id>?timeMachineCompetition=10001)

And the 12 hour version with:

!commands add !12hours $(urlfetch https://www.warcraftlogs.com/nightbot/time-machine/<guild-id>?timeMachineCompetition=10002)

Remember to replace <guild-id> with your guild's ID, which can be found at the end of the URL by visiting the guild on Warcraft Logs.

We are able to easily create more Nightbot commands to fit different scenarios or requests.

Information Regarding API Data

If you want to get more up-close and personal with our API and start using it to build your own browser sources, here's a brief example of what such a .html file would look like.

Example
<pre id="json-dump"></pre>

&lt;script&gt;
  let accessToken = null;

  getProgressRaceDataAndDoSomething();

  async function getProgressRaceDataAndDoSomething() {
    const data = await getProgressRaceData();

    document.getElementById('json-dump').innerHTML = JSON.stringify(data, null, 2);
    console.log(data);

    setTimeout(getProgressRaceDataAndDoSomething, 30000);
  }

  async function getProgressRaceData() {
    return await fetchJsonFromApi(
      `{
      progressRaceData {
        progressRace(difficulty: 5)
      }
    }`
    );
  }

  async function fetchJsonFromApi(query, variables = {}) {
    const accessToken = await getAccessToken();

    const response = await fetch('https://www.warcraftlogs.com/api/v2/client', {
      method: 'POST',
      headers: {
        Authorization: 'Bearer ' + accessToken,
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        query,
        variables,
      }),
    });

    const json = await response.json();

    if (json.errors || !json.data)
      setTimeout(() => window.location.reload(), 5000);

    return json.data;
  }

  async function getAccessToken() {
    if (accessToken)
      return accessToken;

    // Create a client here: https://www.warcraftlogs.com/api/clients/
    const clientId = 'ABC';
    const clientSecret = 'XYZ';

    const authHeader =
      'Basic ' + btoa(`${clientId}:${clientSecret}`);

    const response = await fetch('https://www.warcraftlogs.com/oauth/token', {
      method: 'POST',
      headers: {
        Authorization: authHeader,
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: 'grant_type=client_credentials',
    });

    if (response.status === 200) {
      const json = await response.json();
      accessToken = json.access_token;
    } else {
      setTimeout(() => window.location.reload(), 5000);
    }

    return accessToken;
  }
&lt;script&gt;

Everything after the first 10 or so lines is just GraphQL boilerplate, just defining a few functions so that all you need to do is const data = await getProgressRaceData(); and then get started working with that data. This example gets the data every 30 seconds and just dumps it out onto the page. On the off chance that an error occurs, it reloads the page so that it tries again. There's a huge amount of data in our API that you can access with different queries if you ever need to build anything else.

Phase Data

We've also added phase data to our progress race API. You can now see what phase a guild has reached in any pull (including their current one) by inspecting the guilds[].encounters[].perPull[].phase object. For real-time live logging guilds, this will also update every 30 seconds (like everything else) even for the guild's current active pull. This data is only available in the API at the moment, but eventually we'd also like to make an easy-to-embed stream widget to represent this.

Chart Customization

It's possible to customize the underlying chart theme to tailor it to your stream audience/brand. There are a few steps, but we can work with you on this and provide assistance.

Introduction

Let's customize the Fight Summary Chart for example.

An exhaustive overview of customization options can be found within the Highcharts Editor. You can either use the editor to build your theme, or skip below to the example and adjust the fonts, sizes, and colors as needed.

  • Under Templates, the second navigation item on the left, select Line and import the sample data set for OS Usage Stats.
  • Under Customize Chart, the third navigation item on the left, you'll have multiple ways of customizing the chart
    • Let's change Titles > Chart Title to My Custom WCL Chart Title
    • As well as Tooltip > toggle Enable tooltip to off
    • You'll see both changes reflected in the preview on the right
  • Switch to the Preview Options tab
  • Select the code displayed in the textbox
  • Copy paste it somewhere where you may edit it and remove empty fields -- this is not necessarily required but if you plan to exhaustively customize, you might hit the URL length limit, so omitting redundant code is best practice

The sanitized chart options should look something like this:

{
  "title": {
    "style": {
      "fontFamily": "Impact",
      "color": "#f5f5f5",
      "fontSize": "34px",
      "fontWeight": "normal",
      "fontStyle": "normal"
    }
  },
  "chart": {
    "style": {
      "fontFamily": "Impact",
      "color": "#fafafa",
      "fontSize": "20px",
      "fontWeight": "normal",
      "fontStyle": "normal"
    },
    "borderWidth": 6,
    "borderColor": "#512da8",
    "backgroundColor": "#212121",
    "borderRadius": 3,
    "plotBorderWidth": 0
  },
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": false,
        "style": {
          "color": "contrast",
          "fontSize": "15px",
          "fontWeight": "bold",
          "textOutline": "1px 1px contrast"
        }
      }
    },
    "line": {
      "lineWidth": 4
    }
  },
  "yAxis": {
    "title": {
      "style": {
        "fontFamily": "Impact",
        "color": "#f5f5f5",
        "fontSize": "40px",
        "fontWeight": "normal",
        "fontStyle": "normal"
      },
      "margin": 50
    },
    "labels": {
      "style": {
        "fontSize": "24px"
      },
      "y": 20
    }
  },
  "xAxis": {
    "title": {
      "style": {
        "fontFamily": "Impact",
        "color": "#f5f5f5",
        "fontSize": "40px",
        "fontWeight": "normal",
        "fontStyle": "normal"
      }
    },
    "labels": {
      "style": {
        "fontSize": "24px"
      }
    }
  },
  "legend": {
    "itemStyle": {
      "fontFamily": "Impact",
      "color": "#f5f5f5",
      "fontSize": "22px",
      "fontWeight": "normal",
      "fontStyle": "normal",
      "cursor": "pointer"
    },
    "borderWidth": 0
  }
}

To add this to our URL we need to URL encode it. You can do that with this URL encoder (if you want a shorter URL, you can run it through this tool first to remove the unnecessary whitespace).

You will end up with something like:

%7B%22title%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2234px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%7D%2C%22chart%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23fafafa%22%2C%22fontSize%22%3A%2220px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%2C%22borderWidth%22%3A6%2C%22borderColor%22%3A%22%23512da8%22%2C%22backgroundColor%22%3A%22%23212121%22%2C%22borderRadius%22%3A3%2C%22plotBorderWidth%22%3A0%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%2C%22style%22%3A%7B%22color%22%3A%22contrast%22%2C%22fontSize%22%3A%2215px%22%2C%22fontWeight%22%3A%22bold%22%2C%22textOutline%22%3A%221px%201px%20contrast%22%7D%7D%7D%2C%22line%22%3A%7B%22lineWidth%22%3A4%7D%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2240px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%2C%22margin%22%3A50%7D%2C%22labels%22%3A%7B%22style%22%3A%7B%22fontSize%22%3A%2224px%22%7D%2C%22y%22%3A20%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2240px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%7D%2C%22labels%22%3A%7B%22style%22%3A%7B%22fontSize%22%3A%2224px%22%7D%7D%7D%2C%22legend%22%3A%7B%22itemStyle%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2222px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%2C%22cursor%22%3A%22pointer%22%7D%2C%22borderWidth%22%3A0%7D%7D

which you now may append as chartTheme to the query params of the Fight Summary Chart:

https://warcraftlogs.com/embed/progress-race-fight-summary-chart/29?difficulty=5&guild=1546&view=best&color=%23517fa5&chartTheme=%7B%22title%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2234px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%7D%2C%22chart%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23fafafa%22%2C%22fontSize%22%3A%2220px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%2C%22borderWidth%22%3A6%2C%22borderColor%22%3A%22%23512da8%22%2C%22backgroundColor%22%3A%22%23212121%22%2C%22borderRadius%22%3A3%2C%22plotBorderWidth%22%3A0%7D%2C%22plotOptions%22%3A%7B%22series%22%3A%7B%22dataLabels%22%3A%7B%22enabled%22%3Afalse%2C%22style%22%3A%7B%22color%22%3A%22contrast%22%2C%22fontSize%22%3A%2215px%22%2C%22fontWeight%22%3A%22bold%22%2C%22textOutline%22%3A%221px%201px%20contrast%22%7D%7D%7D%2C%22line%22%3A%7B%22lineWidth%22%3A4%7D%7D%2C%22yAxis%22%3A%7B%22title%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2240px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%2C%22margin%22%3A50%7D%2C%22labels%22%3A%7B%22style%22%3A%7B%22fontSize%22%3A%2224px%22%7D%2C%22y%22%3A20%7D%7D%2C%22xAxis%22%3A%7B%22title%22%3A%7B%22style%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2240px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%7D%7D%2C%22labels%22%3A%7B%22style%22%3A%7B%22fontSize%22%3A%2224px%22%7D%7D%7D%2C%22legend%22%3A%7B%22itemStyle%22%3A%7B%22fontFamily%22%3A%22Impact%22%2C%22color%22%3A%22%23f5f5f5%22%2C%22fontSize%22%3A%2222px%22%2C%22fontWeight%22%3A%22normal%22%2C%22fontStyle%22%3A%22normal%22%2C%22cursor%22%3A%22pointer%22%7D%2C%22borderWidth%22%3A0%7D%7D

Note that while this example doesn't look great, it does change various colors, fonts, and font sizes, and can be a good base if you want to start building your own theme.

Changing Colors For Charts With Multiple Bars/Lines

If you want to change the bar/line color for charts with multiple bars/lines, you may have to specify it more than once. For example:

Encounter Progress Duration Chart

In order to customize the color of entries of this chart, you'll need to pass one color per boss -- and, where supported, phase -- in the order they were progressed on.

For example, Echo progressed in this order:

{
  "series": [
    {
      "data": [
        { "color": "red" }, // Vigilant Guardian
        { "color": "green" }, // Skolex
        { "color": "blue" }, // Dausegne
        { "color": "red" }, // Xy'mox
        { "color": "green" }, // Halondrus quick look
        { "color": "blue" }, // Pantheon
        { "color": "red" }, // Lihuvim
        { "color": "green" }, // Halondrus
        { "color": "blue" }, // Anduin
        { "color": "red" }, // Lords of Dread quick look
        { "color": "green" }, // Rygelon quick look
        { "color": "blue" }, // Lords of Dread
        { "color": "red" }, // Rygelon
        { "color": "green" } // Jailer
      ]
    }
  ]
}
https://www.warcraftlogs.com/embed/encounter-progress-duration-chart/29?difficulty=5&guild=1546&color=%23517fa5&chartTheme={%22series%22:[{%22data%22:[{%22color%22:%22red%22},{%22color%22:%22green%22},{%22color%22:%22blue%22},{%22color%22:%22red%22},{%22color%22:%22green%22},{%22color%22:%22blue%22},{%22color%22:%22red%22},{%22color%22:%22green%22},{%22color%22:%22blue%22},{%22color%22:%22red%22},{%22color%22:%22green%22},{%22color%22:%22blue%22},{%22color%22:%22red%22},{%22color%22:%22green%22}]}]}

Resulting Link

Fight Percentage Per Pull Chart

By default, given multiple guilds, this will pull colors from our base theme. To override them, you can pass brand colors (roughly estimated here) in the order they appear as series, as indicated in the x-axis labels:

{
  "series":[
    { "color": "red" }, // Echo
    { "color": "orange" }, // Method
    { "color": "lightgrey" }, // Skyline
    { "color": "blue" }, // SK Pieces
    { "color": "black" } // Liquid
  ]
}
https://www.warcraftlogs.com/embed/fight-percentage-per-pull-chart/29?difficulty=5&guilds=312,1546,488971,315666,149604&color=%23517fa5&xAxis=pull&chartTheme={%22series%22:[{%22color%22:%22red%22},{%22color%22:%22orange%22},{%22color%22:%22lightgrey%22},{%22color%22:%22blue%22},{%22color%22:%22black%22}]}

Resulting Link

Good to know

  • If your customizations do not apply, you likely have a syntax error in the passed JSON or it's getting cut off.
  • URLs have a max length limit which you might hit with excessive customization.

Contact Us

As always, we love to hear your feedback. Please join us on Discord to share any feedback and suggestions, or to ask any questions.

Follow our Twitter for updates!

If you have any support questions, please reach out to our support team at [email protected].

Advertisements
Remove Ads