We recommend extracting the Iframe embed code from the dashboard. If you are hand editing this snippet please educate yourself on correct ways of specifying all required attributes. This article is discussing a number of key places where things may get overlooked.
You could adjust the dimensions of the iframe. These numbers you will in all probability edit when embedding into a web page.
All attributes of Iframe are as important as SRC attribute which everyone is familiar with. if you want your customers to be able to full screen the WalkInto tour please make sure that these attributes are left intact.
<iframe allowfullscreen webkitallowfullscreen mozallowfullscreen width="600" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://walkinto.in/tour/lJQz3MJ2Ylekl7f3f1nKl"></iframe>
Embedding Walkinto tour Full Page
Remember to set margins 0 for the parent page's <body> tag to avoid empty spaces surrounding your tour. Use the following CSS snippet to your <HEAD> section.
<style type="text/css">
body{
margin:0 !important;
}
</style>
Make Full Screen click work from IFrames
Browser security prevents Iframes becoming full screen by default. To solve this problem it is important to include corerct set of security request attributes into the Iframe snippet. We have seen that some older Content Management Systems (CMS) strips valid HTML attributes. To avoid all these issues use the following format that works in almost all cases. If there are exceptions please let us know. You always have an option of turning off the 'Full Screen' feature from the settigns dropdown on the editor.
<iframe width="100%" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://walkinto.in/tour/lJQz3MJ2Ylekl7f3f1nKl" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen msallowfullscreen="true"> </iframe>
NOTE: allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen msallowfullscreen="true"
How to make Iframes look great on mobile?
The embedded Iframe is responsive. It adjusts intelligently to the mobile view when access from a mobile device. However you can help WalkInto to render better by including some <META> tags into the host page where you are putting the <IFRAME> code. if this snippet is not present the IFrame will not scale nicely.
<meta name="viewport" content="width=device-width, initial-scale=1">
An example of responsive, full page IFRAME embedded WalkInto tour is this. You can inspect source to see correct settings
Example: https://jsfiddle.net/boni/fjm5pdm1/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<title>[PLEASE_CHANGE_TITLE_TO_WHAT_YOU_NEED]</title>
<style type="text/css">
body {
margin: 0 !important;
}
.outercontainer {
position: relative;
margin:auto;
width: 100%;
}
.outercontainer:after {
content: "";
display: block;
padding-bottom: 100%;
}
.content {
position: absolute;
width: 100%;
height: 100%;
font-size: 2em;
}
</style>
<body>
<!--
Change the SRC attribute in the following IFRAME snippet to correct WalkInto URL
USE HTTPS whenever possible.
-->
<div class="outercontainer">
<iframe class="content"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
oallowfullscreen="true"
msallowfullscreen="true"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0"
width="100%"
height="100%"
src="https://walkinto.in/tour/l172R5yItglkemhAck8Ke">
</iframe>
</div>
</body>
</html>