How to Integrate Tegsoft Web Chat to Website?

Updated on 21 Mar 2022
4 Minutes to read

Print
Share
Dark
Light

Article Summary

Share feedback

Thanks for sharing your feedback!

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.

⚠️ Where you need to add this HTML code depends on the markup language and design of your website. For example, for a website built in the HTML, this snippet must be included in all appropriate HTML files.

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 be aware that web chat scripts must be placed in BODY tag to make it work.
❗ 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.

<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.

Skill ID.png

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 be aware that web chat scripts must be placed in BODY tag to make it work.
❗ 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.

Screen Shot 2021-12-27 at 12.52.02.png

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.

"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.

Was this article helpful?

What's Next

How to Integrate WhatsApp to Tegsoft Web Chat via Twilio?

Table of contents

1. Create a Web Chat Skill in Tegsoft Software
2. Add HTML Embed Code to Your Site