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. 

To get the Tour Site Scripts, go to the sub-or and navigate to hyTours > Agents Calendar dropdown > Admin Settings : Tour Site





Once you are in the Settings page, click on Embeds. You can copy the script and embed it in the property website. You can also click on Show Instructions to get multiple embedding options.




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">Take 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 Video Tour - Prospect Experience

      Tutorial In this tutorial, you will learn how to schedule and use 'Live Video Tour' as a Prospect. Step 1 - Schedule Live Video Tour - Prospect Step 1a - Schedule Tour from Property Website The prospect can go to the property website, click on the ...

    • How to Add hyTours Scheduler in Entrata Website Backend

      Context If you are using Entrata as your property management system, you might want to add the hyTours Scheduler in Entrata. This article will teach you how to add the hyTours Scheduler Link in Entrata Website Backend. Add The Tour Scheduler as a URL ...

    • Schedule and Use Live Video Tour - Agent Experience

      Context The agents can also access the Live Video tour through the agent's calendar and the hyCRM app. In this article, you will learn how the agents in their Hyly.AI account can access, schedule and, use and the Live Video Tours. Agents Calendar The ...

    • 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 Add a CTA

      Context In this tutorial, we will go step-by-step in how to add a CTA for an eBlast.  To recap, a CTA is a command, such as "RSVP" or "Schedule Tour", and generally takes form of a button or a hyperlink.  It is intended to direct you to a specific ...