User Journey Actions

The purpose of a User Journey is to execute one or more actions once its condition is met. There are currently two types of actions supported by the Blink SDK:

• createPG: place a Blink managed component in the page
• callback: execute a Javascript function on your website

A journey can define one action it wants to run:

{
  "action": {
    "type": "createPG",
    "selector": ".blink-donation-placement",
    "panelType": "donation"
  },
  "condition": "adBlockEnabled"
}

or multiple (by the use of an array):

{
  "action": [{
    "type": "createPG",
    "selector": ".blink-donation-placement",
    "panelType": "donation"
  }, {
    "type": "callback",
    "callback": "myJSFunction"
  }, {
    "type": "callback",
    "callback": ["anotherJSFunction", "anArgument", "anotherArgument"]
  }],
  "condition": "adBlockEnabled"
}

The Blink SDK will execute all the actions, in the order in which they are provided, whenever the journey's condition is met. See the throttles page for controlling how many times the actions for a journey get executed within the same context.

Create PG

The PG is the name of a Blink managed component, and this action creates one and places it inside the webpage, in each element that matches the given selector. This action takes the following parameters:

name	type	required	description
selector	String	Required	A CSS selector to determine where to place the element. If multiple nodes within the webpage match this selector, a PG is created for each of them.
panelType	String	Optional	The type of panel to insert. Must be one of donation, subscribe, newsletter, payment, custom. Defaults to custom if not provided. While this field is optional, it is highly recommended to explicitly write it even if the panel type is custom, for clarity.
gateType	String	Optional	The type of gate to use when inserting the panel. If provided, must be one of cover, preview, banner or popup. If not provided, creates a default panel instead (without gating any content).
pgId	Number or String	Optional	An identifier of the panel to place. If not provided, will place the base panel for the given panelType. If provided, should be either the numerical ID or the name of one of the panels available in your dashboard.
context	Object or Array of Objects or Arrays	Optional	Extra context to provide to the panel. Uses the same format as the context panel option. This does not replace the panel's context option (if one exists), only applies on top of it.

Here is an example of an action that places a default donation panel inside every element with the CSS class blink-donation-placement:

{
  "type": "createPG",
  "selector": ".blink-donation-placement",
  "panelType": "donation"
}

And one that displays a custom popup with some extra context:

{
  "type": "createPG",
  "selector": "body",
  "panelType": "custom",
  "gateType": "popup",
  "pgId": "join_us_at_live_event_popup",
  "context": {
    "live_event.name": "AMA with John Doe @ Starbucks Boston!",
    "live_event.address": "185 Dartmouth St, Boston, MA 02116"
  }
}

Callback

This action type simply calls a JavaScript function through the use of the Blink functions interface. It takes a single option, "callback", which can be a string (with the identifier of the function) or an array (where the first element is the identifier of the function, and the rest will be passed into the function as arguments). In addition to the provided arguments (if any), an object describing the journey will be passed in as the last argument to the function.

For example, the following action:

{
  "type": "callback",
  "callback": "blinkFunctions.journeyActivated"
}

is equivalent to the following javascript code:

blinkSDK.callFunction("blinkFunctions.journeyActivated", journeyObject);

And this action:

{
  "type": "callback",
  "callback": ["blinkFunctions.journeyActivated", "arg1", "arg2"]
}

is equivalent to the following javascript code:

blinkSDK.callFunction("blinkFunctions.journeyActivated", "arg1", "arg2", journeyObject);