- What is a website chat?
- What does a website chat must be able to do?
- Safe or free? We have a solution for both options!
- How to run a website chat?
- For advanced users
1. What is a website chat?
We all can agree that an opportunity to communicate with customers and have feedback from website visitors in real time is an important part of our business.
A client looks at a company’s website, searching for needed products or services, and without leaving the page he can communicate with an operator to find out important things for himself, as same as he could do in the real store with the real consultant.
But the point is that all website chats are third-party services with paid or free functions. They ask you to add a CMS widget or insert a special HTML code on a WEB page to run a website chat.
Yes, it’s easy to do, but only if you are not concerned about security issues. The real thing is that when you use third-party services, you give your agreement to save all messages between clients and operators on another server.
We take this question seriously and believe that conversations between your co-workers and clients are very too important and should not become a public domain.
2. What does a website chat must be able to do?
Live website chat helps you to expand your experience of communication in real-time with each client or visitor and must be able to do three important things:
- To send text messages. The system must remember all visitors and show them previous message history.
- To make voice and video calls directly from the website without any plugins or Flash players (all web browsers systematically refused to use it). The ideal option is WebRTC, supported by all modern browsers.
- To send images and documents. If a website chat has an option to send screenshots it will be a good additional feature for comfortable work (PrintScreen, Ctrl+V).
3. Safe or free website chat? We have a solution for both options!
Safety and availability inside one product: the free edition of MyChat Company Messenger with a free license with up to 20 connections allows you to run a website chat with an unlimited number of operators. You can call, send text messages and documents. MyChat also has Windows/Linux/Mac OS/Android and WEB apps.
4. How to run a website chat?
Firstly, you have to install MyChat Server. Go to the an official support page to get a manual..
You must have an external IP address to connect users to your MyChat Server via the Internet. If you don’t know how to do it — go here.
MyChat has a built-in WEB server that works on the 80 TCP port without encryption (by default).
If you want to know, what port your browser uses, go to the WEB Administration Control Panel from MyChat Client menu item "Tools" -> "Server Administration" (Ctrl+F10). Notice, that this option will be available for users with administration rights only:
Then, in the browser, in the Admin Control Panel, open "Settings" -> "WEB services", and you will see your WEB server port:
You have to remember this port because you will need it to connect website visitors to the website chat.
Let's use the generation mechanism for website chat HTML code. Open "Tools" -> "Support button to website":
When you need to change something (add a user, modify the configuration, change position) — do it on Admin Panel. The code will remain the same.
After this, create a local group for WEB support and add your chat operators who communicate with website visitors.
In the list of users, select one, two users, or a group. Copy the code and insert it into your page on your website.
Example of the button code:
<!--== MyChat Web Support ==-->
<script type="text/javascript">
window.__setMyChatOption = function (opt) {
try {
window.mc_uho_opt = Object.prototype.toString.call( opt ) === '[object Object]' ? opt : JSON.parse(opt);
var run = document.createElement("script");
run.type = "text/javascript";
run.async = true;
run.src = "https://mychat-server.com/chat/uho/supportUho.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(run, s);
} catch (e) {
console.warn(e.message);
}
}
</script>
<script src="https://mychat-server.com/getSupportOptions.js" async type="text/javascript"></script>
Finally, we have ready HTML code to paste it on the website. Open index.html file in the website manager and add the button code before the </body> closing tag.
Thus, you will get a “cross-cutting” button, which will appear on all website pages. If you need the button on specific pages, paste the code on them only.
5. For advanced users
If you need to unite several websites or create your own button, use the following configuration for experienced users.
Last year, we made a static code for chat servers with one website and a simple list of operators to see changes in the website support chat by clicking on something on the Admin panel.
The option to configure parameters is still available but hidden from sight.
Description of chat parameters:
text — button text to open the chat; position — button position (from 1 (right, above) to 12 — clockwise); _type — user selection type; true — for groups, and false — for specified operators; uin — UIN of the person to open the chat with, or the list of UINs — can be specified as [1,2,3] or "1,2,3", the one will be chosen randomly for the chat; group — ID of the operators' group; height — chat's window height (when opening it in a separate window); width — chat's window width (when opening it in a separate window); btnID — the list of id buttons or other HTML elements (detailed description below); select — display (or not) selection of operators before chatting: true/false (yes/no); inFrame — display the chat not in a separate window but in the middle of the page (in frame): true/false (yes/no); custom — random text string transmitted to an operator without changes in the field Reflink; url — chat server's address (Specifying HTTPS or HTTP protocol in the address is not allowed); fields — fields filled by a user when joining the chat for the first time; the text string: "email and name" or "name", or "email", or "" — nothing.
The parameter "btnID" can contain the list of id HTML elements. When clicking on it, the chat opens with a specified operator. Also, you need to specify the UIN of a person you want to open the chat with, for example:
<div id="mcGifer" uin="3" style="cursor:pointer;">
<img src="/img/Live_Chat.png" onmouseout="this.src='/img/Live_Chat.png';" onmouseover="this.src='/img/Live_Chat_2.png';">
</div>
This code shows the picture with the text "Open online chat":
Script example
<!--== MyChat Web Support ==-->
<script type="text/javascript">
window.__setMyChatOption = function (opt) {
try {
window.mc_uho_opt = Object.prototype.toString.call( opt ) === '[object Object]' ? opt : JSON.parse(opt);
window.mc_uho_opt.btnID = ["mcGifer", "mcHobit", "mcGlubber", "mcHelen"];
var run = document.createElement("script");
run.type = "text/javascript";
run.async = true;
run.src = "https://mychat-server.com/chat/uho/supportUho.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(run, s);
} catch (e) {
console.warn(e.message);
}
}
</script>
<script src="https://mychat-server.com/getSupportOptions.js" async type="text/javascript"></script>
In the string window.mc_uho_opt.btnID = ["mcGifer", "mcHobit", "mcGlubber", "mcHelen"]; all button IDs specified for opening the chat.
Similar to this papameter, in window.mc_uho_opt you can specify any field from the list above, for example:
window.mc_uho_opt.position = 2; // chat button on the center-right window.mc_uho_opt._type = true; // users of the group 1 window.mc_uho_opt.group = 1; // number of the group 1 window.mc_uho_opt.select = true; // display the list of operators when connecting for the first time window.mc_uho_opt.inFrame = true; // display the chat in the center of the window, in the frame window.mc_uho_opt.fields = "name,email"; // requires from the user to enter the name and email window.mc_uho_opt.url = "192.168.10.10:8080"; // relevant when the chat's WEB server works on one port, but you open it via port mapping on another port; notice, the address without "http(s)://"
Specified fields in the script have priority over settings on the server's administration panel.
Thus, it is possible to specify window.mc_uho_opt.group on various websites or pages to use a separate group of users.
More information about the parameter custom. It can be used for additional user identification. For example, when you have a couple of websites, and somehow the Reflink for users is not determined. This field will be added in the login, field Reflink that is processed by the server script "OnPrivateRequest" — "WebGuestInfo".
If you still have questions, visit the official MyChat Support Forum. Our team is always ready to help.
