Example - AFS

AFS Integration Guide

Reference Guide

Using an AFS Widget mainly consists in inserting a specific HTML snippet in your HTML page.

The example below shows the declaration of a fictive widget called Foobar, in its simpler form.

<div data-type="AFSWidget" data-name="Foobar"></div>

On application startup, each widget will be replaced with the proper widget DOM. The widget placeholder can be tagged with some extra classes or attributes that will be restored on the effective widget.

Here is an example:

<div data-type="AFSWidget" data-name="Foobar" class="special-widget" style="color: blue;"></div>

After startup, something like this will be produced:

<div class="AFSW-foobar-container special-widget" style="color: blue;">
<!-- widget content -->

There is no limitation regarding the number of occurrences of a same widget. Each inserted widget can be configured to adapt its behavior or the way it is displayed. Using many widgets of a same type but differently configured is authorized.

Previous AFS Widgets versions were using a syntax based on class and title attributes. Even if deprecated, this syntax is currently still supported.

Do not use auto-closing div elements. If valid in XML, HTML does not support it for div elements and the browser could in consequence behave weirdly.