Create your first Rich Web Chat

What we are going to do

Let's build a simple chat that greets a user, asks their name, and welcomes them by their name. Our expected result looks like this:

This guide gives step-by-step instructions for building this chat. We are going to:

1. Create a Bot in the Designer
2. Create a Flow in this Bot
3. Download three RWC Step templates from the Library to this Flow
4. Build a Flow tree with these Steps
5. Activate the Flow
6. Open and use the chat

Prerequisites

You need to have an account in OneReach.ai.
Log in.

Instruction

Create a Bot in the Designer

1. In the Navigation bar, open the Designer.
2. Click the blue Plus button.
3. Choose Add a blank bot.
4. Add a Bot name.
5. Click Save.

Create a Flow in the Bot

1. Click the blue Plus button.
2. Choose Add a blank flow. A Flow opens.
3. Add a Flow name.

Download three RWC Step templates from the Library to this Flow

To build this chat, you need the following Step templates:

• Wait for Chat (RWC)
• Request Response (RWC)
• Send Message (RWC)

To download them from the Library to your Flow:

1. Open the Templates tab.
2. Click Library down the tab. The Library iFrame opens.
3. In the search field, paste the Step template name. Scroll through search results if needed.
4. Click Download for the Step template of interest.

TIP

If several versions of the Step template are available to download, choose the latest.

5. Close the Library iFrame.

After downloading the three necessary Steps templates, you see them in your Flow in the Templates tab.

Build a Flow tree with these Steps

• To start a chat, configure the Wait for Chat (RWC) Step:

  1. From the Templates tab, drag the Wait for Chat (RWC) Step to the Canvas.
  2. Add a Step name.
  3. Write an App name.

• To welcome a chat user, configure the Send Message (RWC) Step:

  1. From the Templates tab, drag the Send Message (RWC) Step to the Canvas.
  2. Add a Step name.
  3. In the Text Message field, write a greeting to a chat user.

• To ask the chat user a question and get their answer, configure the Request Response (RWC) Step:

  1. From the Templates tab, drag the Request Response (RWC) Step to the next leg on the Canvas.
  2. Add a Step name. For example, "Ask name".

  TIP

  As you might have noticed, every Step requires a name. The platform takes Step names to form Merge fields. It is what we call variables that pass data from Step to Step in the Flow. Further in this instruction, you can see how we pass and use the data from this Step in the next one.

  3. In the Text Message field, write a question to a chat user: "What is your name?"

• To reply to a chat user with a message containing data from their answer, configure the Send Message (RWC) Step:

  1. From the Templates tab, drag the Send Message (RWC) Step to the next leg on the Canvas.
  2. Add a Step name.
  3. In the Text Message field, write a welcome message.
  4. Click the Merge field icon {x}.
  5. To personalize the message, we add a variable with the user's name we got in the previous Step. In the drop-down list, find a Merge field that contains the name you gave to the Request Response (RWC) Step. In our example, it is askName.userReply.

Activate the Flow

1. On the Save Flow button, click the arrow to expand the menu.
2. Choose Save & Activate. It might take a bit of waiting.

Open and use the chat

1. Click the first Step on your Flow tree, which is Wait for Сhat (RWC).
2. Scroll to the Rich Web Chat settings section and find the RWC URL field. It becomes available only after Flow activation. Next to it, click .

Result

Your Rich Wed Chat opens on a new web page. Loading the chat might take some time.

Try it out! You have built your first Rich Web Chat.

You can use the RWC not only on a new web page but also embed it into your website. To try this functionality, follow the Embed your RWC into a web page quick-start guide.