Skip to main content

​
Widget Components

The Solid SDK provides fully-featured widget components for different distribution types. Each widget handles state management, UI rendering, and user interactions.

​
Available Widgets

ComponentDescriptionUse Case
QueueWidgetVirtual waiting roomHigh-demand launches
DrawWidgetLottery/raffle entryRandom selection events
AuctionWidgetReal-time biddingAuction sales
WaitlistWidgetPre-registration signupComing soon pages
TimedReleaseWidgetFlash sale windowLimited-time offers
ExperienceWidgetFull journey orchestrationMulti-step experiences

​
QueueWidget

Virtual waiting room with position display and estimated wait times. 
import { QueueWidget } from "@waitify-io/fanfare-sdk-solid";

function QueuePage() {
  return (
    <QueueWidget
      queueId="queue_123"
      title="Join Our Queue"
      description="Get in line for exclusive access"
      showHeader={true}
      showEstimatedWait={true}
      showActions={true}
      onEnter={() => console.log("Entered queue")}
      onLeave={() => console.log("Left queue")}
      onPositionChange={(pos) => console.log("Position:", pos)}
    />
  );
}

​
QueueWidget Props

PropTypeDefaultDescription
queueIdstringRequiredQueue identifier
titlestringi18nHeader title
descriptionstringi18nHeader description
showHeaderbooleantrueShow header section
showEstimatedWaitbooleantrueShow wait time estimate
showActionsbooleantrueShow action buttons
themeExperienceTheme-Theme configuration
onEnter() => void-Callback on enter
onLeave() => void-Callback on leave
onPositionChange(position: number) => void-Callback on position change

​
DrawWidget

Lottery/raffle entry with countdown and result display. 
import { DrawWidget } from "@waitify-io/fanfare-sdk-solid";

function DrawPage() {
  return (
    <DrawWidget
      drawId="draw_123"
      title="Win Exclusive Access"
      description="Enter for a chance to win"
      showHeader={true}
      showCountdown={true}
      showActions={true}
      onEnter={() => console.log("Entered draw")}
      onWithdraw={() => console.log("Withdrew entry")}
      onResult={(result) => console.log("Result:", result)}
      onProceed={() => (window.location.href = "/checkout")}
    />
  );
}

​
DrawWidget Props

PropTypeDefaultDescription
drawIdstringRequiredDraw identifier
titlestringi18nHeader title
descriptionstringi18nHeader description
showHeaderbooleantrueShow header section
showCountdownbooleantrueShow countdown timer
showActionsbooleantrueShow action buttons
drawTimeDate-Override draw time
themeExperienceTheme-Theme configuration
onEnter() => void-Callback on enter
onWithdraw() => void-Callback on withdraw
onResult(result: "won" | "lost") => void-Callback on result
onProceed() => void-Callback on proceed CTA

​
AuctionWidget

Real-time bidding with bid history and countdown. 
import { AuctionWidget } from "@waitify-io/fanfare-sdk-solid";

function AuctionPage() {
  return (
    <AuctionWidget
      auctionId="auction_123"
      title="Exclusive Item Auction"
      description="Place your bids"
      showHeader={true}
      showBidHistory={true}
      showCountdown={true}
      currencyCode="USD"
      locale="en-US"
      onBid={(amount) => console.log("Bid placed:", amount)}
      onOutbid={() => console.log("You were outbid!")}
      onWin={() => console.log("You won!")}
      onProceed={() => (window.location.href = "/checkout")}
    />
  );
}

​
AuctionWidget Props

PropTypeDefaultDescription
auctionIdstringRequiredAuction identifier
titlestringi18nHeader title
descriptionstringi18nHeader description
showHeaderbooleantrueShow header section
showBidHistorybooleantrueShow recent bids
showCountdownbooleantrueShow countdown timer
currencyCodestring"USD"Currency for display
localestring-Locale for formatting
themeExperienceTheme-Theme configuration
onBid(amount: number) => void-Callback on bid
onOutbid() => void-Callback when outbid
onWin() => void-Callback on win
onProceed() => void-Callback on proceed CTA

​
WaitlistWidget

Pre-registration signup with countdown to open. 
import { WaitlistWidget } from "@waitify-io/fanfare-sdk-solid";

function WaitlistPage() {
  const opensAt = new Date("2024-03-15T10:00:00Z");

  return (
    <WaitlistWidget
      waitlistId="waitlist_123"
      title="Coming Soon"
      description="Sign up to be notified"
      showHeader={true}
      showCountdown={true}
      showActions={true}
      opensAt={opensAt}
      onEnter={() => console.log("Joined waitlist")}
      onLeave={() => console.log("Left waitlist")}
      onProceed={() => (window.location.href = "/experience")}
    />
  );
}

​
WaitlistWidget Props

PropTypeDefaultDescription
waitlistIdstringRequiredWaitlist identifier
titlestringi18nHeader title
descriptionstringi18nHeader description
showHeaderbooleantrueShow header section
showCountdownbooleantrueShow countdown timer
showActionsbooleantrueShow action buttons
opensAtDate-When waitlist opens
themeExperienceTheme-Theme configuration
onEnter() => void-Callback on join
onLeave() => void-Callback on leave
onProceed() => void-Callback when opened

​
TimedReleaseWidget

Flash sale window with urgency countdown. 
import { TimedReleaseWidget } from "@waitify-io/fanfare-sdk-solid";

function FlashSalePage() {
  return (
    <TimedReleaseWidget
      timedReleaseId="tr_123"
      title="Flash Sale"
      description="Limited time only!"
      showHeader={true}
      showCountdown={true}
      showActions={true}
      checkoutUrl="/shop"
      onEnter={() => console.log("Entered flash sale")}
      onShop={() => console.log("Started shopping")}
      onComplete={() => console.log("Completed purchase")}
      onExit={() => console.log("Exited sale")}
    />
  );
}

​
TimedReleaseWidget Props

PropTypeDefaultDescription
timedReleaseIdstringRequiredTimed release identifier
titlestringi18nHeader title
descriptionstringi18nHeader description
showHeaderbooleantrueShow header section
showCountdownbooleantrueShow countdown timer
showActionsbooleantrueShow action buttons
checkoutUrlstring-URL for shopping
endTimeDate-Override end time
themeExperienceTheme-Theme configuration
onEnter() => void-Callback on enter
onShop() => void-Callback on shop click
onComplete() => void-Callback on complete
onExit() => void-Callback on exit

​
ExperienceWidget

Full journey orchestration handling all stages. 
import { ExperienceWidget } from "@waitify-io/fanfare-sdk-solid";

function ExperiencePage() {
  return (
    <ExperienceWidget
      experienceId="exp_123"
      autoStart={true}
      autoEnterWaitlist={false}
      checkoutUrl="/checkout"
      onJourneyChange={(snapshot) => {
        console.log("Stage:", snapshot.journeyStage);
      }}
      onAdmitted={(token) => {
        console.log("Admitted with token:", token);
      }}
      onError={(error) => {
        console.error("Journey error:", error);
      }}
    />
  );
}

​
ExperienceWidget Props

PropTypeDefaultDescription
experienceIdstringRequiredExperience identifier
autoStartbooleanfalseAuto-start on mount
accessCodestring-Pre-fill access code
autoEnterWaitlistbooleanfalseAuto-join waitlist
checkoutUrlstring-Checkout redirect URL
themeExperienceTheme-Theme configuration
variantWidgetVariant-Visual variant
onJourneyChange(snapshot: JourneySnapshot) => void-Journey state callback
onAdmitted(token: string) => void-Admission callback
onError(error: Error) => void-Error callback

​
Slots and Render Props

All widgets support customization through slots and render props. See Component Customization for details.

​
Slots Example

<QueueWidget
  queueId="queue_123"
  slots={{
    header: (props) => (
      <div class="custom-header">
        <h2>{props.title}</h2>
        <Badge>{props.status}</Badge>
      </div>
    ),
    actions: (props) => <Button onClick={props.onEnter}>Get In Line</Button>,
  }}
/>

​
Render Props Example

<QueueWidget queueId="queue_123">
  {({ status, position, enter, leave }) => (
    <div class="my-custom-ui">
      {status === "queued" ? (
        <div>
          <p>Position: {position}</p>
          <button onClick={leave}>Leave</button>
        </div>
      ) : (
        <button onClick={enter}>Enter</button>
      )}
    </div>
  )}
</QueueWidget>