Dynamic IFRAME Embed is the most elegant, flexible and efficient way to embed a Walkinto to a webpage.  This technique helps you use an image as the placeholder for the final WalkInto page while parent page loads.  Once the parent page loading is complete, the placeholder image fades away and Walkitno is revealed.  This technique completely eliminates IFRAMEs slowing down parent page - a common concern for many Web Masters.  Pages using this technique can confidently include a WalkInto 'above the fold' (part of the top section initially visible) on a web page.


Dynamic IFrames work well with common WYSIWYG platforms like WIX and Word Press.  Following is a lve example of HTML code that creates such effects.  Click on the Result tab to see dynamic loading of Walkinto.


JS Fiddle Demo



How to get the Code Snippet.



Customization Options - Anatomy of Code Snippet

Dynamic Embed code snippet you get from WalkInto dashboard should work right out of the box without any customization.  At the same time we have built in a few handy ways to customize the loading experience further.  Since these customization also includes access to CSS styling, opportunities are limitless.


<IMG
  width="100%" 
  height="100%"             
  src="//walkinto.in/socialthumbnail/WJPyhf1SV7WklDJ3MySV7/0"
  data-type="dynamiciframe"                    
  data-src="//walkinto.in/tour/WJPyhf1SV7WklDJ3MySV7"
  data-width="100%"
  data-height="600">
</IMG>
<script async src="//walkinto.in/js/loadtour-nonblocking.js"></script>


  1. To use a custom thumbnail : Modify SRC attribute of <IMG> tag to specify a new image as thumbnail.  Example : 
    <IMG src="https://images.pexels.com/photos/239975/pexels-photo-239975.jpeg" ....> </IMG>
       


  2. You can include a STYLE or CLASS attribute to <IMG> tag to pass in CSS styling for the WalkInto IFRAME.  Example : 
    <style>
.mywalkintoiframeclass{
     background-color:#FFF;
    padding:20px;
}
</style>
<IMG class="mywalkintoiframeclass" src="https://images.pexels.com/photos/239975/pexels-photo-239975.jpeg" ....> </IMG>
       


       


    <IMG style=" background-color:#FFF;padding:20px;" src="https://images.pexels.com/photos/239975/pexels-photo-239975.jpeg" ....> </IMG>
       


     
        


  3. Use data-width and data-height attributes to specify height and width parameters for the IFRAME  Example : 
    <IMG
  width="100%" 
  height="100%"             
  src="//walkinto.in/socialthumbnail/WJPyhf1SV7WklDJ3MySV7/0"
  data-type="dynamiciframe"                    
  data-src="//walkinto.in/tour/WJPyhf1SV7WklDJ3MySV7"
  data-width="800px"
  data-height="400px">
</IMG>
       


  4. You may paste the <script> tag to the HEAD or BODY section of the parent page.  But you cannot skip it.  Some Content Management Systems have specific techniques for including a JavaScript file to a web page.  Usually Web Masters will have good knowledge on how to include a Java Script file.
    1. Using with Wordpress : https://codex.wordpress.org/Using_Javascript 
    2. Using with WIX : https://www.wix.com/app-market/html-iframe-embed/overview 


More than one one Embed on a page


You can have any number of Dynamic  Iframe Embeds per page.  When you have such a scenario it is important that the <SCRIPT> tag is not duplicated.  We recommend placing <SCRIPT> tag in the <HEAD> section of the Web Page for best performance gains.  If pasting to <BODY> please ensure that <SCRIPT> tag is used only once per page.  Please see the example below.