How Are The Game Rules Displayed on Quiz Widgets? Can I Choose Different Display Types?

📖 Game Rules Now Available on Widgets Across All Quiz Types

Game rules are essential for transparency and fair play, but displaying them effectively on widgets used to be a challenge. Previously, rules configured in the Management Portal couldn't be shown directly on our widgets. The only workaround was using the Terms and Conditions URL (found in Branding → URLs), which appeared as a clickable link on the lead generation form—but this only worked for games requiring lead forms.

What's New?

Now, with the new Rules Display feature, you can display rules on all your widgets through an interactive rules info icon, giving players instant access to game rules regardless of authentication type. This guide shows you how the rules display works and how to customize it when needed through the Management Portal or through our Storybook.

📖 Default Rules Display Behavior

When you add rules to a game through the Management Portal, a rules info icon (i) automatically appears on your widget next to the "QUIZ" label.

The default behavior is simple:

• Game has rules configured → Rules Info icon appears next to the quiz label → Clicking opens a modal with the rules (default behavior, no manual configuration needed)
• ❌ Game has no rules configured → No info icon appears on the widget

You only need to customize the rules display settings manually if you want to change from the default modal to a link redirect behavior.

📖 Rules Display Options: Modal vs. Link

Modal Display (Default - Automatic)

• Player clicks the "i" icon located next to the quiz label and a modal window opens displaying the rules text directly within the widget

Link Redirect (Custom - Requires Configuration)

• Player clicks the "i" icon and browser redirects to a predefined URL where your detailed rules are hosted
• Configurable via the:
  •  "Configure rules display options" toggle in the 'Widget embed code' section in the portal
  • "Rules display type" setting if you're using the Storybook
• You can set whether the link opens in a new tab or same tab

⚙️ When and How to Configure the Rules Display

You only need to follow these steps if you want to change the default modal behavior to a link redirect.

When you configure rules display settings in the 'Widget embed code' section in the Management Portal, the system automatically updates the <div> code with corresponding data attributes. This way you can generate customized embed code with your preferred rules display settings that you can simply copy and embed on your website.

Step 1: Navigate to Your Game Settings

1. In the Management Portal, navigate to your game type (e.g., CLASSIC QUIZZES, POLLS, PERSONALITY QUIZZES) in the left sidebar
2. Find your game and click on it to edit

Step 2: Access the Widget Embed Code Section

1. In the right sidebar, open the Widget embed code section
2. Scroll down to find the Configure rules display options toggle

Step 3: Customize Rules Display to Use Link Behavior

1. Toggle ON the Configure rules display options switch
2. From the Display type dropdown, you'll see two options:
   • Modal (this is already the default behavior that happens automatically when rules are defined)
   • Link (select this to change to link redirect behavior)

To Configure Link Display:

1. From the Display type dropdown, select Link

2. Two additional fields will appear: 

   URL

   • Enter the full URL where your rules are hosted (e.g., www.ExampleRulesLink.com)

   Target

   • Select how the link opens:
     • Opens URL in a new tab
     • Opens URL in the same tab
3. Notice how the generated <div> code updates automatically below with:
   • data-rules-display-type="link"
   • data-rules-display-url="your-url-here"
   • data-rules-display-target="_blank" or "_self"
4. Copy the updated embed code for your website
5. This will result in the info icon redirecting players to your specified URL when clicked

📝 Note for new games: If you're creating a new game, you'll need to save it first with your basic details (title, questions, etc.) before the Widget embed code section becomes available for configuration.

📖 Rules Icon Placement Across Widget Templates

The rules icon appears next to the "QUIZ" label, but the placement of this label varies depending on your widget template type:

• Standard Template: The "QUIZ" label (with the rules info icon) appears at the top-center
• Split Template: The "QUIZ" label (with the rules info icon) appears at the top-left
• Overlay Template: The "QUIZ" label (with the rules info icon) appears at the top-left

📸 Refer to the screenshots at the end of this article showing the "QUIZ" label and rules icon placement for each template type.

📖 The Terms and Conditions URL Workaround (Still Available)

The previous Terms and Conditions URL workaround remains available:

• Navigate to: Branding → URLs → Terms and Conditions URL and add your URL
• This link appears on the lead generation form
• ⚠️ Important: This only displays when authRequirement = lead
• If you want to use this for displaying basic game rules, we recommend using the new Rules Configuration feature instead

💡 Important Notes

✅ Feature availability - This feature is available from:

• fansunited-frontend-core - 0.0.30
• fansunited-frontend-components - 0.0.30
• fansunited-widgets-cdn - 0.0.85

✅ Default behavior - If your game has rules, they automatically display as a modal on the widgets - no manual configuration needed (if you've updated to the newer widget versions)

✅ Manual configuration only for link redirect - You only need to use the "Configure rules display options" toggle if you want link redirect behavior instead of the default modal

✅ All widget types supported - This feature works across all available widget types (Classic Quiz, Polls, Personality Quiz, etc.)

✅ No rules = No icon - If you don't have rules configured for your game, the info icon simply won't appear on your widget

📖 Further Reading

🎯 Widget FAQs:

• Classic Quiz Widget FAQs
• Poll Widget FAQs

📚 Main Widget Documentation:

• Classic Quiz Widget
• Polls Widget
• Personality Quiz Widget

📷  Visual Library: Rules Icon placement across templates

Standard Template: Info icon next to "QUIZ" label at top-center

Split Template: Info icon next to "QUIZ" label at top-left

Overlay Template: Info icon next to "QUIZ" label at top-left