Tutorial - Your first live chat

This tutorial will demonstrate the capabilities of the agent dashboard by stepping you through a live chat between a support agent and an end user. It is expected to take about fifteen minutes.

You will need:

• An account with the "use agent dashboard" permission.
• A flow that includes a live support step configured to allow voice and video calls. If you do not have one, see Tutorial - Create a flow for live support.
• A second device, web browser, or private browser tab where you can take actions as the end user. This tutorial will refer to this as "the end user device". For illustrative purposes, this tutorial will assume you are using a smartphone with a camera - note that not all features will be available if you do not have a device with a camera to use.

Enable browser notifications

While not required, it's a good idea to enable browser notifications for the agent dashboard so that you can be alerted to incoming conversations.

1. Click the "ENABLE NOTIFICATIONS" button in the banner to enable browser notifications.

2. Your browser will prompt you to allow or deny notifications from the Mavenoid website. Choose to allow them.
3. The agent dashboard page will reload automatically.
4. When new conversations enter the queue and you have a browser tab open to the agent dashboard, you will receive a notification from your browser alerting you to the new conversation.
5. If you change browsers or the "send notifications" permission is revoked for Mavenoid's website, the notifications banner will reappear. You can re-enable notifications by repeating steps one through three.

You can also configure email or SMS notifications if you like. See Get notified of new conversations - Email notifications and Get notified of new conversations - SMS notifications for details.

As the end user, start a conversation

There are several ways to start a conversation, such as by accessing the assistant on the end user device. The simplest way, which does not require that the assistant be embedded on your website, is by using a conversation link as follows.

1. Log in to Mavenoid.
2. Navigate to the agent dashboard by clicking the hamburger menu in the top left and selecting "Agent dashboard".
3. Click the plus button next to the "Conversations" header in the top left.

4. This will open a "Create a conversation link" modal dialog.

5. Select a flow that contains a live support step.
6. For this tutorial, leave the "Require Mavenoid login" box unchecked. Checking this box requires the user to log in to Mavenoid in order to use the link.
7. Click the "GENERATE LINK" button at the bottom. This will generate a sharable link.

8. If your end user device is a smartphone with a camera, click the QR icon next to the "COPY LINK" button and scan the QR code with the device's camera.

9. Otherwise, simply copy the link and send it to the end user device.
10. Access the link on the end user device to start a conversation using the selected flow.

11. Follow the flow to reach a live support step.

The end user device is now in a chat session waiting for a support agent to join. If you enabled browser notifications and have the agent dashboard open in the background, you should now receive a notification alerting you to the new conversation.

As the support agent, join the conversation

Now it's time to bring the support agent into the conversation to assist the end user directly.

1. In the agent dashboard, find the new conversation in the "QUEUED" pane on the left. Clicking on it will show you the information provided by the user so far, including any messages entered while waiting for a support agent.

2. To see more detailed information, you can click the "Show details" button with the "i" icon next to the "START CHAT" button in the top right. This will toggle a detail pane that includes information about the user if they are logged in, any form data the user supplied before starting the live chat, any existing notes on the conversation, and a list of solutions that exist in the flow in use.

3. You can hide the detail pane by clicking the "i" icon again.
4. In case of spam or otherwise invalid conversations, you can click the "DECLINE CHAT" button in the top right to remove the conversation from the queue. In this case, however, the conversation is genuine. Click the "START CHAT" button in the top right to join the conversation as a support agent.
5. The conversation moves from the "QUEUED" pane to the "ACTIVE" pane and a message bar is added at the bottom.

You are now in the conversation as the support agent, with your end user device in the conversation as an end user.

Chat and share files

You can now chat back and forth between the support agent and the end user much like any real-time text chat. You have several additional tools as well.

Share files and images

The support agent can share images and other files to the end user.

1. Click the paperclip button to the left of the text entry field at the bottom of the dashboard.

2. Select "File". This will open a system file chooser.
3. Navigate your file system to the file you wish to share and select it.
4. The file appears as a message in your conversation. Images are displayed inline and the user can click or tap on them to expand them. Other files are shown as download links the user can click or tap to open the file on their device.

