Overview

If you need to test how the live chat widget looks or behaves before deploying it to a live site, you can do so quickly by previewing it in a local HTML file on your computer. This approach works for both technical and non-technical users and requires no web hosting or development tools.

What You'll Need

• Your unique widget code value (created by following the previous KB article here )
• A plain text editor (e.g. Notepad on Windows, TextEdit on Mac, or VS Code)
• A web browser (e.g. Chrome, Edge, Firefox)

Steps

1. Create a new HTML file

Open your text editor and paste the following code into a new file:

2. Add your code value

Replace YOUR_CODE_HERE in the script tag with your unique code value. It should look something like this:

3. Save the file

Save the file with an .html extension — for example, chat-test.html.

4. Open the file in your browser

Double-click the saved file to open it in your default web browser. If the widget loads correctly, you will see a chat button appear — typically in the bottom-right corner of the page.

What to Expect

Once the page loads, the widget will initialise and display a chat launcher button. Clicking it will open the chat interface, just as it would appear to visitors on your live site.

Notes

• This test page is for preview purposes only and does not need to be published or hosted anywhere.
• Each partner has a unique code value — do not share this with others.
• An active internet connection is required, as the widget script is loaded from an external server.

Introduction

The Live Chat widget is a bot that can be embedded on your website, and can handle conversations from prospective clients who are inquiring about the services you provide.

Creating a Live Chat Agent

All things related to Live chat can be found under the AI Service Desk > Live Chats > Live Chats menu. To kick things off, you'll click on the Configurations button:

First you'll want to create a Chat Sequence - the questions that this chat agent will ask someone visiting your website. Click the Chat Sequences button:

Click the Add Sequence button to fill out what questions you want the Live Chat agent to ask:

Here's an example set of questions:

Once you've saved that Chat Sequence, you can create the Live Chat agent itself. Navigate back to the AI Service Desk > Live Chats > Live Chats page, and click on the Configurations button. Then click the Create Configuration button:

• Give your agent a configuration name (i.e. MSP Process Bot)
• Select your PSA configuration
• Give your agent a Widget Title (this name will be shown at the top of your chat window ie Your Company Name Chat Agent)
• Put in your greeting message that will welcome users to your chat when they click it. 
• Select Responsible Admins (The admins responsible for receiving Chats and responding)
• Choose an Accent Color for your website
• Decide if you'd like to allow Website visitors to re-open a previous chat or not

Then click Submit. 

Deploying the Live Chat Agent to a Website

1. From the AI Service Desk > Live Chat > Live Chats page, click the Configurations button
2. Click the Copy URL button in the Actions column
   • 
3. Deploy that code into the body of your website

Congratulations! You've now deployed a fully setup Live Chat agent to your website

Click on the Eye next to any chat to view the chat and respond: 

To Turn on notifications when a user initiates a chat Click the profile icon to the top right, then turn on email and/or phone options to be contacted via email or SMS when a user initiates a chat. 

Live chats can be seen from the mobile MSP Process Tech App: 

From the MSP Process Portal you can also see incoming notifications about chat requests and manage all chats here as well: 

If you wish to turn a live chat into a ticket you can do so from this screen after clicking the Eye icon next to the chat.