React Shared Components
Interactive testing environment for react-shared components
Current: Default
SitePreviewButton
Product preview button with embedded previews for courses, digital downloads, meetings, and webinars
Interactive Playground
Customize the component properties and see the changes in real-time
Premium Course Bundle
Transform your skills with our comprehensive course bundle
Product Type Examples
Different product types with their preview components
Course with Module Preview
Complete Web Development Course
Master web development from basics to advanced concepts
Digital Download with Asset List
Premium Design Templates
Professional templates for your next project
Meeting with Calendar
1-on-1 Consultation
Get personalized guidance for your project
Choose Date
UTC
April 2026
Webinar with Session Times
Live Masterclass
Join our exclusive live training session
Currently, there are no upcoming events. Please check back later!
API Reference
Props
titlestring - Product title (default: "Button")
buttonTextstring - Call-to-action button text (default: "Button Text")
taglinestring - Subheading/description text (default: "Subheading text goes here")
productType"course" | "digital-download" | "meeting" | "webinar" - Product type that determines preview component
productobject - Product data for preview components (course modules, digital download assets, etc.)
userobject - User data (required for meeting/webinar types)
isDemoboolean - Demo mode for calendar/webinar previews (default: false)
layout"default" | "bleed-horizontal" | "bleed-vertical" | "padding-vertical" | "brim" | "ode" | "nova" | "crest" | "rung" | "glint" - Layout variant
onButtonClick(data?: { preSelectValue: boolean }) => void - Button click handler
onCalendarDateSelected(data: { pageId?: number; date: string }) => void - Calendar date selection handler
onWebinarSessionSelected(data: { pageId?: number; session: WebinarSession }) => void - Webinar session selection handler
Usage Notes
Product Type Previews
The component automatically renders different preview components based on the productType prop:
- course: Shows CoursePreview with module/lesson structure
- digital-download: Shows DigitalDownloadPreview with asset list
- meeting: Shows Calendar for booking appointments
- webinar: Shows WebinarCalendar for selecting session times
Dual CTA Buttons
The component includes two buttons: a primary CTA button and a "Learn More" text button. The primary button can pass a preSelectValue flag when calendar dates or webinar sessions are pre-selected.
Interactive Previews
For meeting and webinar types, users can interact with the calendar/session selector directly within the preview. Selecting a date or session triggers the respective callback and automatically sets the preSelectValue flag.
Demo Mode
Use the isDemo prop for calendar and webinar previews to show sample data without making actual API calls.