Tours
      Back to home
      1. Hyly AI Help Center
      2. Journey AI
      3. Tours

      How do I 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. 
       
      Navigation 
       
      embed tour site scripts1
       
       
      Once you are on the Settings page, click on Embeds. You can copy the script and embed it on the property website. You can also click on Show Instructions to get multiple embedding options.
       
       
      embed tour site scripts 2
      embed tour site scripts 3
       
      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 the 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 Pop Button Script. The TourSite Popup button is a CTA button that 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-tour popup 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!
       
      embed tour site link 5
       
      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.
       
       
      embed tour site 5
      embed tour site6
       

      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>

      b.  Add the Link to the Pop-Up 

      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