Embedding Your 360 View
If you're trying to embed your Imajize 360 Viewer into a basic web page then this guide is the perfect starting point! There are hundreds of platforms that can power your website. Wordpress, Shopify, Squarespace, Magento... Each of these can require some customization to function correctly. If you are working with a shopping platform, we suggest you visit or "Embed & Share" section. For Squarespace, or any website where basic HTML can be used, please follow the instructions below.
Follow these simple instructions to embed an Imajize 360 viewer on your website.
Once you have created a view, by uploading images to a project, embedding 360 images on your website is an easy cut and paste task. We give users 5 options for embedding their views. Follow the steps below to find the embedding options.
- First log in to your Imajize account and click “Projects” in the upper right corner of the screen.
- Next, select the project you want to work with.
- Now select the name of the 360 view you want to Embed.
- In the top right corner you will see “Embed”. Click “Embed”.
iFrame and Responsive codes are typically your first choice. These should be used when you want to display a 360 view directly on a webpage.
- iFrame:
Use the iFrame method when you know the exact width, in pixels, of the space you want to fill with the image. You can click and drag the slider underneath the embed code to set the exact width. - Responsive:
The Responsive embed option will enlarge the 360 view to fit the widest possible space that the web page layout allows for. More and more websites are adopting mobile-friendly responsive page layouts to ensure that your images look great on both laptops and mobile devices. - Popup:
When space is a challenge or if iFrames are not allowed by your web service provider you can insert a link to your 360 view. Clicking the link will open a 360 view in a new web browser window. An example of popup code is below. You can change the width of the popup window by dragging the slider bar underneath the code. To customize the link you can skip past the scary code below and replace “360 view” with text or an image of your choosing.
<a width="600" height="400" href="http://embed.imajize.com/6543307" target="imajize" onclick="window.open(this.href,'imajize','width='+this.getAttribute('width')+',height='+this.getAttribute('height')+',scrollbars=no,toolbar=no,status=no,resizable=no,menubar=no,location=no,directories=no,top=10,left=10');">360° View</a>
- eBay:
The “eBay” link type is a common link format that can be used on almost any webpage, not just eBay. This option can be used in the instances where iFrames or Javascript code is not allowed. A lot of web services like eBay and Amazon have strict rules about the types of images or code you can add to your product listings. If the other display methods don’t seem to work, this link format probably will.
Tip: If you want this link to open up a new browser window add target="_blank" like in the example below.
<a target="_blank" href="http://embed.imajize.com/6088120">360° View</a>- URL:
The final embedding method is for web designers and coders who really know their way around website development. This is the most basic url that can be incorporated into web apps or designs where a high degree of customization is needed.
Tip: A lot of CMS systems give you the choice of using a visual editor or a code editor. Sorry but you need to use the code editor. If you are aren't comfortable using a text or code editor, you can contact our customer support and we can help. Wordpress users should check out our Wordpress guide.
- URL:
