Create custom data inputs with our API

If you want to display custom data in your design and our existing data inputs don't quite meet your needs, you can use our API and create your own custom data input. For example, some of our customers have created custom API inputs to broadcast real-time election results, lottery drawings, and Mars rover missions. Titler Live Broadcast includes several API examples and documentation to help you.

Note: This feature is only available in Titler Live Broadcast.

For example, the following image shows a controller BuzzFeed News created to broadcast live election results.

buzzfeed_controller.png

  1. Install and activate Titler Live Broadcast if you haven't already done so. (Our API documentation and example API inputs are installed with our app.)
  2. Navigate to one of the following locations on your computer and open index.html to view our API documentation.
    • Windows: C:\Program Files\NewBlueFX\Titler Content\Resources\Service Handlers\HTML\API Documentation\index.html
    • Mac: Macintosh HD/Library/Application Support/NewBlue/Titler Content/Resources/Service Handlers/HTML/API Documentation/index.html
  3. Follow the API instructions in index.html and create a custom API input. You can find examples of custom inputs in the following locations on your computer.
    • Windows: C:\Program Files\NewBlueFX\Titler Content\Resources\Service Handlers\HTML\API Examples
    • Mac: Macintosh HD/Library/Application Support/NewBlue/Titler Content/Resources/Service Handlers/HTML/API Documentation
  4. In Titler Live's playout interface, open a project (if a project isn't already open) and select a graphic in the playlist.
  5. Choose Inputs > General > API Examples and select your custom API input to add that input to the design.

    The custom API input you created appears in the Input drop-down list in the Attributes panel and in the playlist for that graphic. In addition, the custom API input and its variables appear in the Edit / Preview panel.

    Tips

    • You can also add inputs to a graphic from the Input drop-down list in the Attributes panel or playlist.
    • To remove an input from a graphic, right-click (Windows) or Control + click (Mac) on the name of an input in the Edit / Preview panel and choose Remove input.
  6. Click the Show Inputs button in the Edit / Preview panel to view the custom API input and variables. (If the input's variables aren't visible, expand the custom API list.)
  7. Click and drag an API variable onto an object in your graphic. Repeat this step for each variable you want to include in your graphic.

    Tip: To disconnect a variable from an object in your graphic, right-click a variable in the Edit / Preview panel and choose Disconnect variable.

Depending on how you designed your custom API input, your graphic may automatically show data from your data source or you can update your graphic with any controls that may be available in the panel for your custom input.

Was this article helpful?
2 out of 3 found this helpful
Have more questions? Submit a request