Amazing On-Page Tutorials v2.0 Showcase

Amberjack allows easy creation of On-Page Tutorials

Navigate with bubble arrows, keyboard right/left or mouse click left/right

Text bubbles explain page elements to your visitors.

Use your HTML and CSS knowledge to customize the bubbles as you like!

Embed a Youtube Tutorial for example

Jump DOM elements with their unique DOM ID

Place multiple tours ...

... on your page

Amberjack was covered on Techcrunch...

... Ajaxian ...

... and even got Digged

Please add Amberjack to your bookmarks

That's it, please leave Feedback

Close tutorial by clicking the cross (X) above or hit ESC on your keyboard.

Amberjack bubbles can be flexibly positioned. Proceed to see examples ...

top-left-center (Code: tlc)

top-center-center (Code: tcc)

top-right-center (Code: trc)

top-right-right (Code: trr)

left-middle-top (Code: lmt)

right-middle-bottom (Code: rmb)

36 combinations in total!

tlc, tcc, rmt, ...

bubble position:
t(op), r(ight), b(ottom), l(eft)
pointer alignment:
t(op), m(middle), b(ottom) OR
l(left), c(enter), r(right)
bubble alignment:
t(top), m(middle), b(ottom) OR
l(left), c(enter), r(right)

Choose between Color Schemes
red or ...

... green ...

... yellow ...

... blue ...

... pink ...

... black ...

... or white

Customize

Remember, Amberjack is plain and simple JavaScript + HTML + CSS, so you have full control over the appearance of your bubbles.

Set Cover Opacity as you like!

Set a simple config variable to change opacity

Config: Aj.coverOpacity = 0.50;

Transparent!

Config: Aj.coverOpacity = 0.00;

Darker!

Config: Aj.coverOpacity = 0.25;

Even darker!

Config: Aj.coverOpacity = 0.50; // default

Almost opaque!

Config: Aj.coverOpacity = 0.75;

Opaque!

Config: Aj.coverOpacity = 1.00;

change the cover's background color

Config: Aj.coverColor = '#f00';

Once more a red background, but with default opacity again

Config: Aj.coverOpacity = 0.50;

Tour more than one page!

Amberjack does not restrict you to one page only. Simply configure your tour to travel more than one url. Next tutorial step will take you to index2.php

Welcome to page index2.php

Go on...

You are still on page index2.php

You can then go on as you are used to, highlighting page elements.
Now travel back, until you are on the homepage again.