Custom widgets

Custom widgets

Custom widgets let you create fully custom widget interfaces while leveraging the Arena content system. Using the BlazeSDK.WidgetCustomView() API, you implement a custom renderer that receives content data and renders it however you choose (see WidgetCustomView example). For example, you can render thumbnail grids, carousels, lists, a single button, and so on. Your custom renderer receives the contents with properties like title, thumbnail, duration, and view status, plus a playContent() callback to trigger native playback in the Experiences player. This gives you full creative control over the visual presentation while the Experiences SDK handles backend functionality like content delivery, analytics tracking, and video playback.

WidgetCustomView(containerId: string, options: ICustomWidgetOptionsWithDataSource): ICustomWidgetView

Returns an ICustomWidgetView object.

ICustomWidgetOptionsWithDataSource extends IWidgetViewOptions

IBlazeCustomRenderer

Renders the content items to the provided container element.

export interface IBlazeCustomRenderer {
  /**
   * Renders the content items to the provided container element.
   * 
   * @param contents - Array of content items to render (stories, videos, moments)
   * @param container - HTML element where the custom UI should be rendered
   * @param playContent - Callback function to trigger content playback by content ID
   */
  render(
    contents: BlazeContentItem[],
    container: HTMLElement,
    playContent: (contentId: string) => void
  ): void;
  
  /**
   * Optional cleanup method called when the widget is destroyed.
   * Use this to remove event listeners, clear timers, or perform other cleanup.
   */
  destroy?(): void;
}

Pages in this section

• Custom widget content types: IBlazeContent, IBlazeStory, IBlazeMoment, IBlazeVideo, and the shared thumbnail types.
• WidgetCustomView example: a full renderer that draws a thumbnail grid.

For the methods and members on the returned view, see WidgetView class. For the standard row, grid, and embedded widgets, see BlazeSDK class.