Vistity Iframe

1 - iFrame Authorization

  1. Open explore.vistity.com editor and navigate to the tour editor
  2. Open “Embeded Webistes” tab
  3. Add the url of the site that you intend to embed the iFrame (max of 5 allowed per tour)

2 - Prepare page layout

The following steps are necessary if you want to remove WordPress theme’s default header and footer, so to have a full screen view of explore.vistity.com

Create a new template

Step 1

  1. Go to the main folder of the active theme (wp-content/themes/active_theme) We recommend using a child theme, so the changes are not going to be overridden during a theme update.
  2. Create a new php file called “full-screen.php”. In this file, paste the following code:
<?php /* Template Name: Full Screen */ ?>
<?php get_header(‘blank’); ?>
<?php
/* Start the Loop */
while ( have_posts() ) :
the_post();
the_content(); endwhile;
// End of the loop.
?>
<?php get_footer(‘blank’);

Step 2

  1. Make a copy of the existing active header file and name it “header-blank.php”. 
  2. In this new file, remove all the unnecessary HTML code, and make sure to copy CSS roles from the following example.
  3. The result should match the following:
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<?php
wp_head();
?>
<style>
.page-template-full-screen { height: 100vh; }
.page-template-full-screen iframe { border: 0; }
</style>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>

Step 3

  1. Make a copy of the existing active footer file and name it “footer-blank.php”.
  2. In this new file, remove all the unnecessary HTML code and add the following script (code between &lt;script&gt; tags). 
  3. The result should be something like the following:
<?php wp_footer(); ?>
</body>

2 - Create custom shortcode

Step 1

Install Shortcoder plugin:
Shortcoder

After installing:

    1. Navigate to Shortcoder
    2. Click on Create shortcode
    3. Get the iFrame code by clicking the link in the Tour Editor. Each tour has its own unique iFrame code.
    4. Enter the iFrame code into the Shortcode you just created

2 - Page creation

  1. Create a new page and select the template called “Full Screen”. You should find a dropdown on the right menu, under “page attributes”.
  2. Paste the previously created shortcode in the page, it should look like the following.
  3. Save the page
[sc name=”iframe”]

GET IN TOUCH

Vistity would love to hear from you. Please send your general inquires here or book a demo with one of our VR experts.