How to update the inbox details

Understanding Quickwork Chat. Quickwork provides a no-code, API-based SaaS platform with pre-integrated apps for automation of business workflows and messaging.

Any inbox created in Quickwork Chat, whether it's a human-agent service or a chatbot, can be easily edited for its relevant set of details. Through quick adjustments, an inbox can be empowered with a set of features that would transform a hardcoded chatting interface into an enterprise-grade level messaging platform with enhanced customer experience.

Let's walk through this document and find out how effectively a raw scripted inbox gets a new look that would ease a customer's success journey.

Previous case

In the previous document, we have created a human-agent service called Food expert human-agent service and saw a demo of the messages getting exchanged between a user and an agent. It appeared as follows:

Figure 1: Quickwork Chat human-agent service

This human-agent bot serves just as a medium of communication through the exchange of raw texts. However, a full-fledged messaging service does a lot more than this. Let us edit this inbox.

Editing the inbox

Log in to the Quickwork Chat account as an admin and click the gear icon (Settings) on the left-hand side panel. Click the Inbox Settings tab and select the inbox you want to edit i.e. Food expert human-agent service:

Agents have no edit rights to the inboxes. They can only create/edit/delete canned responses to be used during the conversation.

Figure 2: Editing an inbox

General

The General tab has the following fields:

1. Name: The current name of the inbox which will apparently become the name of the human-agent service/chatbot. Let's change this to Medicare human-agent service.

2. Introduction Heading: This is the heading of the human-agent service/chatbot that appears in the header when the widget opens. Let's give a heading as PharmEasy Health Services.

3. Introduction Body: This text acts as a subtitle of the bot. It can be used to emphasize the function of the bot as well. The body text appears just below the heading. Let's give a subtitle as Medical emergencies right at your doorstep!

4. Widget Color: It contains a color pallet from which you can choose the color of the widget. The selected color gets reflected automatically for the widget on a website, Android, or iOS devices. Let's select the blue color for the widget:

Figure 3: The General tab

5. Bot Icon: This field allows you to attach a customized image/icon for the bot. The bot icon is a profile image of the bot. It can be seen in the header and beside the messages been received on the chat screen. This field supports images/icons that are publicly available on the internet or locally stored with extensions .jpg, .png, .bmp, etc. The image dimension must be 200x200 px and its size must not be greater than 1 MB. Let's use the following URL as a bot icon: https://images.assetsdelivery.com/compings_v2/sashaka/sashaka1711/sashaka171100064.jpg.

6. Widget Icon: This field allows you to attach a customized image/icon for the chatbot widget. This icon appears at the bottom right-hand side corner of the screen both on the website and Android/iOS app. This field supports images/icons that are publicly available on the internet or locally stored with extensions .jpg, .png, .bmp, etc. The image dimension must be 200x200 px and its size must not be greater than 1 MB. Let's use the following URL as a bot icon: https://cdn2.iconfinder.com/data/icons/chatbot-line/100/chatbot-07-512.png

Note: You can see the preview of these image icons beside the text-field area:

Figure 4: Setting bot and widget icon

Now, click the Save Changes button and move to the Toolkits tab.

Toolkits

The Toolkits tab contains tech-specific details of the inbox:

1. Inbox ID and API key: Each inbox has a unique identifier associated with an alpha-numeric API key. These credentials are used to connect the inbox with the Quickwork Journey Builder in order to achieve messaging automation.

2. Messenger script: This is the script that gets generated at the end of the successful creation of an Inbox. It contains a BASE_URL and the WEBSITE_TOKEN that acts as a unique identifier for each inbox to be embedded within the code of a website. In case, if you have missed copying this script at the time of inbox creation, you can copy it from this page:

Figure 5: The Toolkits tab

3. SDKs: This section comprises two options to get familiar with the toolkits; Android and iOS SDKs. These toolkits are an integral part of Android/iOS devices and it can be easily embedded using respective SDKs. Visitors, users, customers, etc. can then communicate through their Android/iOS devices to an agent or a bot via Quickwork Chat similar to the way they interact through the website web widget. For any support, click the Check Documentation button and know more about embedding inboxes in Android and iOS devices in a few minutes:

Figure 6: Android and iOS SDK toolkit

Agents

1. Auto Assignment: This field contains radio buttons ensuring whether you want to automatically assign the conversation of this inbox to agents or not. The default value is On. If there is more than one agent in the account, the round-robin method is used to assign the conversations.

2. Agents: You can add agents to this inbox from the drop-down menu. If you want to remove the agents click the cross sign associated with the agent names. If you don't have any agents added to your account, refer to the Agents document:

Figure 7: The Agents tab

Click the Save Changes button and move to the Webhook tab.

Webhook

1. Webhook: Webhook listens to an incoming event and responds to it correspondingly. For example, if a user signs up on a web page, the attached webhook initiates a call to the server to send a confirmation email to the user. In the case of Quickwork Chat, a webhook is used to connect a human-agent bot with the integration platform, Quickwork Journey Builder. Upon successful configuration, messages sent from the user gets replied automatically, converting a human-agent service to a full-fledged chatbot. Click here to know more. Currently, leave this field empty.

2. Events: This option lets you receive incoming messages through a webhook event of Quickwork Journey Builder that helps agents/admins to send messages, buttons, images, etc. It can also be used to send welcome messages to a new user or visitor each time stepping-in on a web-widget. Let the checkbox remain unticked in our case:

Figure 8: The Webhook tab

Permissions

This tab contains a set of features that can be enabled/disabled for an inbox as per the business requirement:

1. Location Button: This section contains a pair of radio buttons to Show or Hide the location icon beside the text area on the right-hand side of the web widget. The Show option is pre-selected by default.

2. File Upload Button: This section contains a pair of radio buttons to Show or Hide the file upload icon beside the text area on the right-hand side of the web widget. By default, the Hide option is selected. Select the Show option. This will allow you to upload images, audios, videos, etc. of up to 10 MB from the local device storage, whether PC or mobile devices:

3. Dashboard Notifications: Toggling On the radio button of this field will trigger a notification sound whenever a user sends a message through the web widget to an agent or a chatbot. This sound act as an alert while an agent/admin is off the dashboard screen. The default notification sound setting is On for all the conversations. If an agent does not want to hear the same, he/she can turn it Off:

4. Firebase Server Key: This key allows you to trigger real-time notifications for an incoming message on Android and iOS devices whenever you are inactive in the chat window. This feature is purely meant for mobile devices. To get this key, you need to have a project created in Google Firebase Console. Then click the Settings (cog wheel) icon next to your project name and navigate to Project Settings > Cloud Messaging. You'll get the server key. Click here to know more. Currently, we are updating the website widget, leave this field empty:

Figure 9: The Permissions tab

Click the Save Changes button and move to the Labels tab.

Labels

Labels are custom tags used to define more about the item to which it is assigned. In our case, labels or tags describe the nature of conversations happening between a user and an agent or chatbot. Click on the Add Label button and create the High priority label for this inbox. You can assign these labels to any conversation from the Conversations dashboard:

Figure 10: The Labels tab

Saving the changes

We have updated the widget color, title, description, bot icon, widget icon, and enabled the file upload button for this inbox. Now reopen/refresh the Quickwork Chat Inbox in a web browser. The Quickwork Chat human-agent service seems enhanced from the first appearance. Look at the following GIF:

Figure 11: Human-agent service

In this way, you can polish the appearance of the chatbot or human-agent service bot and make it an integral part of your website or an app.