What is the Personality Quiz Storybook?
Our Storybook is an interactive testing environment where you can preview and experiment with Personality Quiz 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 personality quizzes will look and behave with different configurations.
This article focuses exclusively on the hardcoded example stories - pre-built personality quiz variations using Traveller Personality Quiz data that you can explore immediately without any API credentials or setup required.
How to Access the Storybook Stories
- Navigate to https://storybook.fansunitedmedia.com/
- In the left sidebar, locate the COMPONENTS section
- Click on PersonalityQuizPlay to expand and view all available stories
Available Hardcoded Example Stories
All these stories use pre-built example data (the Traveller Personality Quiz) to demonstrate the personality quiz's core functionality. They're perfect for understanding how different personality quiz versions and functionalities work without needing any API credentials or live data:
- Traveller Personality Quiz - The foundation example. Serves for understanding core personality quiz functionality, including question flow and persona matching results.
- Max Attempts Reached - Shows the final state when user has exhausted all quiz attempts. Displays the matched persona result with a hidden try again button.
- Auth Requirement: LEAD - Demonstrates lead form integration for collecting user information before or after completing the quiz. Shows lead form with customizable fields, campaign and privacy policy links.
- Auth Requirement: REGISTERED - Personality quiz requiring user authentication. Demonstrates sign-in flow with configurable CTA variants (onClick, link, or custom component).
- Unauthorized (401/403 Error) Quiz - Error state when user lacks proper authentication. Shows how the component handles 401/403 errors across different templates.
- Quiz Not Found (404 Error) - Error state when the requested personality quiz doesn't exist or is unavailable.
- Quiz API Error (400/500 Error) - Error handling for processing issues.
π Note: The π§ Client Personality Quiz (Live Data) story is covered in a separate article, as it requires API credentials to connect to your real personality quiz data.
Personality Quiz Storybook: Walkthrough of Personality Quiz Stories with Hardcoded Examples
Accessing the Widget Controls
Each hardcoded story comes with interactive controls that let you modify the personality quiz 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 personality quiz example, making it easier to decide which configurations to use when you're ready to embed personality quizzes on your own website.
To access these controls:
- Click on any hardcoded story to open it
- In the top-right corner, click the Settings icon (βοΈ)
- Select Show addons from the dropdown menu
- 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 - Configure how answer options are displayed
- leadsPosition - Where to show the lead form: before or after quiz completion
- leadsFields - Which fields to include in the lead form (fullName, firstName, lastName, email, gender, country, phoneCountryCode, phoneNumber)
- Sign-in CTA Type - Customize the call-to-action type for sign-in prompts
- Sign-in Label - Customize the text label for sign-in buttons
- UsersLoggedIn - Simulate logged-in user states for testing
π 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).
Preview Any Changes Visually with Hardcoded Examples: Master our Storybook Controls
Further Reading
- π§ Personality Quiz Widget: FAQs (Coming Soon)
- Introduction to Our Personality Quiz Storybook
- Personality Quiz Widget: The 3 Template Types Explained (Coming Soon) π