How to embed Tour Site script on the Property Website

How to embed Tour Site script on the Property Website

Tutorial

In this tutorial, you will learn how to embed the TourSite popup script on the property website. 

Step 1 - Embed the TourSite Popup Script inside the <head> tag

Embed the tour site popup script for the property inside the <head></head> tag
Example:
<div id="hy-toursite" class="hy-overlay"> </div>
<script type="text/javascript">
  ... (script information passed separately and different for each property)
</script>

Step 2- Embed the Tour Site Either in Pop-Up Button or Pop-Up URL

You can embed the Tour Site in the below mentioned either of the two ways:
  1.  Embed the TourSite Popup Button
  2.  Tour Site Popup URL

i. Embed the TourSite Popup Button

The other way is to embed the TourSite Popup Button by embedding the the Pop Button Script. The TourSite Popup button is a CTA button which can be placed anywhere on the property website. The recommended places to place the CTA are:
  1. Hero
  2. Menu
  3. Sidebar
  4. Footer
The Popup button script:
<a href="#" class="hytour-link" data-tourpopup="index">Tour a Tour</a>

Add the hytour-link class to the link that you want it will open the popup when someone clicks on it. You can add the data-tourpopup attribute to open a specific page.

ii. TourSite Popup URL

Another way is you can also append the 'tourpopup' to your website URL to open the popup automatically.
Property Website URL + "?tourpopup=index"


Preview of the TourSite added as Popup

Here is a preview of what the Popup will look like once implemented on the website!



Step 3 - Advanced Tour Site Settings (Optional)

You can also add different attribute values to redirect to the other sections of the Tour Site. The attributes and sections of the Tour Site are:
  1. index - Home Page
  2. 3d-tour - 3D Tour Index
  3. pre-recorded - Video Index
  4. in-person - Hy.ly Tour Scheduler
  5. live-video - Hy.ly Tour Scheduler
  6. self-guided - Hy.ly Tour Scheduler

You can get the Advanced Tour Settings in the below mentioned either of the two ways:
  1. By Adding the iframe Button Script
  2. By Adding the Link to the Pop-Up

a.  Add the iframe Button Script

Add the 'hytour-link' class to the link that you want it will open the popup when someone clicks on it. You can add the 'data-tourpopup' attribute to open a specific page.




The iframe scripts are as follows:
  1.  Show Popup > Index Page
    <a href="#" class="hytour-link" data-tourpopup="index" >Take a Tour</a>
  2. Show Popup > 3D Tour Video Page
    <a href="#" class="hytour-link" data-tourpopup="3d-tour" >3D Tour Videos</a>
  3. Show Popup > Pre-Recorded Videos Page
    <a href="#" class="hytour-link" data-tourpopup="pre-recorded" >View Pre-Recorded Videos</a>
  4.  Show Popup > In-Person Tour Page
    <a href="#" class="hytour-link" data-tourpopup="in-person" >In-Person Tour</a>
  5. Show Popup > Live Video Tour Page
    <a href="#" class="hytour-link" data-tourpopup="live-video" >Live Video Tour</a>
  6. Show Popup > Self-Guided Tour Page
    <a href="#" class="hytour-link" data-tourpopup="self-guided" >Self-Guided Tour</a>
Append the attribute values to your website URL to open the popup automatically.
Property Website URL + "?tourpopup=3d-tour"

Copy and add the URLs mentioned below for the respective pop-ups on the website.

Example:
  1. Index- https://avenueatyork.com/?tourpopup=index
  2. 3d-Tour - https://avenueatyork.com/?tourpopup=3d-tour
  3. Pre - Recorded - https://avenueatyork.com/?tourpopup=pre-recorded
  4. In - Person - https://avenueatyork.com/?tourpopup=in-person
  5. Live - Video - https://avenueatyork.com/?tourpopup=live-video
  6. Self-guided - https://avenueatyork.com/?tourpopup=self-guided


    • Related Articles

    • Schedule and Use Live Virtual Tour

      Tutorial In this tutorial, you will learn how to schedule and use 'Live Virtual Tour' Step 1 - Schedule Live Virtual Tour - Prospect Step 1a - Schedule Tour from Property Website The prospect can go to the property website click on 'Schedule Tour' ...
    • Where To Find Tour Scheduler Embeds

      Context In this article, you will learn how to obtain the scripts for the tour scheduler and implement them on the website. There are three types of scripts that are used for implementing hyTours tour scheduler on the property website: Scheduler URL: ...
    • How To Configure Tour Site

      Context In this article, you will learn how to set up the tour site. Step 1 - Navigate to hyTours Under your Sub-org, go to hyTours. Step 2 - Navigate to Admin Settings : Tour Site Click on 'Agent Calendar' to view other options, then click on 'Admin ...
    • Live Virtual Tours Set-Up

      Tutorial  In this tutorial you will learn how to set-up 'Live Virtual Tours' following the steps below Step 1 - Set Up Automations Step 1a - Navigate to Tour Scheduled Artie Go to your 'Org' in Hy.ly > Click on 'Automations' > Click on 'Playbooks' ...
    • How to Add a hyTours Scheduler Link to Yelp

      Context hyTours Tour Scheduler can be embedded on the Yelp account of your Property, which allows your prospects to schedule tours via your Yelp page of the Property. To add Hy.ly hyTours Tour Scheduler to your property's Yelp page, follow these ...