When you configure 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 lead form settings that you can simply copy and embed on your website.
π Important Note Before Reading: This guide applies only to our pre-built Classic Quiz widgets. If you're using your own custom implementations through APIs or SDKs, these template settings won't affect your custom UI.
π Prerequisites: The Configure leads setting is only available when your quiz has Auth Requirement set to Lead. If you haven't configured this yet, you'll need to set it up first before the Configure leads option becomes available.
βοΈ Setting Configure Leads and Getting Your Embed Code
- In the Management Portal, navigate to Classic Quizzes in the left sidebar
- Find your quiz and click on it to edit
- Ensure your quiz has Auth Requirement set to Lead (required for lead configuration)
- In the right sidebar, locate the Widget embed code section
- Find the Configure leads toggle switch and toggle it ON
- Configure your Lead fields:
- Select which information to request from users (e.g., full name, email, phone)
- Arrange fields in your preferred order
- Notice how selections appear in the
<div>
code asdata-lead-fields="fullName, email"
- Set the Lead position:
- Choose Before to show the lead form before the quiz starts
- Choose After to show the lead form after quiz completion
- This updates the
data-lead-position
attribute in your embed code
- Copy the updated embed code for your website
π‘ Note for new quizzes: If you're creating a new quiz, you'll need to save it first with your basic details (title, questions, etc.) before the Widget embed code section becomes available for configuration.
Further Reading
π Coming Soon!
Your Visual Guide
REMINDER: Before configuring lead fields, ensure your Auth Requirement is set to Lead. You can find this setting in the right panel under Configuration β Auth Requirement
Navigate to Classic Quizzes in the left sidebar and click on your saved quiz to open the editing interface
In the right sidebar, locate the Widget embed code section
Toggle ON the Configure leads switch
Select your desired lead fields and arrange them in preferred order - these will appear as data-lead-fields
in your embed code
Choose Before or After for lead position timing and double-check that the generated <div>
code has been updated with your lead configuration
Copy the embed code for your website