5. The end user also has a button to the left of their own text entry field for sharing files the same way. If their device has a camera, they will also have a camera button for taking a new photo or video to be shared immediately. This can be useful for showing the support agent the current status of the product they are working with.
6. As the support agent, you can also draw on images to better guide the user. See Draw on images for details.

Add notes

The support agent can add internal notes to the conversation transcript which are not shown to the end user, but which can be reviewed by support agents or Mavenoid admins.

1. If it's not already open, open the details pane by clicking the "Show details" button with the "i" icon next to the "START CHAT" button in the top right.
2. In the "NOTES" section, click the text box with "Click to add a note" guide text.
3. Type the desired note and hit Enter. This will add the new note to the running transcript.

For details on how to review prior conversations and see these notes, see Review previous conversations.

Start a video call

Sometimes text and images aren't enough and it's helpful to start a video call so that the end user and support agent can see the same thing in real time.

1. Normally you'd want to have the support agent ask the end user if it's okay to request a video call so that they aren't surprised by it, but in this case you are both the support agent and the end user so you can skip that step.
2. In the agent dashboard, click the camera button in the top right to request a video call.

3. If you haven't already given your web browser permission to use your device's microphone, you will be prompted to do so.
4. Depending on how you have set up your devices, you may wish to mute your microphone to prevent audio feedback. You can do this using the mute button to the left of the red end call button at the bottom.

5. On the end user device, press the "Accept" button to accept the call.

6. Depending on your device, you may be prompted to grant your browser permission to use your device's microphone and camera. You may also be prompted to choose whether to use the front or rear camera.
7. When ready, you can press the "Join call" button to join the call. Until you do this, no audio or video is sent to the support agent.
8. Once joined, you may wish to mute your microphone to prevent feedback.

Chat and draw on video

During video calls, all the options from normal live chat are available. Additionally, support agents can interact with the shared video in several ways to better guide the user.

1. The support agent can still type messages to the end user, which can be especially useful if the end user is in a noisy environment. The end user will see the most recent message displayed over the bottom of their video.

2. The end user can also swap between a text chat pane and the video call pane at any time. While on the text chat pane, they can see the chat log and also type their own messages to the support agent.

3. The agent and user can still share files as before.
4. The support agent can still take notes as before.
5. The support agent can also take image snapshots of the video screen to add to the notes. This can be done by clicking the snapshot button in the video controls at the bottom of the video pane and selecting "Add to note".

6. The support agent can pause the video stream for both the agent and the user by clicking the pause button in the video controls at the bottom of the video pane. This can make it easier to focus on specific areas without the user needing to hold the camera steady.

7. The support agent can display a pointer to the user by mousing over the video pane. The agent's cursor will be visible to the user as an arrow. You can use this to direct the user toward specific areas in the image.

8. The support agent can draw lines on the video by simply clicking and dragging over the video pane. These lines will be visible to the user. (If the video is unpaused, these lines will fade automatically after a few seconds. If the video is paused, they will persist until the agent clicks the "CLEAR" button in the top middle of the video pane.) You can use this to circle or highlight important areas or illustrate directional movement, but note that the video may appear mirrored to the user depending on the camera they are using.

When the video call is done, either the support agent or the end user can terminate it by pressing the red end call button. This will close the video call and return to text-based live chat.

Wrap up

There are a few steps to wrap up a finished conversation once the end user has been helped.

1. Normally you'd want to have the support agent ask the end user to confirm that their request is resolved, but in this case you are both the support agent and the end user so you can skip that step.
2. In the agent dashboard, click the "END CHAT" button to end the conversation.

3. The support agent will be prompted to confirm whether the customer's problem was indeed solved.

4. If the problem was solved, the support agent can indicate what the solution was - either an existing one from the flow or a new one that could be added. (See Understand conversation debrief for more details.)
5. Click "Submit" in the bottom of the dialog to confirm and close out the live chat.
6. The end user will be then be directed as indicated by the flow. By default, a confirmed resolution will result in the user being prompted to provide feedback on the conversation.