Comparison Widget
Side-by-side before/after of an ad. Great for case studies and testimonials.
Live preview
Widget preview renders with a valid API key. Sign up to get yours.
Comparison Widget
Code snippets
HTML / iframe
<iframe src="https://maniai.com/embed/compare?key=YOUR_KEY&before=ID1&after=ID2" width="800" height="400" frameborder="0"></iframe>React
import { useEffect, useRef } from 'react';
export function ManiComparisonWidget({ apiKey, ...props }) {
const ref = useRef(null);
useEffect(() => {
if (!ref.current) return;
ref.current.src = `https://maniai.com/embed/comparison-widget?key=${apiKey}`;
}, [apiKey]);
return <iframe ref={ref} width="400" height="400" frameBorder="0" {...props} />;
}WordPress
<!-- WordPress Shortcode -->
[mani_widget type="comparison-widget" key="YOUR_KEY" width="400" height="400"]
<!-- Or use the iframe directly in any HTML block -->
<iframe src="https://maniai.com/embed/compare?key=YOUR_KEY&before=ID1&after=ID2" width="800" height="400" frameborder="0"></iframe>Use cases
✓ Case study page
✓ Blog post ad review
✓ Client presentation
Privacy and analytics
The widget loads content from maniai.com via iframe. It sends the public workspace key for authentication (read-only). No cookies are set on the host page. No personal data is collected from visitors. The widget respects the host page's cookie consent.