Quick Reference

An interactive documentation of currently supported widgets can be accessed throught the link below. It is possible, via the interface, to preview widgets, adjust parameters and obtain the configuration javascript code that can be copy/pasted in any website.

This interactive documentation is currently in an early alpha stage, and will be improved in the upcoming versions of SecuTix.

Introduction

A widget represents an isolated feature of the online sales channels of SecuTix. These isolated features can be included in any website through a small JavaScript code snipped that can be integrated inside a web page.

A series of parameters define the behavior of every widget, and can be consulted in the reference that is linked above. Moreover, the standard mechanisms provided by SecuTix, like light customization, labels overriding, are also taken into account by every single widget. With widgets you have full control of the content of the page, the appearance of the displayed elements and the CSS styling.

Basic concepts

In any website, you may reserve space to display one or more Secutix widgets. Like advertisement or highlighting of products.

To display a widget you need to :

1. Include the widget library
2. Create an html container with an id for every widget 
3. Setup the widget through Javascript parameters
4. Instantiate the widget

Include the widget library

The widget library only contains a loader that will automatically load the widget definition when needed. You only have to include the following script to get access to all widgets.

<script type="text/javascript" src="https://<CUSTOMER-SPECIFIC URL>/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.

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. To ensure structure to the website, you may define size and position of the container. The widgets will adapt to the container.

<div id="catalog_1"> </div>
< ... some website structure>
    <div id="product_1"> </div>
	<div id="product_2"> </div>
    <div id="product_3"> </div>
</ ... some website structure>

For each widget instance, you need to create a specific container that cannot be reused. 

Get information

To display a widget, several informations are needed. In the linked documentation, you can find the mandatory and optional parameters.

Some information can be share between several widgets (hostname, apikey, language) and some other are specific to each widget (see below how to handle them)

Show a widget

The widget library export only one function, the magic start. When the Widget.js script is loaded, you can access to all widgets by calling this function.

It takes an object as parameter that is described in the following code block.

{
	hostname: string that represent the hostname of the internet point of sales (mandatory)
	apiKey: string that contains the apikey linked to the internet point of sales (mandatory)
	language: string representing the language in which the widgets should be displayed (optional, it takes the default institution language if not provided)
	widgets: a list of widget definition
}

The widget definition is an object that contains the widget parameters. The widget name must be provided as widget (case sensitive), the container id must be provided as root. Then all other widget specific parameters.

Widget instantiation example

<script type="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',
		language: 'fr',
		widgets: [{
			widget: 'Product',			// the name of the widget
			root: '#product_1',			// the id of html tag above
			productId: '4654654',		// the id of the product
			occurrenceId: '87846578',	// the id of performance / match / slot
			showActions: true,			// parameters to show the actions
			aspectRatio: 'VERTICAL'		// how to display the picture
		},{
			widget: 'Product',
			root: '#product_3',
			productId: '465488',
			occurrenceId: '1129848',
			showDescription: true,
			showImage: false
		},{
			widget: 'Catalog',
			root: '#catalog_1'
		}]
	});


	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',
		language: 'en',
		widgets: [{
			widget: 'Product',			// the name of the widget
			root: '#product_2',			// the id of html tag above
			productId: '4654654',		// the id of the product
			occurrenceId: '87846578',	// the id of performance / match / slot
			showActions: true,			// parameters to show the actions
			aspectRatio: 'VERTICAL'		// how to display the picture
		}]
	});

</script>

In the previous example, there are two groups of widgets. Widgets that are inside a group must share the same global definition (ie. : localhost, apiKey, language). For each set of global info, you have to create a new group by using the function start again as shown in the example.

Additionnal information

Domain restrictions 

It can be configured in the point of sales definition :