Options and Parameters

Customize options and parameters using the data attributes.

Trigger and display interactions

An overview to options and parameters using [data] attributes.

A trigger and certain parameters must be prepared in order to display an interaction. For further customization, we can apply individual options for each interaction.

Event tag

An etag is the combination of a browser event and a keyword tag, separated by a semicolon.

data-fs-etag='click:call-me'
data-fs-etag='doubleclick:call-me'
data-fs-etag='mouseover:call-me'

Related tag

Trigger We can create a relation using data attributes, to pass the event listener of an etag, to a related tag.

  • To pass the event, “on” must precede the event part of an etag.
  • The related tag, must use data-fs-{event} without “on”, and its value must match the keyword used in the etag.
  • The related tag, must be defined on an element separate of etags and params.
data-fs-etag='onclick:special-element'
// On a separate element
data-fs-click='special-element'

Parameters

Parameters tag is used to communicate information the server, and will override any behavior presets, and will by directly applied to an interaction.

Specify the body of an interaction by calling a specific module, parsing contextual data using curly bracket markup, delay an interaction…

// On the same element
data-fs-etag='onclick:special-element'
data-fs-params='{
    "trigger": {
        "moduleid": "$moduleid"
    }
}'

Contextual data

We can send contextual or related information through the parameters, and displayed during an interaction by using curly bracket markup.

// In your HTML
data-fs-params='{
    "rel": {
        "interaction": {
            "subject": "My subject",
            "body": "The body",
            "another": "Can be used in form inputs as well",
            "evenmore": {
                "extra1": "...",
                "extra2": "..."
            }
        }
    }
}' 

// While creating a module.
{{interaction.subject}} 
{{interaction.body}} 
{{interaction.another}} 
{{interaction.evenmore.extra1}} 
{{interaction.evenmore.extra2}}

Element tag

A query selector must be defined, in order to find and apply, related options during multiple stages of an interaction.

The el and opt tag, must be defined on an element separate of etags and params.

data-fs-el='@$moduleid'

Options

The option tag is used to manipulate interactions locally. Display, placement, theme, size, offset, addon classnames… .

data-fs-el='@$moduleid'
data-fs-opt='{
    "placement": "bottom-end",
    "theme": "white",
    "size": "xl"
}'

Display options

By default an interaction will display and point to the related element tag [data-fs-el].

Alternatively an interaction can be embedded or fixed.

Note: Each display has its own placement properties.

data-fs-el='@$moduleid'
data-fs-opt='{
    "display": "fixed"
    "placement": "upper"
}'

Class addons

Default CSS can be prevent on an interaction by using addon class names. This method will force interactions to use custom class names

data-fs-el='@$moduleid'

// Add a class name to an interaction.
data-fs-opt='{
    "addon": "custom-class"
    "className": "same-as-addon"
}'

// Add a class name to the document body
data-fs-opt='{
    "bodyAddon": "cover-class"
}'

Background color

Changing the background color of an interaction can be achieved by specifying a theme or a backgroundColor

data-fs-el='@$moduleid'
data-fs-opt='{
    "backgroundColor": "mediumseagreen"
}'

Themes

Interactions are not limited to default themes provided by the API. You can supply your own CSS themes.

data-fs-el='@$moduleid'
data-fs-opt='{
    "theme": "white-translucent"
}'

Sizing

Interactions are not limited to default sizes provided by the API. You can supply your own size.

data-fs-el='@$moduleid'
data-fs-opt='{
    "size": "xl"
}'

Interaction offset

Occasionally some CSS markup may cause interactions to shift, which can be neutralized by creating an offset.

In pixels

data-fs-el='@$moduleid'
data-fs-opt='{
    "up": "100",
    "down": "100",
    "right": "100",
    "left": " 100"
}'
JavaScript API