How to create a chatbot using Quickwork Chat and Quickwork Journey Builder

Create your own chatbot using Quickwork, a no-code, API-based SaaS platform with pre-integrated apps for automation of business workflows and messaging.

Creating a chatbot using Quickwork Chat and Quickwork Journey Builder is quite simpler. The journey builder sends automated messages to a user, upon proper configuration, acting as a full-fledged chatbot eliminating the need for a human agent. Let's create a simple journey in Quickwork Journey Builder and understand the procedure to create a chatbot.

What is Quickwork Journey Builder

Before moving towards bot creation, let us know what is Quickwork Journey Builder. Quickwork Journey Builder is an integration platform enabling you to connect various applications and create journeys (workflows)—simple and complex—in just a few mouse clicks. Integrated apps, using Quickwork Journey Builder, send and receive data seamlessly using triggers and actions to achieve the next level of automation. Visit https://automation.quickwork.co/ to use the product and refer to https://docs.quickwork.co/ to understand its working.

Use case

"Reply to a user on the Quickwork Chat messaging widget automatically whenever a new message is received from the user." According to this use case, New text message is the trigger and Send text message is the action to be used from the Quickwork Chat adaptor supported by the journey builder.

Choosing an inbox

Log in to your Quickwork Chat account as an admin and select an inbox that has a human-agent service configured. For simplicity, let's select the Medicare human-agent service that we edited in the previous document:

Figure 1: Medicare human-agent service

If you don't have any Inboxes in your account, create one. Refer to the How to create a human-agent service for a website guide to create an Inbox and deploy it on a web browser.

Now move to the Toolkits tab and make a note of the API Keys and Inbox ID of this inbox. Next, move to the Webhook tab. It contains the Webhook field. This input field is crucial and used only in terms of integration while creating a chatbot. If you wish to send and receive the messages through your messaging service or an integration platform such as Quickwork Journey Builder, specify the webhook URL as an HTTP webhook endpoint in this field:

Figure 2: The Webhook tab

To get the webhook, switch to Quickwork Journey Builder where we'll be creating a basic journey that will trigger a message automatically.

Using Quickwork Journey Builder to create a chatbot

Log in to Quickwork Journey Builder and create a new journey, say Quickwork Chatbot configuration. Let's start configuring a trigger first:

  1. Click on Please choose an app and trigger event.

  2. Choose the Quickwork Chat from the App drop-down menu field.

  3. Select the trigger event, New text message, from the Trigger Event drop-down menu field.

  4. Create a new connection by following these steps:

    1. Click the Link Account button.

    2. The Connect to Quickwork Chat window will pop up. Paste the API Key and Inbox ID of the Medicare human-agent service.

    3. Click the Link Account button. Your connection is now established. Click here to know more:

Figure 3: Connecting an inbox of Quickwork Chat

5. In the Event field, enter new message as an event.

As soon as you complete specifying all the input, Journey Builder will return a Webhook URL as shown in the following figure:

Figure 4: Webhook URL generated

Now, copy this URL, return to the Medicare human-agent service inbox, and paste this webhook URL in the Webhook field. Also, checkmark the Events checkbox. Then, click the Save Changes button:

Figure 5: Pasting the webhook URL

Your Medicare human-agent service inbox has been integrated with Quickwork Journey Builder and the Quickwork Chat-New text message trigger has been configured successfully. It will look like this:

Figure 6: Quicjwork Chat trigger configuration

Configuring Quickwork Chat-Send text message action

To do this, follow these steps:

  1. Click on Please choose an action.

  2. Choose the Quickwork Chat app from the App drop-down menu field.

  3. Select the Send text message action in the Action field.

  4. The journey builder will automatically connect the same Quickwork Chat Inbox as we have already done in the trigger section.

  5. In the Message field, enter the message that the journey builder should send to a user acting as a chatbot. E.g., Hi there! We're so glad you stopped by. Chances are you are looking for something in particular. Whether it's tech support, product info, or useful resources, we've got you covered. What can we help you with today?

  6. In the Conversation ID field, drag and drop the Conversation Id|Trigger key from the App Data-New text message trigger output:

Figure 7: Quickwork Chat action configuration

7. In the Private field, select No as an input from the drop-down menu. This will ensure that the sent messages are visible to the customer in the chat window. Selecting Yes as an input will consider the sent messages as a private conversation among the agents and would eventually not be visible to the customers.

Executing the journey

Save the Journey by clicking the Save changes button and start the execution by hitting the Start Journey button. You'll be redirected to the History tab automatically. Currently, it would have no entries to display.

Testing the chatbot

Now, open the HTML file or the website in a web browser containing the Medicare human-agent service inbox. Send a message, Hello to the chat window. As soon as you send the message, the journey builder will send a response, which we had specified during action configuration, immediately to you on the chat window:

Figure 8: Automated responses from Quickwork Journey Builder

This way of chatbot configuration not only makes you understand the working of the journey builder but also lets you create numerous journeys and chatbots without any coding. Any human-agent service inbox can be converted to a chatbot using this method. You can also build smarter chatbots that send custom questions, quick replies, carousels, postback messages using Quickwork Chat actions that the journey builder supports.

Passing custom payload

As mentioned earlier, pasting the Inbox script in the HTML code embeds the chat widget on the web portal through which communication could be initiated easily. However, this analogy leads to a conversation in the support panel with a haphazardly-assigned random user name and email address for a genuine visitor. Thus, it becomes difficult to recognize the actual potential customers through their genuine identification. Custom payloads help you to deal with such dilemmas.

To use these, go to the Inboxes window where the script for your inbox is generated. Scroll down and copy the messenger script that has custom payloads with keywords such as name, email, created_at, and custom_payload under the settings object:

  • name: The genuine name of the user you want to get reflected in the support panel. E.g., John Doe.

  • email: The genuine email address of the user. E.g., [email protected]

  • created_at: The accurate timestamp of the conversation being created. E.g., Mon March 23 2020 17:01:15 GMT+0530.

  • custom_payload: An object of payloads that you want to pass. It could be information related to sign up, log in details, or could contain a set of login credentials of a user.

Open the HTML file and paste the whole settings object below the baseURL: BASE_URL tag. Then replace the dummy input values of the above-mentioned fields with the real ones as shown in the following figure:

Figure 8: Using a custom payload script

Now run the file in the web browser. You'll see that a conversation is created in the support panel reflecting the real name of the user that you have specified and not with a lame name such as bold-grass.

Upon successful execution, you can see that the Quickwork Chat trigger passes the custom payload to the further actions configured in a journey:

Figure 9: Quickwork Chat (new) custom payload output

This is an add-on feature that Quickwork chat has adopted to smoothen your conversations.