How to install and test live chat on your Mac without knowing how to code

Last updated on July 6th, 2023

Pardeep Kullar

When you really want to get a feel for how live chat works, it’s nice to be
able play with it without asking your developers to install it. Below you’ll
see how to effortlessly create a website, startup a server and run both live
chat and screen sharing on your Mac without knowing how to code.

Today’s test is with a very popular live chat service called
LiveChatinc and the
same process applies to pretty much all major live chat systems.

Summary

Sign up and get the live chat code.
Create a new web page to install the live chat code on.
Paste the live chat code.
Start up a new server on your mac to begin live chatting.
Play the part of both the user and the live chat agent.
Add Upscope to screen share in one click during a chat.

1. Sign up and get the installation code

Go to
https://livechatinc.com
and sign up. You’ll then get to a page that looks like this.

Click ‘Install LiveChat’ and you’ll see the following code.

Don’t do anything with the code yet.

Lets create a website quickly.

2. Create a new page to install live chat on.

On your desktop, create a folder called ‘livechat’.

Now open up any text editor and paste the following into a new page:


"><head></head><body>Test LiveChatinc</body></html>

Save the file as ‘home.html’ (so it’s now an html page) to that folder you
named ‘livechat’ on your desktop.

This is your website!

3. Paste the live chat code

Now, go back to LiveChatinc website and copy that code you saw previously.
Paste it below the words Test LiveChatinc just like in the image below.

4. Start up a new server on your mac to begin live chatting.

You need to start up a web server on your mac to run live chat because your
local Mac server needs to talk to Livechatinc’s server.

Doing this is pretty simple and makes you look super cool ?

Go to where your Mac apps are and search for the terminal app. Looks like
this.

Now you need to point the terminal to the folder on your desktop which holds
your test website.

To do that, paste this to your terminal: cd desktop/livechat/

Then press enter.

(CD stands for change directory and after writing CD you’d write the path to
the home page. In this case the home page is in a folder on your desktop hence
cd desktop/livechat/)

Ok, now the terminal is pointed to the right folder, we’re ready to start the
web server.

Let’s start up the web server by pasting in the following and pressing enter:

python -m SimpleHTTPServer 8000

The web server on your mac is now running. You’re ready to look at your
website and chat.

Open up your browser and paste in http://0.0.0.0:8000/home.html which is
your website home page that has LiveChat installed.

If you now go back to LiveChatinc website, they’ll have detected your
installation and send you a congratulations message.

Still on Livechatinc, click ‘Go to application’ and see your live chat support
agent chat panel.

You’re ready to test out a chat as both the agent and the user.

5. Play the part of both the user and the live chat agent.

Let’s start our first chat.

Go back to http://0.0.0.0:8000/home.html and enter in text as if you’re a
new user asking for support.

That text appears in the live chat admin panel of the support agent (also you,
in this case). Reply if you wish and see it appear back on the user chat.

Done. You can add agent and play with the LiveChat settings and get a feel for
the system.

When you’re ready, install Upscope and experience how cool co-browsing is.

6. Add Upscope to screen share in one click during a chat.

You’ve done a chat.

Now try the magic of instant screen sharing.

Imagine you, as the agent, needed to see the users screen and DRAW a circle
around part of it to direct them there.

Yes, you can do this and it’s another simple copy and paste.

The sign up process will lead you to the installation code which looks like
this:

Copy and paste this Upscope code below the LiveChat code.

Alright, now you’re ready to rock.

Go back to your home.html page and refresh it.

Also refresh the live chat admin panel the agent normally sees.

You’ll see a** ‘screen share’ link** appear in the bottom right under the
map.

Click the link and you’ll see the user’s screen instantly.

You’ll then also be able to highlight parts of it.

You’ll be able draw on the users screen (see the arrow further below).

You can use Upscope to guide a user through your website. You can click for
them, scroll for them and draw circles around features you want them to look
at.

Mission accomplished. What superpowers have you learned.

You know how to create your own 1 page website.
You know how to start a server on your mac.
You know how to set up live chat and screen sharing on your website.

This development thing is easy!

Want to scare your developers?

You can use Google Tag Manager to install software to your live website
without having to ask developers (though it’s recommended to speak to them
first, this development thing is not that easy).

Google Tag Manager?

Ask your devs if they have Google Tag Manager installed and to give you
access.

Google tag manager allows anyone to add installation code to a site within
minutes so you can test out different tools that require access to the code.

Get access to Google Tag Manager, choose ‘custom html’ as the tag and paste in
the live chat code. Choose ‘all pages’ as the trigger. Done.