This article introduces the three main ways to integrate with our sports gamification platform, explains what widgets are and when to use them, and includes match quiz examples to help you choose the best approach for your needs and get started with our widgets.
βοΈ Three Ways to Integrate Our Platform
We offer three main integration approaches to fit different technical needs and timelines:
- APIs: Each feature in the Fans United platform is exposed as an API. Use APIs if you want server-to-server integration with complete control over both frontend and backend implementation.
- SDK Integration: Our SDKs expose platform functionality in a developer-friendly way, working on web. Use SDKs if you want to customize UX on web (create new designs that fit your brand) or integrate the platform in a mobile app.
- Widget Components: Complete ready-to-use components with built-in UI and functionality
π Learn more about all integration options in our technical documentation.
What are the Widgets?
Widgets are ready-to-use UI components that bring our sports gamification features to life on your platform with minimal development work. Think of them as plug-and-play solutions that handle both the functionality and the user interface, so you can focus on your core business instead of building match quiz interfaces from scratch.
We provide the widgets for faster integration, designed to be used out-of-the-box with extensive configuration options to get clients up and running as quickly as possible. However, if your goal is complete UI control and deep customization beyond widget capabilities, we recommend using the Fans United APIs or SDKs instead.
One of the main challenges our clients have faced is the difficulty of testing and previewing match quizzes before going live. With widgets, this problem no longer exists. Using our Storybook environment, which works with real-life data from your own match quizzes, you can preview exactly how any match quiz will look and function. Once you're satisfied with what you see, simply copy the code and embed it directly into your website - no guesswork, no surprises.
π‘ When to Choose Widgets
Choose widgets if you want to:
- Get up and running quickly with minimal development work
- Launch features in hours, not weeks or months
- Have a consistent, tested user experience out of the box
- Easily preview and test your match quizzes with real data before going live using our Storybook
Consider API/SDK integration if you need:
- Complete control over the user interface design
- Deep customization that goes beyond widget configuration options
- Integration with complex existing systems or custom workflows
- Have more development resources available for custom implementation
βοΈ How Widgets Work
Our widgets are pre-built components that you can directly embed on your website without any coding. They can be configured from two main places, and the best part: A code is automatically generated for you - no manual coding required:
Management Portal configuration - Create reusable widget configurations with your desired settings (authentication, branding, leads, theme options and other additional settings). The portal generates a unique Configuration ID that stores all your settings. Simply select your config ID from a dropdown when embedding widgets, and the auto-generated loader code handles everything automatically.
- Storybook preview and testing - Before embedding anything, preview your match quizzes in our Storybook using your actual match quiz data. See exactly how they'll look, test functionality, and adjust configurations until you're satisfied to go live.
π Match Quiz Widget Preview - See What You Can Achieve!
See how your match quizzes could look with just a few clicks! Here are examples of a match quiz created through our portal and previewed in our Widgets Storybook, showing the interactive prediction flow and comprehensive prediction summary display:
Further Reading
π New Configuration System (Recommended):
- Widget Configurations: How to Set Up and Apply Configuration to User-Centric Widgets - Learn how to use the new Configuration ID system to set up widgets once and reuse configurations across multiple games with zero coding.
π Legacy Configuration Guides: The following guides cover the legacy approach of configuring widgets individually per game. While this method still works, we recommend using the new Configuration ID system above for faster, code-free widget deployment.
- How to Set Your Quiz Widget Template
- How to Change Image Position for Standard Template
- How to Enable or Disable Answer Explanations
- How to Configure Lead Fields and Position
π Storybook Guides:
- π Match Quiz Storybook Articles Coming Soon