• Back to top ↑
  • Developer Docs

  • Installation
  • Script
  • Usage
  • Id
  • Domain
  • Z index
  • Border
  • Background color
  • Exit tour text
  • Zoom tour text
  • Pinch tour text
  • Drag tour text
  • Scale tour text
  • Scale text
  • Stage text
  • Examples
  • HTML integration
  • JS integration
  • Combo HTML/JS integration

Installation

Include hoot.js in your HTML, preferrably in the <head> section or down just before your closing </html> tag
Copied to clipboard!

Usage

Hoot parses the page's dom elements in search for elements with the "data-hoot-id" data attribute. When a user clicks on these elements, hoot loads on top of the existing page. You can manipulate several options by injecting parameters into hoot via data attributes. A detailed description for each tag is below.
data-hoot-idRequired

The hoot key for your item provided in your control panel.

Copied to clipboard!
data-hoot-domainRequired

Your provisioned CDN domain provided in your control panel.

Copied to clipboard!
data-hoot-z-indexOptionalDefault: 99999

The z-index level that hoot should be above. Click here to find out more about z-index.

Copied to clipboard!
data-hoot-borderOptionalDefault: 25

The default padding (set via css border attribute) in pixels that surround the hoot animation.

Copied to clipboard!
data-hoot-background-colorOptionalDefault: #ffffff

The default color of the background and border that surround the hoot animation.

Copied to clipboard!
data-hoot-exit-tour-textOptionalDefault: CLICK TO EXIT TOUR

The default text at the top of the hoot animation that instructs users that they can exit hoot's initial tour.

Copied to clipboard!
data-hoot-zoom-tour-textOptionalDefault: ZOOM

The default text inside the circles that expand on touch screen devices during the tour phase instructing users how to zoom in on hoot animations.

Copied to clipboard!
data-hoot-pinch-tour-textOptionalDefault: PINCH

The default text inside the circles that contract on touch screen devices during the tour phase instructing users how to zoom out on hoot animations.

Copied to clipboard!
data-hoot-drag-tour-textOptionalDefault: DRAG

The default text inside the circle that moves across the animation during the tour phase which instructs users how to spin or operate an animation.

Copied to clipboard!
data-hoot-scale-tour-textOptionalDefault: ZOOM / SCALE

The default text inside the tooltip that highlights the plus and minus buttons on non-touch devices during the tour phase which instructs users how to zoom and scale an animation.

Copied to clipboard!
data-hoot-scale-textOptionalDefault: PRESS TO SCALE / CLICK TO ZOOM

The default text inside the tooltip that appears over the plus and minus buttons on non-touch devices when the user's mouse hovers over them.

Copied to clipboard!
data-hoot-stage-textOptionalDefault: CLICK TO ZOOM / DRAG TO MOVE

The default text inside the tooltip that appears over the animation or "stage" when a user's mouse rests over it for a given amount of time that instructs users how to interact with hoot and a mouse.

Copied to clipboard!

Examples

CodePen provides a great way to experiment with our JS framework. Click the buttons below to play with our examples.
HTML integration

If you have basic access to edit html within your website this example is for you. It loads jQuery and Hoot 1.3 as external resources.

JS integration

If you don't have access to edit HTML directly this shows you a workaround. This can often be the case if you are using a third party shopping cart. You will notice we are using jQuery's attr function as apposed to jQuery's data function to add data attributes. This is because jquery only loads a pages data attributes once for performance reasons. This example loads jQuery and Hoot 1.3 as external resources.

Combo HTML/JS integration

Some third party shopping carts allow you to put JS in your main template but you have no way to insert JS into your product description. This is probably to prevent thier users from injecting malicious XXS code. Here we show you a simple workaround. You will notice we are using jQuery's attr function as apposed to jQuery's data function to add data attributes and jQuery's data funtion for reading data attributes. This is because jquery only loads a pages data attributes once for performance reasons. This example loads jQuery and Hoot 1.3 as external resources.