Integrating into a webpage – without using an iframe

This is how integrating into a webpage works:

This is the code that makes out the rotation. Note the “target div” and it’s data-rotate-tool attribute:

The rotatetool.js “engine” scans the page and looks for the div’s with the data-rotate-tool attribute. If found, it renders the rotation inside of that div. Here are the possible attributes properties explained:

path [required] Is the relative (or absolute, starting with http://) path to config.js and images. Useful if you have your webpage in a different directory than the config.js and product image files.

id [optional] Unique config file identifier. Necessary only if you have more than one product rotations embedded in one page. (The Rotate Tool loads data stored in config.js file and it needs to distinguish which one belongs to which product).

configFile [optional] Useful if you want to use a backend script to generate the config.js file. Url of the config file or the script

themeUrl [optional] Absolute url to the folder, where styles.css and and button images are located. If not provided, the tool scans the assets folder within the defined path variable.

gaData [optional] Object that contains settings for Google analytics for tracking users engagement using custom events. Please visit dedicated manual page on this topic for more details.

size [optional] Force specify the player width and height. Necessary for ebay integration.

Real life example

This is a real life example from one of my dev-pages:

In this example the Rotate Tool searchs for config.js in “backpack_hotspot_javascript/config.js” (relative to the location of the webpage), and loads the theme assets from an absolute url. Also the RotateTool engine rotatetool.js is referenced using an absolute url. Using one location for the rotatetool.js gives you the option to quickly update all rotations if there is a new version.

The integration of the product rotation can be automated using this PHP Scirpt/Lib.