Using Visualizer Blocking to Collect User Information
- Andrei Dyakov
The Wizart Visualizer provides a feature to temporarily block user interactions. This functionality can be useful for gathering contact information (e.g., email addresses) or other details before users can continue interacting with the Visualizer.
This article outlines how to use the blocking feature effectively, including a code example for implementation.
Why Use Blocking in Visualizer?
Blocking the Visualizer can help you:
Capture Leads: Collect email addresses or other personal information to follow up with users.
Encourage Engagement: Pause the session at key moments, such as after applying a product or uploading a custom interior, to gather insights or feedback.
Control User Flow: Ensure users meet certain conditions, like providing data, before resuming interaction with the Visualizer.
How It Works
Detect Events: Monitor specific events in the Visualizer (e.g.,
PRODUCT_APPLYorCUSTOM_INTERIOR_UPLOAD).Block Interaction: Use the
block()method to restrict user actions within the Visualizer.Display a Form: Overlay a form on top of the Visualizer iframe to collect user information.
Unblock After Submission: Once the required information is provided, use the
unblock()method to restore Visualizer access.
<div id="visualizer-container"></div>
<div id="form-container" class="hidden">
<form id="user-form">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Email:</label>
<input type="email" id="email" name="email" required />
<button id="submit" type="button">Submit</button>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const visualizer = new WizartDeploymentKit.Visualizer({
token: 'YOUR_WEB_TOKEN',
targetElement: document.getElementById('visualizer-container'),
});
const form = document.getElementById('form-container');
const submitButton = document.getElementById('submit');
let applyEventCount = 0; // Counter for PRODUCT_APPLY events
visualizer.load().then(() => {
visualizer.show();
// Subscribe to PRODUCT_APPLY events
WizartDeploymentKit.EventBus.subscribe((event) => {
applyEventCount++;
console.log(`Apply events triggered: ${applyEventCount}`);
if (applyEventCount === 3) {
visualizer.block();
form.classList.remove('hidden'); // Show the form
}
}, WizartDeploymentKit.VISUALIZER_EVENTS.PRODUCT_APPLY, visualizer);
// Form Submission Handler
submitButton.addEventListener('click', () => {
const email = document.getElementById('email').value;
const name = document.getElementById('name').value;
if (name && email) {
console.log(`Name: ${name}, Email: ${email}`);
visualizer.unblock(); // Unblock the Visualizer
form.classList.add('hidden'); // Hide the form
applyEventCount = 0; // Reset the counter
} else {
alert('Please fill in both Name and Email.');
}
});
});
});
</script>
<style>
#form-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1000;
}
#form-container.hidden {
display: none;
}
#visualizer-container {
width: 100%;
height: 600px;
}
</style>
Key Steps
Create the Form
Design a form for user input (e.g., name and email). Position it over the Visualizer iframe with CSS to ensure a seamless experience.Block the Visualizer
Usevisualizer.block()when a specific event is triggered or a button is clicked.Handle Form Submission
Collect user data upon form submission and validate the input.Unblock the Visualizer
Once the required information is submitted, callvisualizer.unblock()to resume user interactions.
Enhancements
Track Events: Pair this feature with Wizart event tracking to trigger the block at specific actions (e.g.,
PRODUCT_APPLYorCUSTOM_INTERIOR_UPLOAD).Persist Data: Send the collected information to your server for further processing or lead management.