Here, you can find how to create a journey that introduces a bot and a human agent on a web widget. The user can interact and switch among a bot or human agent successfully through the widget.

What you'll need:

Skill level: Intermediate

Time required: 15 minutes

• A web widget inbox in Conversation Management
• Trigger:
  • New text message - Conversation Management
• Actions:
  • Get conversation by ID - Conversation Management by Quickwork
  • Resolve conversation - Conversation Management by Quickwork
  • Send text message - Conversation Management by Quickwork
  • Ask question - Conversation Management by Quickwork
  • Open conversation - Conversation Management by Quickwork
• Business logic:
  • If Condition, If Else Condition, and Stop Journey

Prerequisite

Before proceeding with journey configuration, let's create a web widget inbox in Conversation Management named Bot-Human agent web widget:

Click here to know how to create a web widget and open it in a web browser.

Note: Ensure you create a website widget and not a multichannel widget. 

Configuring the trigger

1. In the Event section, search the Conversation Management by Quickwork app from the drop-down menu in the Apps field present right below the New Trigger button.
   
2. Select the trigger event New text message from the drop-down menu in the Triggers field.
3. Click the Link account button to connect Bot-Human agent web widget with Quickwork.
4. Connect to Conversation Management by Quickwork window will pop up. Enter the API key and Inbox ID of the web widget. Click here to know how to get the API key and Inbox ID:
   
   
   
   
5. Click the Link account button to make a successful connection.
6. Next, specify a sample name in the Event input field.  As soon as you complete specifying all the input, Quickwork returns a webhook URL:
   
7. Copy this URL and go to the Webhook tab of the inbox whose API key and Inbox ID we connected i.e. Bot-Human agent web widget inbox. Paste the URL in the Webhook field:
   
   
8. Click the Save Changes button.
9. The New text message trigger is now successfully configured and is now ready to listen to an incoming message.

Setting conversations to the resolved state

Incoming messages from a web widget inbox are marked as open by default. A human agent handles open conversations. Once the concerns of a user are clear, the human agent then marks them as resolved from the Conversation Management portal. However, a bot considers a conversation as resolved to send an automated response. 

So to set the default status of a new conversation as resolved, switch to the Configuration tab and select Resolved for Default Conversation Status. Then click the Save button:

Configuring the Get conversation by ID action

To get the status of each conversation happening, let us configure this action:

1. In the Steps section, click on the Simple Action button and choose the Conversation Management by Quickwork app from the drop-down menu in the Apps field.
2. Select the Action as Get conversation by ID from the drop-down menu.
3. The connection gets established automatically as we connected previously for the trigger. 
4. In the Conversation Id field, drag and drop the Conversation Id data pill from the
   Conversation Management by Quickwork | New text message Trigger under Data Tree Output:

Configuring the If Condition for conversation status

1. Click the + icon, click on Business Logic, and choose the If Condition.
2. In the Left Value field, drag and drop the Status data pill from the
   Conversation Management by Quickwork | Get conversation by ID Step 1 under Data Tree Output.
3. Select Equals in the Condition field.
4. Enter resolved in the Right Value field:

Configuring Ask question action under If Condition

1. Click the indented action bar of the If Condition. Select Conversation Management by Quickwork in the App drop-down menu.
2.  Select Ask question from the Action drop-down menu.
3. Enter the question or a text in the Question field. E.g., Please select any one of the following options:
4. Select Quick Replies in the Answer type field.
5. In the Conversation ID field, drag and drop the Conversation Id data pill from the
   Conversation Management by Quickwork | New text message Trigger under Data Tree Output.
6. Specify a help text in the Retry help field. E.g., The specified input is invalid:
   
   
   
   
7. Now let's configure two quick replies in this action. Scroll down to the Elements section. Select Type as Postback in the Item 1 block. Give the Title as Get Balance:
   
   
   
   
8. Click the +Add New Item button to configure the second quick reply. Select Type as Postback in the Item 2 block and give the Title as Talk To Human:
   
   

Using If Else Condition to validate quick replies

1. Click the Business Logic option and select If Else Condition. Now, indent the If Else Condition below the Ask question action. 
2. In the Left Value field, drag and drop the Quick Reply Title data pill from the
   Conversation Management by Quickwork | Ask question Step 3 under Data Tree Output.
3. Select Equals in the Condition field.
4. Enter Get Balance in the Right Value field:
   
   
5. Click the indented action bar of the If Condition. Select Conversation Management by Quickwork in the App drop-down menu.
6.  Select Send text message from the Action drop-down menu.
7. Enter a text in the Message field. E.g., Your account balance is 14 INR. This is an automated response. Get the options again by typing "Hi":
8. In the Conversation ID field, drag and drop the Conversation Id data pill from the
   Conversation Management by Quickwork | New text message Trigger under Data Tree Output:
   
   
9. Now, click the indented action bar of the Else Condition. Select Conversation Management by Quickwork in the App drop-down menu.
10.  Select Open conversation from the Action drop-down menu.
11. In the Conversation ID field, drag and drop the Conversation Id data pill from the
    Conversation Management by Quickwork | New text message Trigger under Data Tree Output:
    
    
12. Clone the above action and change it to Send text message from the Action drop-down menu.
13. Enter a text in the Message field. E.g.,

    You are now connected with Human Agent Service. Send your queries here so that an agent can respond to it accordingly.

    Enter "Return to BOT" to switch to the automated service.

14. In the Conversation ID field, drag and drop the Conversation Id data pill from the
    Conversation Management by Quickwork | New text message Trigger under Data Tree Output:
    
    

Configuring If Condition to switch to BOT

1. Click the + icon, click on Business Logic and choose the If Condition.
2. In the Left Value field, drag and drop the Message data pill from the
   Conversation Management by Quickwork | Send text message Trigger under Data Tree Output.
3. Select Equals in the Condition field.
4. Enter Return to BOT in the Right Value field:
   
   
   
   
5. Now, click the indented action bar of the If Condition. Select Conversation Management by Quickwork in the App drop-down menu.
6.  Select Resolve conversation from the Action drop-down menu.
7. In the Conversation ID field, drag and drop the Conversation Id data pill from the
   Conversation Management by Quickwork | New text message Trigger under Data Tree Output:
   
   
   
   
8. Clone the above action and change it to Send text message from the Action drop-down menu.
9. Enter a text in the Message field. E.g., The conversation is handovered to a bot. Send "Hi" to get the options again.
10. In the Conversation ID field, drag and drop the Conversation Id data pill from the
    Conversation Management by Quickwork | New text message Trigger under Data Tree Output:
    
    

Using Stop Journey

Click the + icon, click on the Business Logic and choose Stop Journey. Indent Stop Journey below the above action located at Step 11, i.e., Send text message action as shown here:

The journey configuration is complete now. Click the Save Changes button and start the journey:

Executing the journey

Now, open the Bot-Human agent web widget in a web browser and send Hi. Refer to the following GIF and understand the journey execution: