Example and reference
| Latest version | Documentation |
|---|---|
| 2 | TODO: put link to demo deployment |
The easiest way to see what is a widget and how to include it in a page.
Introduction
This document presents the widget system of Secutix.
Basic concepts
Each widget consist in a small chunk of web application that can be included in a web container, a HTML tag.
To show a widget on a website, the following step are necessary:
- Include the widget library
- Create HTML containers with explicit ids
- Get all the information needed for the widget
- Create a widget instance through the library
Include the widget library
The widget library only contains a loader that will automatically load the widget definition when needed. You have to include the following script inclusion to get the
<scripttype="text/javascript"src="https://s3.eu-central-1.amazonaws.com/pub.tnwi.int1-s3.secutix.com/stx-widgets/Widgets.js"></script> |
This Widget file generate the STX global object that contains the widget library. The library contains only the library loading system. The needed script will be loaded automatically followin
Create a HTML container
Anywhere in the website, you can include a HTML tag with an id that will be pass later to the widget definition
< ... the rest of the website> <div id="product_1"> </div> <div id="product_2"> </div> </ ... the rest of the website> |
Show a widget
<scripttype="text/javascript"> STX.Widgets.start({ // The hostname defined in the point of sales hostname: 'thecube-special-cube.int2-shop.secutix.com', apiKey: '8bafa660-8bc1-4982-83da-f15fce01f4ec', }) </script> |