Examples
Real-world implementations and product use cases š”
Product Use Cases
Discover how leading companies leverage WhatIf to gather contextual user feedback, improve product experiences, and drive growth. Each use case includes implementation examples you can copy-paste.
Product Use Cases
Discover how companies use WhatIf to gather contextual feedback and improve their products:
- š E-commerce: Checkout optimization and recommendation feedback
- š¢ SaaS: Feature adoption tracking and team collaboration insights
- š» Developer Tools: Bug reports and performance monitoring
- š¬ Content Platforms: Video engagement and reading experience optimization
- š± Mobile Apps: App store ratings and cross-platform sync feedback
- š Education: Course completion insights and assessment feedback
- š° Financial Services: Payment flow optimization and onboarding success
Ready to implement? Check out our Product Use Cases guide for copy-paste examples tailored to your industry.
return
Dashboard content...
;
}
### Response Evolution Tracking
```tsx
// Track how user feedback changes over time
function FeatureUpdate({ user, featureVersion }) {
const { ask } = useWhatIf();
useEffect(() => {
// Backend automatically tracks this as iteration 2, 3, etc.
// if user has responded to this question before
ask('feature-feedback', {
user: {
id: user.id,
name: user.name
},
context: {
feature: 'new-dashboard',
version: featureVersion,
updateType: 'major'
}
});
}, [featureVersion]);
return <div>New feature available!</div>;
}Dashboard Controls: Creators can manage question visibility through the dashboard:
- Set re-asking rules (time-based or update-based)
- Manually trigger "Ask Again" for urgent re-feedback
- View analytics showing response evolution over time
E-commerce
Post-Checkout Satisfaction
import { useWhatIf } from '@twenty1tools/whatif';
import { useEffect } from 'react';
function CheckoutComplete({ orderId, total, user, org }) {
const { ask } = useWhatIf();
useEffect(() => {
// Ask after successful checkout with user tracking
ask('checkout-satisfaction', {
user: {
id: user.id,
name: user.name,
email: user.email
},
org: {
id: org?.id,
name: org?.name
},
context: {
orderId,
total,
timestamp: Date.now()
}
});
}, []);
return <div>Thank you for your order!</div>;
}Product Feedback
function ProductPage({ productId, user }) {
const { ask } = useWhatIf();
const handleAddToCart = () => {
// Add to cart logic...
// Ask for quick feedback with user tracking
ask('product-experience', {
user: {
id: user.id,
name: user.name
},
context: { productId }
});
};
return <button onClick={handleAddToCart}>Add to Cart</button>;
}SaaS Applications
Feature Launch Feedback
function NewFeature({ user }) {
const { ask } = useWhatIf();
useEffect(() => {
// Show after user interacts with feature
const timer = setTimeout(() => {
ask('new-feature-feedback', {
user: {
id: user.id,
name: user.name
},
context: {
feature: 'ai-assistant',
version: '2.0'
}
});
}, 10000); // After 10 seconds
return () => clearTimeout(timer);
}, [ask]);
return <div>New AI Assistant Feature</div>;
}Getting Started
Ready to implement WhatIf in your product? Start with our comprehensive guides:
š Quick Start
Get up and running in 5 minutes
š¼ Product Use Cases
Industry-specific implementation examples
šØ Theming
Customize your widget appearance
function ExitIntentDetection({ ask }) {
useEffect(() => {
let hasShown = false;
const pageLoadTime = Date.now();
const handleExit = (e) => {
if (e.clientY <= 0 && !hasShown) {
hasShown = true;
ask('exit-survey', {
context: {
timeOnPage: Date.now() - pageLoadTime,
scrollDepth: calculateScrollDepth()
}
});
}
};
document.addEventListener('mouseleave', handleExit);
return () => document.removeEventListener('mouseleave', handleExit);
}, [ask]);
return null;
}