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.
- 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.
Go to https://upscope.io and sign up.
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.