Add a full-featured image editor to your application. Let users create beautiful screenshots without leaving your app.
Add in 5 minutes
PostMessage control
Sandboxed iframe
Match your brand
<iframe
src="https://zenshotz.com/embed?plugin=screenshot&partnerId=YOUR_ID"
width="100%"
height="600"
frameborder="0"
allow="clipboard-write"
></iframe>window.addEventListener('message', (event) => {
const { type, imageData } = event.data;
if (type === 'ZENSHOTZ_READY') {
console.log('Editor is ready!');
}
if (type === 'ZENSHOTZ_EXPORT_COMPLETE') {
// Save the exported image
downloadImage(imageData);
}
});| Parameter | Type |
|---|---|
partnerIdrequired | string |
plugin | string |
theme | light | dark |
hideExport | boolean |
hideSidebar | boolean |
ZENSHOTZ_LOAD_IMAGELoad an image from URL
ZENSHOTZ_LOAD_IMAGE_BASE64Load from base64
ZENSHOTZ_SET_BACKGROUNDSet background settings
ZENSHOTZ_EXPORTTrigger export
ZENSHOTZ_GET_STATEGet editor state
ZENSHOTZ_READYEditor loaded
ZENSHOTZ_EXPORT_COMPLETEExport finished
ZENSHOTZ_EXPORT_ERRORExport failed
ZENSHOTZ_STATECurrent state
<!DOCTYPE html>
<html>
<head>
<title>My App with Zenshotz</title>
</head>
<body>
<div id="editor"></div>
<button id="export-btn">Export Image</button>
<script>
// Create iframe
const iframe = document.createElement('iframe');
iframe.src = 'https://zenshotz.com/embed?plugin=screenshot&partnerId=YOUR_ID';
iframe.style.cssText = 'width:100%;height:600px;border:none;';
document.getElementById('editor').appendChild(iframe);
// Listen for events
window.addEventListener('message', (e) => {
if (e.data.type === 'ZENSHOTZ_EXPORT_COMPLETE') {
// Download the image
const link = document.createElement('a');
link.download = 'image.png';
link.href = e.data.imageData;
link.click();
}
});
// Export button
document.getElementById('export-btn').onclick = () => {
iframe.contentWindow.postMessage({
type: 'ZENSHOTZ_EXPORT',
format: 'png',
resolution: '2x'
}, '*');
};
</script>
</body>
</html>Contact us to get your partner ID and start embedding Zenshotz in your app.