A link click on a TourCard can open a video, image or even web pages in a clean responsive popup. These links can look like regular text links, buttons, images or icons. It is easy to super charge these regular links to give a better more natural experience to users. See it in action in this short video.
Adding this awesome feature to your tours require getting your hands a bit dirty with HTML snippets. Some code modifications on the tour card source dialog. It is worth the effort 100%. On the anchor tag, whatever URL is specified as it's HREF will be used to create the content for the popup window.
Step 1 : Create a regular Link on the TourCard <A>
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk">Video</a>
Step 2 : Add the extra attribute to supercharge the <A> anchor tag
witpopup="true"
Click on SOURCE button [ 
] on TourCard toolbar to bring up the source editor. Now, you need to add an HTML attribute to the anchor tag <A> to make it special. add witpopup="true" to the Anchor tag . See below for the modified final code with extra attribute.
<a href="//www.youtube.com/watch?v=XSGBVzeBUbk" witpopup="true">Video</a>
Click OK to close the dialogue. Click SAVE tick mark (RED) on TourCard to save it.
 |
 |
DONE!
EXAMPLES:
Image Popup
You can use an image as a link and giving the same URL to the image on an <A> tag that wraps it will create a simple lightbox effect for that image. Here we are adding that effect to yellow pegman. You could also use a different image link on HREF to popup another image on click.
<p>
<a href="/upload/Z1UsWuQ-WZb1lUjbOQWWb.png" witpopup="true">
<img alt="" src="/upload/Z1UsWuQ-WZb1lUjbOQWWb.png" style="width: 100%;" />
</a>
</p>
|
|
|
<p> <a witpopup="true" href="//www.youtube.com/watch?v=JoyUUokcX5g"> <span class="fa fa-youtube-play " style="color:#cc0000;font-size:70px;"></span> </a> </p>
|
|
|
An external web page
You can use the link to an external web page to open it in a lightboax popup within WalkInto. Be careful with the HTTP Vs. HTTPs. It is recommended to always use HTTPs links because it will open even when your WalkInto tour is access over HTTP. However if your HREF link is an HTTP, browsers won't allow it to open when WalkInto is accesses through HTTPs. In general try not to mix. Here on a button click we are opening a Wikipedia Article.
<p> <a witpopup="true" href="//en.wikipedia.org/wiki/YouTube"> <span class="fa fa-external-link-square" style="color:rgb(204, 0, 0);font-size:70px;"></span> </a> </p>
 |
|
Google Map Embed
<p style="text-align: center;"> <a witpopup="true" href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" >Map</a> </p>
Google Street View Embed
<p style="text-align: center;"> <a witpopup="true" href="https://www.google.com/maps/embed?pb=!1m0!3m2!1sen!2sca!4v1460532454467!6m8!1m7!1sy_kQybcOGD0AAAQo8WoTzA!2m2!1d49.29112191782065!2d-124.6630469446862!3f15.184208062086833!4f64.09700021484866!5f0.7820865974627469" >Street View</a></p>