Quick Actions on Interactive Widgets

Interactive Widgets

Checkboxes

• A checkbox widget can be checked or unchecked. Repeatedly pressing a checkbox will toggle it between these two states.

• When submitting, the event name and either the checked or unchecked event value will be sent. For example, if the below checkbox was checked, {info: show} could be sent to your API via the Call API action.

• If there are two ore more Checkboxes in a Content with the same Event name, Checked event value and Unchecked event value, they are considered to be the same, and if one of them gets checked or unchecked, the others will follow suit.

• This way you can have the same checkbox across multiple Pages or add some nice visual effects:

  • Checking a small Checkbox with a label next to it can also make a bigger visualization appear somewhere else.
  • To achieve this, the connected Checkbox has to have a transparent image as its Unchecked src and the visualization as Checked src.

• Checkboxes can also have a Button group, which can be sent out to API calls, if needed.

• Also, it will be taken into consideration when deciding if two Checkboxes are identical.

• A Checkbox can start in "checked" state.

• It will also reset back to checked when a Submit or Reset button is pressed.

• You can set visual changes to the checkbox to see it's state.

• If a Checkbox is unchecked, it will display its Unchecked src image.
• In addition, you can also turn on these options.
• They are most useful if the Checked and unchecked src is the same.
• You can easily set the Unchecked src to match the Checked src by pressing this icon shown below.

Radio buttons

• Radio buttons usually come in groups.
• In a group, only one Radio button can be selected (checked) at a time.
• If one of the buttons in a group is pressed, the others will become unchecked.
• Repeatedly pressing one Radio button usually won't accomplish anything.

• Radio button's most important properties are Button group and Checked event value.
• Usually, you want to have multiple Radio buttons with the same Button group and different Checked event values.
• When submitting, only the one checked Radio button's Checked event value will be sent out as the value belonging to the Button group.

example

With the above two Widgets, the sent out data would either be {direction: left} or {direction: right}, depending on the currently selected one.

• Regards to starting out Checked, having Shrink, Blur and Grayscale options, Checked src and Unchecked src, they work the same as Checkboxes.

• Also, identical Radio buttons will become checked to be consistent with the pressed button.

• Radio buttons also have a Jump to option.

  • Here, you can choose from the other Pages in this Content.
  • When this button is pressed, in addition to becoming selected, the Content will also jump to the selected Page.
  • Also, Event name will be logged into the Content interaction log.

• You can also turn on Quick submit and choose from the same options as for a Submit button.
• This can be used in a simple Content, such as a customer satisfaction survey at a checkout line with 3-5 choices, submitting automatically when any of the buttons are pressed.

User input

• If you need any other input from your users, you can add a User input widget that lets them type in something.

• It can be useful to get their e-mail address or a comment regarding their order.

• A User input has an Event name, this will be used in the submitted data.

• They also have a Button group but if you would use that only in bigger, more complicated Contents, if you really need the separation.

Submit button

A Submit button will submit the value of all the interactive elements in the content. It means the following steps will be executed:

• The values are stored in memory and made available to the selected action type.

• The selected type of action will be executed. You can read more about this later in this guide!

• All the interactive widgets will be reset to their original values.

• If there is a Jump to target, the Content will jump to that Page

• The Source for the Submit button is the image that will be displayed.

• If you turn on Do not reset, the interactive widgets won't be reset to their original values.

• It can be useful in some cases, for example, if you have Call API as your action and only want to reset if the transaction was successful.

• In the API response events, you can trigger a hidden Reset button to achieve this.

Reset button

• Similar to Submit buttons, Reset buttons have a Source image to appear as and an optional Jump to

Table widget cells

• Embedded Checkboxes and Radio buttons.

Data summary

• Data summary's main purpose is to help you test your Content while creating it.

• It will show all the values of the interactive widgets.

• In some really simple cases, it can also be used in production.

• The widget displays the current in-memory state of all interactive widgets in real time — updating live on every checkbox toggle, radio button press, user input change, and carousel slide.

• Values are shown as key-value pairs grouped by Button group, matching the structure that would be sent in a Call API submission at that moment.

• Only widgets the user has actively interacted with are shown — unchecked checkboxes and radio buttons with no selection are skipped.

• If the Data Summary widget has no Button group set, it shows all groups. If a Button group is set, it only shows values from that group.

Submit types

• Different submit types and options are available both on Submit buttons and Radio buttons with quick submit enabled.
• You can also trigger Submit buttons from Sensor events, this way the selected widget's options will be used.

Default behaviour

• When a submit action fires, all interactive widget values are held in memory.
• The collected data is structured as key-value pairs using the Button group and Event name of each widget.
• The data is not stored on the server by default. To persist it, use the Call API action to send it to an endpoint of your choice, such as an internal datasource action.

Call API

• If you need a more complicated calculation, need to fetch data from or save data to your own database, etc..., you can call your own API as a submit action.

• The request method is configurable (GET or POST), and the request body will contain the widget's values as key-value pairs.

Sensor event

note

The sensor event submit type is no longer selectable in the content editor. It remains functional for existing content that was created with this option.

• Sensor event will send the same data in the same format to the connected sensor interface as it would send as request body to an API.
• The Use button groups option also works the same.

ⓘ Click here to know more about Sensor events