Nitobi | Products: Web Tour Component

Nitobi Spotlight

Overview

Download our Spotlight web tour component to provide stylish instructions and commentary for the users of your site.

Spotlight allows the developer to visually highlight parts of a webpage, provide a guided tour for a user, and mimick user interactions, all through a simple JavaScript API interface.

Live Demo | View Source

Our Ash Jewelry example shows how you can use a Spotlight tour to highlight individual elements on your web page. You can view it here.

Example Source Code (hide)

JavaScript Code

function runTour() {
	// NONE, GREYSWIPE, MODAL
	var wT = new nitobi.spotlight.Spotlight('GREYSWIPE', 'clean', 'round');
	wT.createCalloutStep(null, 'Welcome to Ash Jewelry!', 'We notice this is your first time to our site in a while. You may not know that we\'ve added a lot of new features! Click the button for a brief tour!');
	wT.createCalloutStep('educationcenter', 'Diamond Education Center', 'This is where you can read all about diamond jewelry, what to watch for, and how to know you\'re getting a good deal.');
	wT.createCalloutStep('designyourring', 'Design your Own Ring Tool', 'We\'ve added a powerful do-it-yourself rign design tool that will help you create a setting and choose a stone within your budget.');
	wT.createCalloutStep('loosediamonds', 'Find Loose Diamond Values', 'If you\'re looking to upgrade your existing jewelry, you can find amazing values in our no-bones loose-diamond search tool. It\'s by far the most efficient way to find diamond values.');
	wT.createCalloutStep(null, 'One-stop Jewelry Values', 'We\'re all about providing you an easy way to find diamonds and jewelry for unbeatable prices. Shop around and see - and call our US Office for more information!<br><br>Thanks!');
wT.createCalloutStep('searchtools', 'More Search Options', '..or you can browse our vast database of diamond and jewelry items, complete with price and detailed attributes.');	
	wT.play();
}
nitobi.html.attachEvent(window,"load",runTour);

Overview

Simple JavaScript Interface

Easily script your tours using JavaScript to create callouts, mouse movements, and execute custom JavaScript.

Create Stylish Callouts

Nicely skinned Callouts allow developers to add training material, commentary, or helpful hints to Spotlight tours (requires Nitobi Callout)

Simulated Form Interactions

Simulate typing into forms using built-in form helpers.

Integrates with Adobe Dreamweaver

Simply drag and drop Ajax components into sites and applications using Adobe Dreamweaver CS3.

Script Mouse Movement

Generate simulated mouse movements, and clicks.

Cross Browser

Nitobi components have full support for an array of modern browsers including IE6+, Firefox, Mozilla 1.3+, Camino, and Netscape 7+, and Safari.

Execute Custom JavaScript

Easily execute JavaScript to give users a tour of an Ajax based web application.