What is the Polls Storybook?
Our storybook is an interactive environment where you can preview and test Polls widgets before embedding them on your website. Unlike the Management Portal where you just configure settings and generate embed code, Storybook provides a visual interface to see exactly how your polls will look and behave.
Think of it as a testing playground: you can explore different poll widget variations with hardcoded example data, interact with working examples to understand the full range of functionality available for Poll widgets, or even connect to real poll data using your API credentials for live testing.
Storybook vs. Management Portal: Why Use Both?
While the Management Portal is excellent for creating polls, configuring settings and generating embed code, it has one limitation: you can't see a visual preview of how your poll will actually appear on your website. The Portal updates the <div> code with data attributes, but you won't know how it looks until you embed it.
This is where the Storybook becomes invaluable. In the Management Portal, you configure your poll settings, choose layout templates, and generate customized embed code. In the Storybook, you see visual previews of the poll widgets, test the functionality before embedding, explore different poll variations and templates, and connect to your live poll data for real-world testing.
How to Access our Storybook
- Navigate to https://storybook.fansunitedmedia.com/
- In the left sidebar, locate the COMPONENTS section
- Click on PollVote to expand and view all available stories. Each story demonstrates a specific poll variation.
What are Stories?
In Storybook, a "story" is a specific example or variation of a component. Each story showcases the component in a particular state or configuration. For Poll widgets, each story demonstrates a different functionality or use case—like a multiple choice poll, a poll that collects lead information, or a poll showing an error state. Stories allow you to see isolated examples of how the widget behaves in different scenarios without needing to set up a full implementation.
Stories with Hardcoded Examples
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 & functionalities work without needing any API credentials or live data. The available stories are:
- 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 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.
Live Data Stories
This story allows you to connect to actual polls from your own environment rather than using pre-built examples. By entering your API credentials, you can test with real poll data and see how your configured polls will appear before deploying to your live website.
- 🔧 Client Poll (Live Data) - Connect to real poll data from your environment using API credentials. Perfect for development, debugging, and testing with your actual polls before embedding into your website.
Further Reading
Poll Widget: How to Manage it from the Portal?
Poll Widget: How to Manage it from the Storybook?
Coming Soon 📚