Home > Fans United Widgets > Polls Widget > Poll Widget Storybook: Stories with Hardcoded Examples

Poll Widget Storybook: Stories with Hardcoded Examples

What is the Poll Storybook?

Our Storybook is an interactive testing environment where you can preview and experiment with Poll widgets before embedding them on your website. Unlike the Management Portal where you configure settings and generate embed code, the Storybook provides a visual interface to see exactly how your polls will look and behave with different configurations.

This article focuses exclusively on the hardcoded example stories - pre-built poll variations using Red Bull Racing Poll data that you can explore immediately without any API credentials or setup required.

How to Access the Storybook Stories

  1. Navigate to https://storybook.fansunitedmedia.com/
  2. In the left sidebar, locate the COMPONENTS section
  3. Click on PollVote to expand and view all available stories

Available Hardcoded Example Stories

All these stories use pre-built example data (the Red Bull Racing Poll) to demonstrate the poll's core functionality. They're perfect for understanding how different poll versions and functionalities work without needing any API credentials or live data:

  • Formula 1 Red Bull Poll - The foundation example. Serves for understanding core poll functionality.
  • Multiple Choice - Demonstrates multiple selection functionality where users can choose up to 2 options. Shows how the interface adapts for multi-select scenarios.
  • Max Attempts Reached - Shows the final state when user has exhausted all voting attempts. Displays results with user's choices highlighted.
  • Auth Requirement: LEAD - Demonstrates lead form integration for collecting user information before or after voting. Shows lead form integration with customizable fields, campaign and privacy policy links.
  • Auth Requirement: REGISTERED - Poll requiring user authentication. Demonstrates sign-in flow with configurable CTA variants (onClick, link, or custom component).
  • Unauthorized (401/403 Error) Poll - Error state when user lacks proper authentication. Shows how the component handles 401/403 errors across different templates.
  • Poll Not Found (404 Error) - Error state when the requested poll doesn't exist or is unavailable.
  • Poll API Error (400/500 Error) - Error handling for processing issues.

πŸ“ Note: The πŸ”§ Client Poll (Live Data) story is covered in a separate article, as it requires API credentials to connect to your real poll data.

πŸ“Ή Video Coming Soon: Poll Widget Storybook: Walkthrough of Poll Stories with Hardcoded Examples

Accessing the Widget Controls

Each hardcoded story comes with interactive controls that let you modify the poll widget's appearance and behavior in real-time. The purpose of these controls is to help you preview how each setting looks visually with a working poll example, making it easier to decide which configurations to use when you're ready to embed polls on your own website.

To access these controls:

  1. Click on any hardcoded story to open it
  2. In the top-right corner, click the Settings icon (βš™οΈ)
  3. Select Show addons from the dropdown menu

  4. The Controls tab will appear

 

Available Controls

The following controls are available for multiple hardcoded stories and let you experiment with different configurations:

  • template - Choose widget layout variant: Standard (classic card layout), Split (two-side layout), or Overlay (full-bleed overlay)
  • language - Interface language. Also used to infer default phone country when Lead Phone Country Code is empty
  • imagePosition - Position of the image relative to the main content (only available for Standard layout)
  • themeOptionsMode - Switch between Light or Dark theme mode
  • optionsLayout - Options layout in the options screen.
  • leadsPosition - Where to show the lead form: before or after vote
  • leadsFields - Which fields to include in the lead form (fullName, firstName, lastName, email, gender, country, phoneCountryCode, phoneNumber)
  • Sign-in CTA type - Choose how the Sign-in CTA behaves. Priority: component > onClick > link
  • Sign-in label - Label to show on the CTA when using onClick or link

πŸ“š Note: The themeOptions control allows advanced customization of spacing, colors, and fonts. This will be covered in detail in a separate article: Advanced Theme Customization with themeOptions (Coming Soon).

πŸ“Ή Video Coming Soon: Preview Any Changes Visually with Hardcoded Examples: Master our Storybook Controls

 

Further Reading

Updated: