Skip to main content

Client Triggers

Client Triggers allow you to initiate your Flow by an event within the client's session. Superflow offers a wide variety of Client Triggers out of the box like the view of a specific page, a click on certain element or the user just being idle. Basically Client Triggers are reusable encapsulations of JavaScript whose input can be defined by the user interface and returns a specific result based on that.

Custom Client Triggers​

warning

Custom Client Triggers are managed on a Workspace level. Changes affect all Apps as soon as they are republished.

Add a Custom Client Trigger​

  1. Navigate to the Flow Builder's Triggers Tab, scroll down to Client Triggers.
  2. Click on + next to "Client Triggers". You can choose a subcategory later on.

Add a Custom Trigger

Basic Information​

  • Display Name: Enter the name of the Trigger (e.g., "Mouse Click").
  • Short Name: Enter the name of the Trigger shown in the left side-bar (e.g., "Click").
  • Description (optional): Provide a brief description, such as "When an elemenet was clicked".
  • Subcategory: Select a subcategory that best fits the Trigger's functionality.
  • Color: Choose the color your Trigger will be highlighted with or click Random to auto-select one.

Code​

Provide valid JavaScript code that the Trigger will inject into the clients frontend. You can use Input Field Variables to make your Trigger more dynamic.

Templates​

You can use templates to add different code and assign them to different platforms. The Trigger will execute the code for the platform it is associated with. This is especially useful to increase your Triggers's compatibility and circumvents the need to create multiple Triggers with the same use.

Input Fields​

To ensure your Trigger can handle data dynamicly, make use of Input Fields. The following example shows the code and Input Fields for a Click-Trigger. Note how it is equipped with an Input Field to determine the clicked element and how it is implemented in the code.

Use Input Field Variable

Trigger Event & Passing Data​

To send a trigger event to start your flow, you need to invoke the SUPERFLOW.startTrigger() function, either by clicking on the Insert Trigger Function Call button or by referencing the function directly yourself.

You can pass any data to your flow like this:

let data = "..."
SUPERFLOW.startTrigger(data)
info

You can also use your trigger to execute JavaScript directly on the client side, without ever passing a trigger to the Superflow backend. Pricing for Operations only accrues once the trigger sends the startTrigger event.

Response​

Once you have configured all the fields and settings above, you can test your Trigger with your test data.

  • Connector: Choose which Connector should be used to test your Trigger. Connections from your installed Connectors are available.

  • Path: By default, the path is set as the base url of your Connector. If your Trigger is tailored to run on a page other than the homepage, append it accordingly (e.g.: /Cart).

Click Start Test Server

A temporary test-session with your Triggers's code will be mounted. Click on Open to launch the session in your browser.

warning

The code injection into the test session relies on the test parameter added to the URL. When testing on a password protected store make sure to unlock it first. Unlocking it after launching the test session will result in the loss of the test parameter. In this case you need to reopen your test session.

  • Output Here you will see the output of your Trigger's JavaScript.
  • Input Here you will see which data was provided to the Trigger's JavaScript by the test run.

Return Values​

Return values are the expected return values of your Trigger's JavaScript. These values can be passed to the next steps within Flows and are useful when you need to process data of your request within your App's logic.

You can add return values manually but using the Suggested Values Section (available after a successful test) is much more convenient. However, if the response does not include all the possible return values, adding them manually might be necessary.

Save & Publish​

Once all configurations are complete, click Save to finalize your Trigger.

warning

Note that if you changed content or settings of an existing Trigger, you need to republish your Apps for them to take effect.

Save & Publish Custom Trigger