Skip to content

Web Forms in the RWC message

In the RWC, the Send Web Form (RWC) and Request Web Form Response (RWC) Step templates serve to create chat messages with web forms.

What to use the Steps for?

Sometimes you need to get a lot of info from the chat user. To avoid a long dialogue of numerous Request Response (RWC) messages between the bot and the user, build a web form and send it via a message in the chat.

For example, your business requires a lot of information about a user to get a new client on track and provide them with your service. In this case, a web form is a good design to frame your sign-in communication.

Note

Using Send Web Form (RWC) you can build a web form with as many pages as you need, single or multi-page.

Using Request Web Form Response (RWC) you can only build a single-page web form.

How to build a single or multi-page web form with Send Web Form (RWC)

Prerequisite

Start building RWC with Wait for Chat (RWC).

Instruction

  1. Add Send Web Form (RWC) to the Flow tree.
  • The Step requires the _Adapters Bot downloaded to your OneReach.ai account with the activated Ephemeral Web Page Server (EWPS) Adapter Flow in it:
    • If your account doesn't have this Bot and this Flow, the Step shows the Activate adapter button. Once you click it, the Bot is downloaded and the Flow is activated.
    • If your account doesn't have this Bot and this Flow but the Flow is inactive, the Step shows the Instal adapter button. Once you click it, the Bot is downloaded and the Flow is activated.
    • If your account has this Bot and the activated Flow, skip this point.
  • Add the name for the Step.
  • By default, the outgoing message consists of a text message and a button that opens the web form in a modal window. Fill in the Text message and Button lable fields. If you don't want to show the web form in the modal window, disable the Show the form in a modal instead of a chat message toggle. Then the outgoing message will consist of a text message and the web form.
  • The Show form after submit enabled toggle works as expected only with the disabled Show the form in a modal instead of a chat message toggle. Then the message with the text and the button remains in the chat after the user's submission of the web form. Otherwise, it fails to show the submitted form in the message.
  • Use the Form limits section to remove access to the web form after some time since it was created, or at a specific date/time.
  • In the Advanced settings, you can optionally configure Set custom typing indicator duration and Override bot icon.
  • Either leave default settings or configure Conversation, Merge Field settings, Error handling, and Reporting of the Step.
  1. To create the first page of your web form, add Add Page to Web Form and Wait for Response (EWPS) to the Flow tree.
  • Build the web form you need using Content Builder. To access it click the Edit with Content Builder button.
  • In the Form container section, enable the Inherit context from previous step toggle.
  • If you created the Cancel button on the first page of the web form in the Content Builder, enable the Handel cancelation toggle. The Step gets the cancel leg where you can build the needed logic.
  • If you create a single-page web form, enable the This is the last page toggle. If you are going to add the next page to your form, make sure it is disabled. Otherwise, the chat won't be able to show the next page and execute the next Add Page to Web Form and Wait for Response (EWPS) Step.
  • In the Responce options section, set the time for how long the Step can wait for the user submission of the web form page.
  • Leave default settings or configure Merge Field settings, Error handling, and Reporting of the Step.
  1. If you want to create the next/last page of your web form, add another Add Page to Web Form and Wait for Response (EWPS) to the Flow tree. Configure it the same way as the previous one, but pay attention to the following settings in the Form container sections:
  • To add the button that returns the user to the previous page, turn on the Enable back button toggle.
  • If it is the last page of your web form, enable the This is the last page toggle.
  1. Save & Activate the Flow.

How to build a single-page web form with Request Web Form Response (RWC)

Prerequisite

Start building RWC with Wait for Chat (RWC).

Instruction

  1. Add the Create Ephemeral Web Form (EWPS) to the Flow tree.
  • The Step requires the _Adapters Bot downloaded to your OneReach.ai account with the activated Ephemeral Web Page Server (EWPS) Adapter Flow in it:
    • If your account doesn't have this Bot and this Flow, the Step shows the Activate adapter button. Once you click it, the Bot is downloaded and the Flow is activated.
    • If your account doesn't have this Bot and this Flow but the Flow is inactive, the Step shows the Instal adapter button. Once you click it, the Bot is downloaded and the Flow is activated.
    • If your account has this Bot and the activated Flow, skip this point.
  • Add the name for the Step. You will need stepName.key and stepName.url Merge fields in the next Step.
  • Build the web form you need using Content Builder. To access it, click the Edit with Content Builder button.
  • If in the Content Builder, you created the Cancel button, click Enable in the Form cancelation section. In the next Request Web Form Response (RWC) Step, you can build the logic to handle user cancelation of the web form.
  • Configure Merge Field settings, Error handling, and Reporting of the Step.
  1. Add the Request Web Form Response (RWC) to the Flow tree.
  • Add the name for the Step.
  • In the Form URL field, choose the stepName.url Merge field of Create Ephemeral Web Form (EWPS).
  • In the Form key field, choose the stepName.key Merge field of Create Ephemeral Web Form (EWPS).
  • By default, the outgoing message consists of a text message and a button that opens the web form in a modal window. Fill in the Text message and Button lable fields. If you don't want to show the web form in the modal window, turn off the Disable to show the form in a modal instead of a chat message toggle. Then the outgoing message will consist of a text message and a web form.
  • If in Create Ephemeral Web Form (EWPS), you created the Cancel button in the web form and enabled the Form cancelation section, now you need to enable the Handel cancelation toggle in Request Web Form Response (RWC). The Step gets the cancel leg where you can build the logic to handle user cancelation of the web form.
  • In the Advanced settings, you can optionally configure Set custom typing indicator duration and Override bot icon.
  • Either leave default settings or configure Coversation, Merge Field settings, Error handling, and Reporting of the Step.
  1. Save & Activate the Flow.

Steps output

Send Web Form (RWC) and Request Web Form Response (RWC) have the output of the same structure.

The Step returns the following output data with the following properties:

  • User response in such forms as
    • a list (an array of objects stored in listReponse),
    • a text (a string value in stringReponse)
    • a key-value combination where keys are the names of input fields in the form and values are the user replies, both stored as an object in body
  • headers contain information about the chat where this web form is sent to

The structure of the Merge field object:

JSON
{
  "body": {
    "key1": "value1",
    "key2": "value2"
  },
  "headers": {},
  "listReponse": [
    {
      "id": 0,
      "name": "key1",
      "value": "value1"
    },
    {
      "id": 1,
      "name": "key2",
      "value": "value2"
    }
  ],
  "stringResponse": ""
}
{
  "body": {
    "key1": "value1",
    "key2": "value2"
  },
  "headers": {},
  "listReponse": [
    {
      "id": 0,
      "name": "key1",
      "value": "value1"
    },
    {
      "id": 1,
      "name": "key2",
      "value": "value2"
    }
  ],
  "stringResponse": ""
}