Embedding Tool
The embedding tool allows you to create a code you can add to 3rd party websites. Embedding the iGUIDE directly into a website provides a contained interactive experience. Below are the steps to access the Embedding Tool:
To begin, you must log in to The iGUIDE Portal: Here (The tool can also be accessed from the iGUIDE Report, just above Property Details) See Figure 1.
Figure 1: Embedding tool link.
Note: If you access the Embedding Tool through the iGUIDE Report, you may proceed to step #4.
Find the property you wish to embed into a website, and click on Edit: See Figure 2.
This will take you to the iGUIDE’s Edit page. You will see a list of options on the left-hand side of the webpage, click on </> Embedding Tool. See Figure 3.
Figure 3: </> Embedding Tool link.
You will then be presented with the Embedding Tool page, which contains a number of options.
The tool works by generating a code, which you then copy and paste into a website’s existing HTML code. See Figure 4.
Figure 4: Embedding tool.
There are many different options for the presentation of your iGUIDE through the use of the Embedding Tool:
Basic Options
Figure 5: Basic options
iGUIDE Size: You have 5 options to select from:
Responsive - This will automatically adjust the iGUIDE size to fit the available space on the website, and is best for mobile-friendly websites and deals with different monitor resolutions. This is the recommended option, as it eliminates potential viewing issues.
Small - this will display the iGUIDE in its smallest available frame. This would be best for smaller monitors or compact websites.
Medium - this will display the iGUIDE in a medium-sized frame and is suitable for the average monitor.
Large - this will display the iGUIDE in a larger setting, suitable for websites where more blank space is available to display the guide, and still fits into the average monitor resolution.
Custom - here you may set a custom width for the iGUIDE, for example, you may know that your website does not have any sidebars or advertisements, and want to utilize the entire width of the website. You can enter the width (in pixels) and the height will automatically be calculated. Example: A width of 1850 gives the guide a height calculation of 1055.
Start Options: This sets the default starting point of the iGUIDE, and has 5 options:
Default - This will use whatever option was set in the Default View (on the Edit Default View page of the iGUIDE, under iGUIDE View Tools)
iGUIDE - This will override the Default view, and start with the 3D Tour.
iGUIDE Autoplay - This will begin the 3D Tour automatically, auto-rotating the panorama, and moving on to the next panorama when complete.
Photos - This will begin the 3D Tour with the picture gallery of the property.
Photos Slide Show - This will begin the 3D Tour with the Photo Slide show, allowing a larger picture than the gallery.
External Video - If you have an External Video of the property, and wish to start the iGUIDE with your video, select this option. (you must first set up the external video, click here for a guide on the process.
iGUIDE Content:
Here you have 2 basic options.
Mute Music - Mutes the music throughout the 3D Tour, you can still select to enable sound within the 3D Tour if the viewer wishes.
Unbranded - Removes any branding from the 3D Tour, including Agent information.
Advanced Options
Figure 6: Advanced Options.
Initial Floor & Pano(rama) - Here you can override the settings that you have set in Default View. If you wish to select a different starting point for the 3D Tour.
iGUIDE Orientation - This will either display the iGUIDE in Landscape or Portrait mode, most people view their screen in landscape, so this is likely the best option.
Page Background Color - This option allows you to select a colour for the background: White, Black or Custom. For custom colour, you must use the hex code in a six-character format.
Other Options:
Hide Menu - Hides the top menu, this will lock your viewer into the mode you select, and they won’t be able to see the Agent information, nor the other view options available.
Hide Controls - Simply hides all the controls along the bottom edge of the 3D tour, such as On-Screen Measurements, Autoplay, Share, User Interface help, and Toggle Fullscreen
Minimize Floorplan - Automatically shrinks the floorplan to the bottom left side of the 3D Tour, allowing a wider viewing space for the panorama.
Loop Autoplay - At the end of the Autoplay 3D Tour, it will simply go back to the beginning and start again.
Automatically Start iGUIDE - This Automatically begins your Tour without having the viewer click to activate the iGUIDE.
Hide Photos Tab - Removes the option to view the Photos from the iGUIDE.
Hide Video Tab - If you have an External video linked to the iGUIDE, this will hide the option.
Hide Details Tab - This will hide the option to view the property details in the iGUIDE.
Hide Map Tab - Hides the Map tab, which displays the location of the property on Google Maps.
Hide “X” button in popups - This hides the “X” (close) button in popups within the iGUIDE, which is displayed in the upper right corner.
Embedding Code
This is the area where you will select the code to be pasted into a website
You have the option to generate HTML code specifically for WordPress, if you require this, simply tick the box that says “Embed iGUIDE in WordPress”.
To copy your HTML code, that contains all the options you selected, click the “Copy” button below:
Figure 7: HTML Code.
Preview
The preview shows what the iGUIDE will look like based on the selections above.
Be sure to check this preview before you copy and paste the HTML Code (or before you make the iGUIDE live).
You can check with the preview in between options and play around with it until you are happy with how your iGUIDE is displayed.
Figure 8: iGUIDE Preview
Note: Regarding the sizing of the iGUIDE.
Small = (962x548 pixels).
Medium = (1152x657 pixels).
Large = (1354x772 pixels).
Last updated
