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

A simple Spotlight tour will run when this page is loaded. You can also replay the tour, if you choose.

Example Source Code (hide)

JavaScript Code

var runTour = function() {
	var wT = new nitobi.spotlight.Spotlight('GREYSWIPE', 'impact', 'round');
	wT.createCalloutStep(null, 'Centered', 'Welcome to the Spotlight tour, which
	  will demonstrate the capabilities of our Spotlight component.');
	wT.createCalloutStep('product-icon', 'Attached to an Image!', 'You can attach 
	  a callout to an object by providing the ID.');
	wT.createCalloutStep(null, 'Centered', 'By not providing a DOM ID or object 
	  to a callout step, you create a centered callout in the tour.');	
	wT.createCalloutStep('footer', 'Scrolling is Automatic', 'Spotlight will automatically 
	  scroll an object into view. You can turn this off by setting the allowScrolling 
	  attribute to <u>false</u>.');
	wT.createCalloutStep('header', 'Each item occurs in Sequence', 'Each item will occur 
	  in sequence according to the order in which they were scripted.');
	wT.createCalloutStep('product-icon', '', 'Its not necessary to have titles in callouts.
	  In this example we simply specified an empty string as the title (\'\').');
	wT.createCalloutStep(null, 'That\'s all folks!', 'Watch some of the other demos to get
	  a sense for the capabilities of Spotlight and Callout.');	
	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.