Interactive Viewer Types
Explore the different types of 360° viewers available for embedding
Basic Viewer
Single 360° panorama viewer for showcasing individual images
Use the arrow buttons above to explore different viewer types
Implementation Code
Copy the iframe code for the viewer type you want to embed in your website:
<iframe
src="https://uasview.org/software/360-side-by-side-viewer?img1=YOUR_IMAGE_URL&enableScrollZoom=true"
width="100%"
height="600"
frameborder="0"
allowfullscreen
title="360° Basic Viewer">
</iframe>Custom Image Parameters
Basic Viewer Parameters
For a single 360° panorama, you only need one image URL:
?img1=YOUR_IMAGE_URL&enableScrollZoom=trueComparison Viewer Parameters
For side-by-side comparison, provide both images and set compare=true:
?img1=ORIGINAL_URL&img2=PROCESSED_URL&compare=true&leftLabel=Original&rightLabel=AI Enhanced&enableScrollZoom=trueGallery Viewer Parameters
For multiple panorama pairs, use a JSON-encoded array with the images parameter:
The gallery viewer images parameter should contain a JSON-encoded array of panorama pairs:
[
{
"id": "unique-id",
"original": "https://example.com/original.jpg",
"processed": "https://example.com/processed.jpg",
"title": "Panorama Title",
"leftLabel": "Original",
"rightLabel": "AI Enhanced"
}
]Responsive Design
For responsive websites, consider using CSS to make the iframe responsive:
.panorama-container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
.panorama-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}Best Practices
Performance
Set appropriate width and height attributes to prevent layout shifts during loading.
Accessibility
Always include a descriptive title attribute for screen readers and accessibility tools.
Security
Our viewers are served over HTTPS and include appropriate security headers for safe embedding.
Need Help?
If you need assistance with integration or have questions about customizing the viewers for your specific use case, we're here to help.