Call To Action

Preview
Code

CallToAction.jsx

"use client";

import { usePlayerSelector } from "@/registry/react/PlayerProvider";

export function CallToAction() {
  const callToAction = usePlayerSelector((p) => p.callToAction);
  return <div>{callToAction ?? "Listen to this article"}</div>;
}

Installation

npx @beyondwords/cli components add call-to-action

pnpm dlx @beyondwords/cli components add call-to-action

yarn dlx @beyondwords/cli components add call-to-action

bunx --bun @beyondwords/cli components add call-to-action

Usage

import { PlayerProvider } from '@/registry/react/PlayerProvider';
import { CallToAction } from '@/registry/react/CallToAction';

export function Player() {
  return (
    <PlayerProvider args={{ projectId: 9504, contentId: "ba00ef51-03ac-4a85-8b98-e45c957e8ef8", showUserInterface: false }}>
      <CallToAction />
    </PlayerProvider>
  );
}

The component reads callToAction from the surrounding PlayerProvider via usePlayerSelector, so it re-renders only when that value changes. When the source has no call-to-action configured, it falls back to "Listen to this article". Edit the fallback or the markup to match your UI.

Reference


Props	None
Player state read	`callToAction`
Events emitted	None (display only)
Requires	a `PlayerProvider` ancestor

Getting started

Components

Examples

Installation

Usage

Reference

​Installation

​Usage

​Reference

Installation

Usage

Reference