- 21 Mar 2022
- 4 Minutes to read
- Print
- DarkLight
How to Integrate Tegsoft Web Chat to Website?
- Updated on 21 Mar 2022
- 4 Minutes to read
- Print
- DarkLight
In this article, integration steps of Tegsoft Web Chat into a Website are described. By following the directions described in this article, one can enable Tegsoft Web Chat feature for a certain Website.
Follow the steps below to integrate Tegsoft Web Chat to your website:
1. Create a web chat skill in Tegsoft software
2. Add HTML Embed Code to Your Site
Descriptions of the steps are provided below.
1. Create a Web Chat Skill in Tegsoft Software
For web chat to be integrated into the website, a web chat skill must be created by the supervisor or admin from Tegsoft software. If you need detailed information about creating a web chat skill, please check out Web Chat Skills (Queues) article.
2. Add HTML Embed Code to Your Site
Tegsoft provides you with a small snippet of HTML code. It can be employed to activate Tegsoft chat widget by pasting it to desired pages of a web site. This way youβll get a live chat widget on your website.
This HTML code can be used in two different ways according to web chat skills preferences:
a) Defined to all web chat skills
b) Defined to a single web chat skill
a) Defined to all web chat skills
If the web chat will work in all skills predefined in Tegsoft software, HTML code should be as follows.
β Please do not forget to replace YOUR_TEGSOFT_SERVER_URLin the URL with your server.
<html>
<head></head>
<body>
<script type="text/javascript">
(function () {
const options = {
url: 'https://YOUR_TEGSOFT_SERVER_URL/Tobe/app/ApplicationServlet?login=cc_chat&locale=EN',
title: 'Live Chat',
bgColor: '#ff7d00',
borderColor: '#efefef',
closeButton: 'close.png'
};
let isLoaded = false;
const div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = '<div style="position: fixed; bottom: 0; right: 20px; width: 150px; height: 30px; border: 1px solid '+ options.borderColor +'; z-index: 1000; background-color: #ffffff;" id="tegsoftWrapper"><div style="background: '+ options.bgColor +'; position: relative; height: 30px; color: #ffffff; cursor: pointer; margin-bottom: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" id="tegsoftHeader"><img src="'+ options.closeButton +'" style="position: absolute; right: 10px; top: 6px; display: none;" id="tegsoftHeaderCloseButton" /><div style="position: absolute; left: 10px; top: 8px;">'+ options.title +'</div></div></div>';
const load = function() {
if(!isLoaded) {
isLoaded = true;
const iframeWrapper = document.createElement('div');
iframeWrapper.innerHTML = '<iframe width="100%" height="400px" frameborder="0" src="'+ options.url +'"></iframe>';
document.querySelector('#tegsoftWrapper').appendChild(iframeWrapper);
}
};
const closeButton = document.querySelector('#tegsoftHeaderCloseButton');
const wrapper = document.querySelector('#tegsoftWrapper');
document.querySelector('#tegsoftHeader').addEventListener('click', function (e) {
load();
closeButton.style.display = closeButton.style.display == 'none' ? 'block' : 'none';
wrapper.style.height = wrapper.style.height == '30px' ? 'auto' : '30px';
wrapper.style.width = wrapper.style.width == '400px' ? '150px' : '400px';
});
}());
</script>
</body>
</html>
b) Defined to a single web chat skill
If the web chat will work in a single skill predefined in Tegsoft software, the skill ID shall be added to the code snippet. Follow the steps below in Tegsoft software screen to get the skill ID.
Step 1 β Click CC Management tab.
Step 2 β Click Webchat Skills (Queues) tab.
Step 3 β Select relevant web chat skill from the list.
Step 4 β Copy ID.
After copying the skill ID from Tegsoft software, it should be pasted into the code snippet below.
β Please do not forget to replace YOUR_TEGSOFT_SERVER_URLin the URL with your server.
β Please change the language in Locale=ENin the URL with the language you want to use.
β Please do not forget to replace SKILL_ID with your skill ID.
<html>
<head></head>
<body>
<script type="text/javascript">
(function () {
const options = {
url: 'https://YOUR_TEGSOFT_SERVER_URL/Tobe/app/ApplicationServlet?skill=SKILL_ID&login=cc_chat&locale=EN',
title: 'Live Chat',
bgColor: '#ff7d00',
borderColor: '#efefef',
closeButton: 'close.png'
};
let isLoaded = false;
const div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = '<div style="position: fixed; bottom: 0; right: 20px; width: 150px; height: 30px; border: 1px solid '+ options.borderColor +'; z-index: 1000; background-color: #ffffff;" id="tegsoftWrapper"><div style="background: '+ options.bgColor +'; position: relative; height: 30px; color: #ffffff; cursor: pointer; margin-bottom: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 12px;" id="tegsoftHeader"><img src="'+ options.closeButton +'" style="position: absolute; right: 10px; top: 6px; display: none;" id="tegsoftHeaderCloseButton" /><div style="position: absolute; left: 10px; top: 8px;">'+ options.title +'</div></div></div>';
const load = function() {
if(!isLoaded) {
isLoaded = true;
const iframeWrapper = document.createElement('div');
iframeWrapper.innerHTML = '<iframe width="100%" height="400px" frameborder="0" src="'+ options.url +'"></iframe>';
document.querySelector('#tegsoftWrapper').appendChild(iframeWrapper);
}
};
const closeButton = document.querySelector('#tegsoftHeaderCloseButton');
const wrapper = document.querySelector('#tegsoftWrapper');
document.querySelector('#tegsoftHeader').addEventListener('click', function (e) {
load();
closeButton.style.display = closeButton.style.display == 'none' ? 'block' : 'none';
wrapper.style.height = wrapper.style.height == '30px' ? 'auto' : '30px';
wrapper.style.width = wrapper.style.width == '400px' ? '150px' : '400px';
});
}());
</script>
</body>
</html>
After adding the HTML embed code to your website, Tegsoft Web Chat will appear as below and will be available to your visitors.
Tegsoft makes no representations or warranties, either express or implied, by or with respect to anything in this document, and shall not be liable for any implied warranties of merchantability or fitness for a particular purpose or for any indirect, special or consequential damages.
Copyright Β© 2021, Tegsoft. All rights reserved.
"Tegsoft" and Tegsoftβs products are trademarks of Tegsoft. References to other companies and their products use trademarks owned by the respective companies and are for reference purpose only.