Graphics Feed

A graphics feed is a data stream that provides real-time information which can be used to create on-screen graphics in various applications such as live broadcasts. This feed is designed to integrate fan engagement Experiences into screen graphics to automatically update and display relevant content based on the provided Element data.

The simplified graphics feed offers a streamlined and user-friendly approach to accessing Element data that aligns with the model of major graphics systems.

To explore use cases, go to TV & Streaming Graphics.

Easy graphics integration

• Sequences data by element

• Places all element data within one node per elements

• Additional data is located in one place under the parent node.

Features

• Returns element data including a question, options, custom fields configured by the App Spec, and basic parameters.

• Filtering by the question field value (questionField[KEY]=VALUE query parameter)

• Filtering by the element field value (elementField[KEY]=VALUE query parameter)

• Filtering by element type (type=ELEMENT_TYPE)

• Filtering by event ID (eventID=ID query parameter)

• Filtering by event field value (eventField[KEY]=VALUE query parameter)

• Combining filters

Example 1

Feed format for a standard Trivia Element

{
  "label": "Question: Who is the all-time leading scorer in NBA history?",
  "type": "trivia-element",
  "question": {
    "label": "Who is the all-time leading scorer in NBA history?",
    "fields": {
      "text": "Who is the all-time leading scorer in NBA history?",
      "imageUrl": "//cdn.example.com/quickfire-quiz-header.png"
    }
  },
  "options": [
    {
      "label": "Lebron James",
      "votes": 0,
      "fields": {
        "text": "Lebron James"
      }
    },
    {
      "label": "Kobe Bryant",
      "votes": 0,
      "fields": {
        "text": "Kobe Bryant"
      }
    },
    {
      "label": "Kyle Malone",
      "votes": 0,
      "fields": {
        "text": "Kyle Malone"
      }
    }
  ],
  "elementFields": {
    "accessLevel": "public",
    "layout": "stacked",
    "pin": false
  },
  "extra": {
    "start_at": "2023-07-20T12:47:46.000Z",
    "end_at": "2023-07-20T16:47:46.000Z",
    "voters": 0
  }
}

Example 2

Feed format for a Poll Element containing custom fields

  "label": "Have you heard of the new energy drink 'Voltz' that is sponsoring this event?",
  "type": "poll-element",
  "question": {
    "label": "Have you heard of the new energy drink 'Voltz' that is sponsoring this event?",
    "fields": {
      "text": "Have you heard of the new energy drink 'Voltz' that is sponsoring this event?"
    }
  },
  "options": [
    {
      "label": "Yes, I have tried it and love it!",
      "votes": 0,
      "fields": {
        "text": "Yes, I have tried it and love it!"
      }
    },
    {
      "label": "Yes, I have heard of it but haven't tried it yet.",
      "votes": 1,
      "fields": {
        "text": "Yes, I have heard of it but haven't tried it yet."
      }
    },
    {
      "label": "No, I haven't heard of it before.",
      "votes": 0,
      "fields": {
        "text": "No, I haven't heard of it before."
      }
    },
    {
      "label": "No, I don't drink energy drinks.",
      "votes": 0,
      "fields": {
        "text": "No, I don't drink energy drinks."
      }
    }
  ],
  "elementFields": {
    "layout": "stacked",
    "aspectRatio": "16 / 9",
    "gamification_points_correctAnswer": null,
    "themes": "light",
    "enableReactions": false,
    "pin": false,
    "showCountdown": false,
    "selectSound": null,
    "containerId": null,
    "accessLevel": "public",
    "pointsThreshold": 100,
    "enableSponsor": true
  },
  "extra": {
    "start_at": "2023-06-07T09:34:48.000Z",
    "end_at": "2023-07-07T08:35:45.000Z",
    "voters": 1
  }
}

How to access the graphics feed

The feed is available in two places in Studio:

1. Under Project Settings

Graphics feed URL example in Project Settings

1. In the embed modal of every Event timeline

Click on the embed icon

Graphics feed URL in the embed modal