API Data Sources

Visual Radio Assist allows you to integrate external data feeds directly into your visual content, bringing real-time information to your broadcast. Whether you want to display breaking news, weather updates, sports scores, or social media feeds, API Data Sources make it possible to keep your audience informed with dynamic, up-to-date content.

What Are API Data Sources?

An API Data Source is an external data feed that supplies real-time information to your Visual Radio broadcast. These sources can include:

RSS Feeds: News feeds, blog updates, and content syndication

REST APIs: Weather data, sports scores, stock prices, and custom integrations

JSON/XML Endpoints: Structured data from third-party services

By connecting these data sources to Visual Radio Assist, you can create dynamic elements like news tickers, live updates, and contextual information that enhances your broadcast's relevance and engagement.

Understanding API Data Source Structure

Every API Data Source in Visual Radio Assist consists of two main components:

Base URL: The primary domain or server address (e.g., api.visualradioassist.cloud)

Endpoint: The specific path to the data you want to access (e.g., /test-endpoint or /authentication)

Together, these create the complete URL that will be requested: api.visualradioassist.cloud/test-endpoint

This structure allows you to organize multiple endpoints under a single base URL, making it easier to manage related data sources from the same service.

How to Add an API Data Source

Creating an API Data Source involves configuring the connection to your external feed and linking it to a variable for use in your visuals.

Step 1: Set Up the Feed as a Data Source

We'll use the BBC World News feed as an example to demonstrate the setup process.

Configure Base URL and Endpoint

The complete BBC World feed URL is: https://feeds.bbci.co.uk/news/world/rss.xml

To set this up in Visual Radio Assist:

Navigate to Settings and select the Data Sources tab

Click to create a new Data Source

Set the Base URL to https://feeds.bbci.co.uk/news

Select RSS as the data format

Specify the Endpoint as /world/rss.xml

Choose the Fetch Type

Visual Radio Assist offers different methods for retrieving data:

Cloud Proxied: The Visual Radio Cloud server fetches the data on your behalf. This is essential when:

The feed doesn't allow direct browser requests

CORS (Cross-Origin Resource Sharing) restrictions prevent browser access

Browser Direct: Your browser fetches the data directly from the source (use only when the feed explicitly allows browser access).

Tip: When in doubt, start with Cloud Proxied. If you're unsure whether a feed allows direct browser access, test it first. Switching to Cloud Proxied typically resolves most fetch errors related to CORS restrictions.

Test Your Connection

Once configured, use the Test Request button to verify that data is loading correctly. This allows you to inspect the data structure and confirm that your endpoint is responding as expected.

Step 2: Link the Feed to a Variable

After your feed loads successfully, you need to connect it to a variable to make the data accessible within the Visual Designer.

Auto-Generate Variables

The simplest method is to enable the Auto-generate variable toggle. When you save the API Data Source, Visual Radio Assist will automatically:

Create a new variable with a descriptive name based on your feed

Make the variable accessible throughout all visual creation areas

Allow you to use the data in tickers, lower thirds, full-screen updates, and more

This automated approach saves time and ensures consistent naming conventions across your data sources.

Working with Authenticated Feeds

Many professional APIs and internal systems require authentication to access their data. Visual Radio Assist supports authenticated feeds through:

Authorization Tokens: Add bearer tokens or API keys directly into the configuration

Custom Headers: Configure custom HTTP headers for specialized authentication methods

Endpoint Parameters: Include authentication credentials as URL parameters when required

This flexibility enables you to work with:

Internal company APIs

Paid data services

Restricted or private feeds

Enterprise-level integrations

Using API Data Sources in Your Visuals

Once your data source is configured and linked to a variable, you can display the information in your visual content.

Step 1: Create a Text Layer

Open the Visual Designer and navigate to the visual where you want to display data

Create a new Text Layer

Select the API Data Source Variable you just created

Open the Data Selector to browse the feed's complete structure

Choose the specific data field you want to display (e.g., title for news headlines)

Step 2: Configure Data Display

To display multiple items from your feed:

Open the Text Helper panel

Copy the loop helper code

Paste it into your text field

This will automatically loop through all feed items and display the selected field for each

Creating a News Ticker

To transform your data feed into a scrolling news ticker:

Select your text layer containing the feed data

Scroll to the bottom of the Properties Panel

Enable the Ticker Effect

Adjust ticker speed, direction, and behavior to suit your needs

Your real-time news ticker is now ready to display!

Step 3: Design Your Visual

With your data displaying correctly, enhance the appearance and layout using the Visual Designer's full suite of tools:

Layer Management: Stack multiple layers to create complex layouts

Branding Elements: Add station logos, background graphics, and color schemes

Additional Data Fields: Display descriptions, publication times, author names, or other metadata from the same feed

Styling Controls: Adjust fonts, colors, sizes, animations, and positioning

The Visual Designer gives you complete control over how your external data appears on screen, ensuring it integrates seamlessly with your broadcast's visual identity.