Web Flow Templates

Overview

Web Flow templates provide a simple way to start building an application with commonly used actions. Web Flow templates are pre-configured but they can be further tailored for a customized experience.  Within a Journey, there can be multiple Web Flows, each built with a specific purpose, and they can be connected among each other.

Creating a Web Flow from a template

There are two ways to create Web Flows from a template:

  1. From the Web Flows Builder: Web Flow templates can be added by clicking on the ‘+’ icon next to Web.
organizing infoorganizing info
  1. From the Journey Builder: Web Flow templates can be added by clicking on the ‘+’ icon in an Event and selecting Navigate to Web Flow.
organizing infoorganizing info

A blank canvas will be displayed to click on the ‘+’  icon and add a new Web Flow template.

organizing infoorganizing info

Combining Web Flows

In this example, two Web Flow templates were added to the application: “Capture Customer Info” and “CSAT”, each with their pre-configured fields and actions. In addition, the “Capture Customer Info” Web Flow includes the button “Next” which runs the “Contact Info Captured” Event. This Event allows the two Web Flows to be combined so that users can go from one to the other as they move forward in the Journey.

organizing infoorganizing info

To do so, in the Journey Builder, a Navigate to Web Flow action must be added to the “Contact Info Captured” Event.

organizing infoorganizing info

Finally, select which Web Flow to navigate to when the Event is run.

organizing infoorganizing info

Passing Data from One Web Flow to Another

Data entered in the Input fields can be passed from one Web Flow to the other. In this example, to provide a more customized experience, the name the user entered in the Input field of the Capture Customer Info Web Flow will be used in the CSAT Web Flow. To do so, in Web Flows Builder add a “first_name” Variable of type Text at the CSAT Web Flow level.

1.variableRED.png1.variableRED.png

Then, go to the Web Page that will include the user’s name. Select the corresponding Label and in the General tab add the Variable in the Text field:

“Hello, {{first_name}}”

Make sure you enter the Variable in the Expression box that gets displayed when clicking on the arrow.

organizing infoorganizing info

Finally, go to Journey Builder and click on the Contact Info Captured Event. It already shows the Navigate to CSAT action set up above. Now in Input, add the first_name Variable.

organizing infoorganizing info

This way, the data entered as name in the first Web Flow will be passed onto the CSAT Web Flow. When Previewed it looks like this:

organizing infoorganizing info

Did this page help you?