Introduction

In this detailed overview, we explore the powerful capabilities of the webchat widget, focusing on how to create and trigger multiple flows and use payloads to personalize user interactions.

This guide is designed for users seeking to enhance their chatbot's functionality by implementing advanced flow management and custom data collection techniques.

Whether you're a developer or a marketer, understanding these features will enable you to tailor conversations based on user behavior, source, or page context, thereby improving engagement and data insights.

Step-by-Step Breakdown of Creating and Managing Flows and Payloads

1. Understanding Flows in the Webchat Widget

The core concept involves designing different conversation flows within your chatbot, each serving a specific purpose:

• Flow 1: Basic customer support, e.g., "Hello, how can I help?"

• Flow 2: Product-specific flow, e.g., "This is a product."

Implementation Steps:

• Create distinct flows in your chatbot builder.

• Set a default starting flow in the widget settings (e.g., main support flow).

• Trigger specific flows based on user actions or URL parameters.

2. Triggering Flows via URL Parameters

To trigger different flows dynamically, you can use custom URL parameters:

Example:

<script src="your-widget-script.js?ref=flow1"></script>

• When the widget loads, it detects the ref parameter.

• The chatbot initiates the corresponding flow based on the parameter.

3. Implementing Custom Scripts for Flow Control

How to set this up:

• Copy the ref parameter value (e.g., flow1 or product).

• Insert it into your widget script as a URL parameter.

• Reload the widget to see the flow change.

Sample code snippet:

const refParam = 'flow1'; // or 'product'
const scriptUrl = `your-widget.js?ref=${refParam}`;

• The widget reads the URL and starts the appropriate flow.

4. Using Payloads to Store Custom Data

Payloads allow you to pass additional data points during flow initiation, which can be stored in custom user fields.

How to add payloads:

• In the ref URL, include payloads using midlines (--):

?ref=flow2----traffic_source----facebook

• In the chatbot builder, define custom fields (e.g., traffic_source).

Example:

Implementation:

• When the widget loads, it captures payloads.

• The payloads are stored in custom user fields.

5. Creating and Saving Custom User Fields

Steps:

• Navigate to User Fields in your chatbot platform.

• Create a new field (e.g., traffic_source).

• Set the field type (e.g., Text).

• Map payloads to these fields during flow initiation.

Example:

Payload: --traffic_source--facebook
Stored in: traffic_source (Text)

• Result: The user’s source is recorded and can be used for segmentation or personalized messaging.

6. Adding Multiple Payloads

You can add multiple payloads to capture various data points:

?ref=flow2----traffic_source----facebook----page_source----landing_page

• Each payload is separated by double hyphens (--).

• Ensure the ref URL includes all payloads you want to track.

Example:

Summary

In conclusion, mastering advanced flow management and payload integration in your webchat widget unlocks powerful personalization and data collection capabilities. By creating multiple flows, triggering them via URL parameters, and passing custom payloads, you can tailor conversations to specific user segments, track user sources, and enhance engagement. These techniques enable a more dynamic and insightful chatbot experience, providing valuable data for marketing, support, and sales strategies.

Key Takeaways:

• Create distinct flows for different purposes.

• Use ref URL parameters to trigger flows dynamically.

• Pass payloads to capture user data and customize interactions.

• Store payloads in custom user fields for segmentation.

• Implement multiple payloads for comprehensive tracking.

By leveraging these advanced features, you can maximize your chatbot’s potential, delivering personalized experiences and collecting actionable insights that drive your business forward.