Link To Your Whitepoint Online Gallery or Tour

If you’ve built a Whitepoint scape – whether an online gallery or photo tour – it’s available for mobile viewing using the free Whitepoint app. But, why not enable desktop users to access it also? Linking to a scape from your web site can help build more valuable, photo rich content and attract new eyes.

Previously, we provided a simple JavaScript for doing just that, but this JavaScript will enable you to link to multiple scapes from a web site.

First, determine your online gallery or photo tour’s scape ID.

A Whitepoint Online Gallery and Tour

Here’s a free graphic for use in driving traffic to your Whitepoint online gallery or tour. Just download and own it today!

The scape ID is available in the Whitepoint Authoring Panel: Find your scape listed either in “Personal” or “Team” scapes. Then, look for the number shown in the “scape ID” column. Make a note of it.

The Function for Opening Your Scape Neatly

Here’s the JavaScript function you’ll use:

function WPScapeViewer(param) {
window.open(“http://webview.whitepoint.mobi/scapes/scape_viewer/” + param.toString(), ‘_blank’,’width=1000, height=675, resizable=no, scrollbars=no, location=no, menubar=no, status=no, toolbar=no’,”);
}

Call the Function to Open Your Scape

Use an “onclick” event in an anchor tag. Here’s what that looks like:

<a href=”#” onclick=”WPScapeViewer(XX)”>My Scape Link</a>

Grab that scape ID you jotted down earlier and plug it in for the “XX.”

Linking Up Multiple Scapes

You can call that single function now as many times as you like for a single online gallery, tour, or even multiple scapes. Just have the different scape IDs handy first. Then, exchange them as appropriate. For example:

<a href=”#” onclick=”WPScapeViewer(01)”>Link to Scape ID 01</a>

<a href=”#” onclick=”WPScapeViewer(02)”>Link to Scape ID 02</a>

<a href=”#” onclick=”WPScapeViewer(03)”>Link to Scape ID 03</a>

Can This Be Used With Any Tour or Online Gallery?

This is all done using Whitepoint’s ScapeViewer technology. It’s free for all authors, and helps anyone share their slideshow, online gallery, or tour with desktop users . . . as long as it’s built using the free Whitepoint framework.

You can also download the image shown in this post and make your link a graphic.

If you haven’t become a user of the Whitepoint app or an author of a Whitepoint tour or online gallery, you can get started today.

Matthew White

Matthew White blogs on all things related to virtual tours, mobile touring, and tour apps as well as how they relate to web design, SEO, and content marketing. There is also of course helpful information on using Whitepoint - the framework for smarter virtual touring and mobile-friendly tours.

facebooktwittergoogle_plusredditlinkedinmailby feather

So, How Do I Link to My Scape (And Get One of Those Nifty Whitepoint Buttons)?

When an author updates Whitepoint mobile tour app content, that content is available simultaneously to the Whitepoint apps and, in most cases, for desktops online.

It’s easy to understand how the mobile material is delivered, but linking up to the scape from a web site for desktop users takes a little more attention. Not to worry though, this post will explain it all.

Instructions for Getting Tours On Desktops

When we refer to ScapeViewer, that’s the technology framework that makes Whitepoint authored content available to desktops. If you want to read more about it, we have more information about how we handle desktop-friendly online tours and guides. But, really all you need to understand is that there is no plug-in or additional download required, all you have to do is identify and link up the content to your web site.

Find The Scape ID

First off, in the Authoring Panel, find your scape listed either in “Personal” or “Team” scapes. Find the number shown in the “scape ID” column. Make a note of it.

Here’s The Code . . .

Now, here’s the code snippet you’ll need for your web site:

<a onclick=”open_ScapeViewer()” href=”#”>
<img alt=”Take the Whitepoint Tour” src=”http://www.whitepoint.mobi/img/WPTakeTheTourWeb.png” />
</a>
<script type=”text/javascript”>
function open_ScapeViewer()
{
window.open(“http://webview.whitepoint.mobi/scapes/scape_viewer/XX” , “_blank” , “width=1000, height=675, resizable=no, scrollbars=no, location=no, menubar=no, status=no, toolbar=no” , “”);
}
</script>

Remember that scape ID you noted earlier? Replace the XX above with that number. That’s it. You’re done.

If you enjoy coding a bit, you can take the anchor tag with the image and place it inside a div for positioning. And, if performance – or code organization – is a concern for you, you can place the script tag just before the closing body tag.

We don’t recommend tweaking the code beyond that, as the above has worked countless times with consistent results across multiple browsers and platforms.

. . . And You Get The Graphic

The above will provide a “Take the Tour” graphic that Whitepoint is serving, and we hope to offer additional flavors of that graphic in the future.

facebooktwittergoogle_plusredditlinkedinmailby feather