Top
Branching using a script
  • 3 minutes to read
  • Print
  • Dark
    Light

Branching using a script

  • Print
  • Dark
    Light

Branching in Walkthroughs addresses scenarios where there could be two or more possible navigations available to the user after they have performed a few steps. So depending on the available options, Whatfix can break off into different walkthroughs at the branching point. Branching also provides you an ability to skip steps in your walkthrough when connecting walkthroughs. A particular Whatfix flow can be redirected to any step (instead of the next) of another or same flow based on the result of user interaction or conditions.

Branch based on user input:

The walkthrough can be directed to show other walkthroughs, based on user input at a certain step. For example, a walkthrough to do funds transfer in a banks internet banking page can show the initial steps to reach the Funds Transfer tab and then branch out based on which transaction type is selected. The branches could be different for NEFT, RTGS, Instant Transfer, etc.

Funds%20Transfer.png

Check for branching before showing the step

window._wfx_settings = window._wfx_settings || {};
window._wfx_settings.onBeforeShow = function (event) {
        if(<selected transaction type logic>)
            return {"flow_id":"<selected transaction flow id>", "position":<step no.>};
        else
            return null;
}; 

Show multiple flows after one another

If you have a flow to show a new user on how to get started on using your application, you can continue showing multiple flows to explain the application.

window._wfx_settings = window._wfx_settings || {};
window._wfx_settings.onBeforeShow = function (event) {
        if(<new user>)
            return {"flow_id":"<next flow id>"};
        else
            return null;
};
Note
  • The condition need not be based on UI elements only, it could be based on user privilege, data, etc.

Syntax:
For business accounts, the below snippet can be placed in the integration section(without script tags) and saved.

window._wfx_settings = window._wfx_settings || {};
window._wfx_settings.onBeforeShow = function (event) {
        if(event.flow_id==="<from flow id>" && event.step==<step number> && <logical condition>)
            return {"flow_id":"<to flow id>", "position":<branch starting step number>};
        else
            return null;
},
window._wfx_settings.onBeforeEnd = function (event) {
        if(event.flow_id==="<from flow id>" && <logical condition>)
            return {"flow_id":"<to flow id>", "position":<branch starting step number>};
        else
            return null;
};

onBeforeShow: This event is fired before each step to check if the flow should proceed or it should branch to a different flow and step.
onBeforeEnd: This event is fired after the last step is shown.

All the events carry an object with the following attributes

  • name - Name of the event. One of the above.
  • flow_id - ID of flow.
  • title - Title of flow.
  • steps - Total number of steps in the flow.
  • step - Current step number (Starts with zero).

Understanding the tags in snippet

  • <from flow id>: Flow id of the flow from which you want to branch. It will be the last part of the URL in your whatfix flow page. eg:  31a53a28-8cf8-11e5-8994-feff819cdc9f
  • <logical condition>: This can be any condition that evaluates to true or false. It can be something that checks the value of an element on the page or some variable value check.
  • <to flow id>: The flow id to which you want the flow to shift to. If you want to shift to a different step in the same flow, leave this value as null.
  • <branch starting step number>: The step on which you want to branch. It will be an integer starting from 0.. If you don't give this value, it will start from the beginning.
Note
To test please run the flow in live run format.

Here are a few code javascript snippets for logical conditions

  • Branch based on dropdown value - document.getElementById("select").value=="match value"
  • Based on current url -window.location.href.indexOf("value")>-1
  • Based on element visible or not - document.getElementById("element").offsetHeight>0
  • Based on text of element - document.getElementById("element"). innerText=="match value"
  • Based on user privilege - user.privilege=="admin" //assuming user is the js object with the property privilege
Was this article helpful?