Skip to main content

How to embed our radio schedule widget

This customizable widget displays your radio programming schedule on any website with automatic timezone detection and responsive design.

Updated over a week ago

Getting Started

There are three ways to integrate the schedule widget into your website:

Method 1: Interactive Embed Builder (Recommended)

The easiest way to get started is through our visual embed builder:

  1. Click the "Embed Schedule" button in any schedule via the dashboard

  2. Choose your layout: Select between Grid (weekly calendar view) or List (chronological list view)

  3. Configure your settings:

    • Set your preferred start day (Monday - Sunday)

    • Choose your locale for date formatting

    • Toggle "Focus On-Air On Load" to automatically scroll to the current on-air show on page load

  4. Customize the appearance:

    • Select font type (Default, Google Fonts, or Custom)

    • Set background colors for schedule and grid

    • Configure show colors and text colors

    • Adjust grid border and text colors

  5. Click "Get Code" to generate your custom embed code

  6. Copy and paste the generated code into your website's HTML

Method 2: Direct Script Embed

For quick implementation without customization, use this basic embed code:

<script src="https://unpkg.com/studiio-embeddable-radio-schedule@latest/build/static/js/studiio-schedule-latest.min.js"></script>

<studiio-schedule
  id="your-schedule-id"
  layout="grid"
  start-day="1"
  locale="en-US"
></studiio-schedule>

Method 3: NPM Package Integration

For React applications and modern build processes:

npm install studiio-embeddable-radio-schedule

Then import and use in your React application:

import 'studiio-embeddable-radio-schedule/build/static/js/studiio-schedule-latest.min.js';

function MyApp() {
  return (
    <studiio-schedule
      id="your-schedule-id"
      layout="grid"
      start-day="1"
      locale="en-US"
    />
  );
}

Layout Options

Grid Layout

The grid layout displays your schedule as a weekly calendar view with:

  • Days of the week as columns

  • Time slots as rows (15-minute intervals)

  • Shows positioned as blocks spanning their duration

  • Automatic handling of overnight shows

  • "ON AIR" indicator for currently broadcasting shows

  • Search functionality with live filtering

  • Navigation tools (go to on-air, back to top)

List Layout

The list layout presents your schedule as a chronological list with:

  • Shows grouped by day of the week

  • Sidebar navigation with day selection

  • Search functionality with real-time filtering

  • Compact mobile-friendly design

  • Current show highlighting

  • Configurable sidebar position (left or right)

Configuration Properties

Basic Properties

Property

Type

Default

Required

Description

id

string

required

Yes

Your unique schedule ID from Studiio

layout

string

grid

No

Layout type: grid or list

start-day

string

1

No

Week start day (1 = Monday, 7 = Sunday)

locale

string

en-US

No

Locale for date/time formatting, a string with a BCP 47 language tag

scroll-to-on-air

string

false

No

Auto-scroll to currently on-air show on first page load, true or false

sidebar-position

string

left

No

Sidebar position for list layout: left or right

Styling Properties

Property

Type

Description

style-font-family

string

Custom font family

style-google-font

string

Google Fonts font family

style-background-color

string

Main background color (hex)

style-grid-color

string

Grid/sidebar background color (hex)

style-grid-border-color

string

Grid border color (hex)

style-grid-text-color

string

Grid text color (hex)

style-show-color

string

Show background color (hex)

style-show-text-color

string

Show text color (hex)

style-day-title-color

string

Day title color for list layout (hex)

Features

Automatic Timezone Handling

The widget automatically detects and displays times in the user's local timezone, with timezone information shown in the footer.

Responsive Design

Both layouts are fully responsive and adapt to different screen sizes:

  • Desktop: Full feature set with hover effects

  • Tablet: Optimized touch interactions

  • Mobile: Streamlined interface with touch-friendly controls

Real-time Updates

  • "ON AIR" indicators update automatically

  • Current time highlighting

  • Live search results

Interactive Elements

  • Clickable shows (if external URLs are configured)

  • Search functionality with instant filtering

  • Navigation shortcuts (go to on-air, back to top)

  • Smooth scrolling animations

Accessibility Features

  • Proper ARIA labels and roles

  • Keyboard navigation support

  • High contrast mode compatibility

Custom Branding Example

<studiio-schedule
  id="your-id"
  layout="list" 
  style-google-font="Roboto"
  style-background-color="#f8f9fa"
  style-show-color="#e74c3c"
  sidebar-position="right"
  start-day="1"
></studiio-schedule>

Technical Notes

Browser Compatibility

  • Modern browsers (Chrome 60+, Firefox 55+, Safari 12+, Edge 79+)

  • Mobile browsers (iOS Safari 12+, Chrome Mobile 60+)

Performance

  • Lazy loading for improved page speed

  • Efficient DOM updates for real-time features

  • Minimal external dependencies

Data Source

The widget fetches schedule data from the Studiio API using your unique schedule ID. Data is cached for optimal performance and includes automatic error handling with user-friendly error messages.

Shadow DOM

The widget uses Shadow DOM encapsulation to prevent CSS conflicts with your existing website styles while maintaining full customization control through the provided styling properties.

Version History

Version

Release Date

Changes

1.0.1

2025-08-31

• Initial publish on GitHub/npm

Did this answer your question?