Our widgets offer three different templates. While there are many additional configuration options and each template is highly customizable, each template gives its own individual type of look. Choose the perfect layout for your quiz with these three template options, each offering a different visual approach while maintaining the same powerful functionality.
π What is the Standard Template?
The Standard template provides a clean, centered layout that puts focus on your questions and answers. Unlike the Overlay template where your branding or image takes the whole background, or the Split template where there's clear emphasis on the image, the Standard template keeps visuals secondary to content. Perfect for professional environments or when you want the main emphasis to fall on the content (questions & answers).
Key characteristics:
- Questions and answers take up the main screen space, even when images are added
- Always includes a progress indicator that keeps users engaged (unlike other templates)
- Clean, stable background behind content area (dark & light mode options) - images never replace the main background like in Overlay template
- Adapts seamlessly with or without images
π Ready to Get Started?
π Configure from the Management Portal: How to Set Your Quiz Widget Layout Template from the Management Portal
π Configure from the Storybook: How to Set Your Quiz Widget Layout Template from the Storybook (Coming Soon)
Both generate a div code with the appropriate configuration that you can copy and paste directly into your website. Choose the Management Portal for configuring quiz-specific settings, or use the Storybook to visually preview exactly how your quiz will look with real data before embedding it and going live.
π· Standard Template Visual Examples:
- Standard Quizzes Without images: Dark & Light mode showing all option layouts
- Standard Quizzes With images: Image positioned on left and right sides
π What is the Split Template?
The Split template divides your content into distinct left and right panels, with each taking exactly half of the screen. The image is always positioned on the left, while the quiz content (questions and answers) occupies the right half. This creates visual layouts that highlight both imagery and content effectively.
Key characteristics:
- Content split between left and right sections: Quiz content (questions and answers) occupies one half, image content fills the other half
- Strong visual impact with prominent image placement
- Great balance between visuals and functionality
π Ready to Get Started?
π Configure from the Management Portal: How to Set Your Quiz Widget Layout Template from the Management Portal
π Configure from the Storybook: How to Set Your Quiz Widget Layout Template from the Storybook (Coming Soon)
Both generate div code with the appropriate configuration that you can copy and paste directly into your website. Choose the Management Portal for configuring quiz-specific settings, or use the Storybook to visually preview exactly how your quiz will look with real data before embedding it and going live.
π· Split Template Visual Examples:
- Split Template Quizzes with images: Light and Dark Mode
π What is the Overlay Template?
The Overlay template creates a visually immersive experience by overlaying your quiz content directly on the added background imagery, perfect for creating engaging, visual-first experiences.
Key characteristics:
- Quiz content overlaid on the background imagery
- Perfect for branding - background images can showcase brand identity
- Maximum visual impact
π Ready to Get Started?
π Configure from the Management Portal: How to Set Your Quiz Widget Layout Template from the Management Portal
π Configure from the Storybook: How to Set Your Quiz Widget Layout Template from the Storybook (Coming Soon)
Both generate div code with the appropriate configuration that you can copy and paste directly into your website. Choose the Management Portal for configuring quiz-specific settings, or use the Storybook to visually preview exactly how your quiz will look with real data before embedding it and going live.
π· Overlay Template Visual Examples:
Overlay Template Quizzes: Different Option Layouts
Further Reading
Ready to Get Started? Build Your Ready to Go Quizzes:
π How to Set Your Quiz Widget Layout Template from the Management Portal
πHow to Set Your Quiz Widget Layout Template from the Storybook (Coming Soon)