Create Web Chat Automation Flow

With CloudCX, you can create multiple Web Chat flows used for Pre-Chat and Offline Message on Widgets.


Create a Web Chat Flow  

You can create a Flow either of your own or by selecting from the pre-built template.

Step-by-Step Instructions

  1. Go to your system CloudCX installation domain, and log in with the admin account.

  2. From the left navigation menu, go to Automation> Flow Builder  > Flows.

  3. Click on the “+” button to create a new flow.

1-20240918-080453.PNG
  1. Select Wait for incoming webchat message that will trigger your Web Chat flow. Then click Next.

2-20240918-090015.PNG
  1. The New Flow page appears. If you want to create a custom flow, you can click Create your own to create; If you'd like to collect lead info via the Flow, you can select the Lead Generation template, and click Create. To learn more on the templates, see Flow Templates4.1 Flows Setup | Flow Templates. We'll take the Create your own flow as a sample.

7-20240923-031941.PNG

The Flow builder page is displayed with a Start Action. To learn more about these actions, see Flow Actions Create Web Chat Automation Flow | Flow Actions.

8-1-20240923-033202.png
  1. In the Flow builder page, you can do one of the following to customize your flow’s information:

  • Click the Start action to open the flow information edit page.

image-20240923-040332.png
  • Click the flow name on the top right to open the flow information edit page.

image-20240923-040502.png
  1. You can upload an image for the flow avatar, create a name for the flow, and add the description for this flow.

image-20240923-085827.png
  1. You can do one of the following to add actions:

  • Select and drag the flow action from the left Add Step menu to the Flow Builder area and connect them in a guided workflow.

11-20240923-091421.PNG

The “!” in Start action, that means the Flow is not completed, you need to search the action with “x errors” and complete that action. When the Flow is completed, the “!” will be disappeared.

  • Click the “+” in the Start action and select an action to add.

12-20240923-091549.PNG
  1. When you select an action, you can do the following:

  • Click image-20240924-082147.png button to copy an action.

  • Click image-20240924-082322.png button to delete the action.

  • Click image-20240924-082359.png button to add a next step action.

image-20240924-081446.png
  1. You can add flow actions based on your request, you can find more details about flow actions from Flow Actions Create Web Chat Automation Flow | Flow Actions.

  2. Now, you can click Publish to publish the Flow. After publishing this flow, you can select this flow when you enable Trigger a flow in Pre-Chat, Offline-Message, or when you add Go to Flow action in other flow.

29-20240925-021015.PNG

If the flow has been used in Pre-Chat, Offline-Message or other flow, you need to disassociate the belonging relationship of the flow, then you can Unpublish the flow.

21-2-20240925-102227.PNG

Flow Actions

Your Flow building process revolves around the set of actions connected in a guided workflow, whether you build a custom flow or from a template. Only agents who have permission can use these Actions to build a Flow.

Send Content

Actions

Description

Actions

Description

Send a message

This action allows you to send a message to the visitor. Each message supports adding buttons with URLs, the URL will be opened in a new window/tab.

Send an image

This action allows you to send an image file or URL to the visitor.

Send a menu

This action allows you to send a list of menu options for visitors to choose. The menu options remain in the chat window after visitors choose an option.

Send quick reply options

This action allows you to send quick reply options to the visitor. The quick reply options disappear from the chat window after visitors choose an option. 

In Send Content actions, you can do the following:

  • Add a delay (the chatbot shows a typing indicator) to Chatbot responses to deliver multiple messages to the customer at a comfortable reading pace.

  • Add a message to describe each action, the description can add special characters, insert dynamic info, bold font, and links.

  • Add options for each action:

    • Add a button in the Send a message, which can be opened in a new window when the visitor clicks it;

    • Input an image URL or upload an image file in the Send an image, which can be sent to the visitor;

    • Add multiple menu options in the Send a menu for visitor to choose, to guide the visitor to get more specific support;

    • Add multiple reply options in the Send quick reply options, the visitor just needs to click to suitable reply option to simplify the visitor’s operation process to improve customer’s satisfaction.

15-20240924-034309.PNG

Collect Info

Actions

Description

Actions

Description

Collect name

This action allows you to collect the name of the customer. This data is saved to the variable "Name".

Collect email

This action allows you to collect the email address of the visitor. This data is saved to the variable "Email".

Collect phone number

This action allows you to collect the phone number of the visitor. This data is saved to the variable "Phone".

Collect company name

This action allows you to collect the company name of the visitor. This data is saved to the variable "Company".

Collect comment

This action allows you to collect comments from the visitor. This data is saved to the variable "Comment".

Collect variable data

This action allows you to collect custom information from the visitor and save it to a variable—for example, User Name. You can create any variable. The variable value will only exist when the current flow is alive in a chat.    

In Collect info actions, you can do the following:

  • Add a delay (the chatbot shows a typing indicator) to Chatbot responses to deliver multiple messages to the customer at a comfortable reading pace.

  • (Optional) Edit the description for each action, the description can add special characters, insert dynamic info, bold font, and links.

image-20240924-064454.png
  • (Optional) In the Collect variable data action, you can do the following:

    • Set the reply type for visitors, the type can be Text, Text area, Single select, Multiple select, Email, Password, Date, and Time. When you select Single select or Multiple select, you also need to input options to the Option area, so that the visitor can choose.

    • Save Visitors Answer to a variable, you can select an existing variable in the system, or input a value to create a custom variable and select it.

19-0-20240924-071705.png

Flow Operations

Actions

Description

Actions

Description

Transfer chat

This action allows you to transfer the chat to a specific agent, chat queue, or transfer the chat based on the Widget's routing rules.

Go to Flow

This action allows you to transfer to another Flow when a present Flow is finished.

Let AI Agent answer

This action allows you to transfer to AI Agent. Click Set AI Agent live for chatto learn more.

In Flow Operations actions, you can do the following:

  • Transfer chat:

    • Transfer the chat to a specific agent, chat queue, or transfer the chat based on the Widget's routing rules.

  • Go to Flow:

    • Transfer the visitor to another Flow.

image-20240924-072611.png
image-20240924-073056.png

Advanced

Actions

Description

Actions

Description

Set value

This action allows you to set values for Flow Variables, Custom Variables and Pre-chat Fields.

Send an email

This action allows you to send emails. For example, you can send the visitor's information to the company's lead collection email box.

HTTP Request

This action allows you to make an HTTP Request component that includes triggering a webhook and fetching variables.

Webhook

This action allows you to create a webhook request step that notifies the system about events that occur in an external system, and we will generate a URL that accepts POST calls with JSON-formatted payload.

In Advanced actions, you can do the following:

  • Set value:

    • You can set a certain value for the variable, or input “{{“ to awake the Variable selector to select a variable as the value, the value will be displayed in Collected Leads 4.1 Flows Setup | Collected Leads.

image-20240924-084207.png
  • Send an email:

    • Configure the pre-defined email, the system will automatically send an email when it gets the visitor’s information.

 

21-1-20240924-091046.png
  • HTTP Request:

    • You can make an HTTP Request component that includes triggering a webhook and fetching variables.

  • Webhook:

    • You can create a webhook request step that notifies the system about events that occur in an external system, and we will generate a URL that accepts POST calls with JSON-formatted payload.