How to Integrate Tegsoft Web Chat - V3 to Website?

Updated on 20 Jun 2022
3 Minutes to read

Print
Share
Dark

Light

In this article, the new version of Tegsoft Web Chat - V3 is introduced and integration steps are detailed. By following the directions in this article, one can enable Tegsoft Web Chat feature for a certain website.

New Tegsoft Web Chat Version - V3

New Tegsoft Web Chat Version - V3 is now available for Tegsoft’s users to integrate web chat into websites with the new user interface and functionalities.

With this version, Tegsoft Web Chat is getting a fresh visual update and new functions such as social media connections. Among many others, the most noticeable change is the user-friendly, fluent, and elegant design.

Please watch the video below to take a closer look at the new version.

Please follow the steps below to integrate the new Tegsoft Web Chat - V3 into the website.

ℹ️ To integrate the new Tegsoft Web Chat - V3 into the website, Tegsoft version needs to be up to date.

1. Create Web Chat Skill in Tegsoft Software

To integrate web chat into the website, a web chat skill shall 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. Define Text Routing Rule

After the web chat skill (queue) is created, text routing rule shall be defined.

If you need detailed information about text routing rules, please check out Text Routing Definitions article.

3. 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 embed code is given below.

❗ Please be aware that web chat scripts must be placed in BODY tag to make it work.

<html>
<head>
...
<meta charset="UTF-8">
...
</head>
<body>
...

<script type='text/javascript' >
const tegsoft_webchatv3_options = {
  tegsoft_hostname: "YOUR_TEGSOFT_SERVER_URL"
  borderColor: "#ffffff",
  whatsapp_options: {
    enabled: true,
    whatsapp_number: "whatsapp_number",
    tooltip:"whatsapp"
  },
  facebook_options: {
    enabled: true,
    facebook_username: "facebook_username",
    tooltip:"facebook"
  },
  instagram_options: {
    enabled: true,
    instagram_username: "instagram_username",
    tooltip:"instagram"
  },
  webchat_options: {
    enabled: true,
    tooltip:"webchat",
    disableSkill: "true",
    SKILLID: "",
    TRUNKID: "",
    SUBJECT: "",
    input_fields: {
      firstNameText: "",
      lastNameText: "",
      emailText: "",
      phoneText: "",
      skillText: ""
    }
  }
};
</script>
...

...
<script type="text/javascript" src="https://arge28.tegsoftcloud.com/Tobe/forms/TegsoftVue/tegsoft_webchat_v3.js" ></script>

</body>

Parameters and their values in this HTML code are described in the table below.

Parameter	Descriptions
tegsoft_hostname:"YOUR_TEGSOFT_SERVER_URL"	Your Tegsoft instance URL hostname needs to be defined here. Please do not forget to replace the green YOUR_TEGSOFT_SERVER_URL with your own Tegsoft Server URL!
whatsapp_options:{ enabled:true, whatsapp_number:"whatsapp_number", tooltip:"whatsapp" }	Your WhatsApp number needs to be defined here. Please do not forget to replace the green whatsapp_number with your own WhatsApp number!
facebook_options:{ enabled:true, facebook_username:"facebook_username", tooltip:"facebook" }	Your Facebook username needs to be defined here. Please do not forget to replace the green facebook_username with your own Facebook username!
instagram_options:{ enabled:true, instagram_username:"instagram_username", tooltip:"instagram" }	Your Instagram username needs to be defined here. Please do not forget to replace the green instagram_username with your own Instagram username!
SKILLID:""	Predefined SKILLID in Web Chat Skills (Queues) menu in Tegsoft software needs to be defined here.
TRUNKID:""	Predefined TRUNKID in Text Routing menu in Tegsoft software needs to be defined here.
SUBJECT:""	Predefined SUBJECT in Text Routing menu in Tegsoft software needs to be defined here.
input_fields:{ firstNameText:"", lastNameText:"", emailText:"", phoneText:"", skillText:"" }	If these placeholders are desired to be customized, new labels must be defined here.

➤ Get the SKILLID value

Follow the steps below in Tegsoft software to get the SKILLID.

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. This is value of SKILLID parameter.

➤ Get the TRUNKID and SUBJECT values

Follow the steps below in Tegsoft software to get the TRUNKID and SUBJECT.

Step 1 – Click PBX Management tab.
Step 2 – Click Text Routing tab.
Step 3 – Select relevant text routing rule from the list.
Step 4 – Copy the content. This is value of TRUNKID parameter in HTML code.
Step 5 – Copy the content. This is value of SUBJECT parameter in HTML code.

After all the steps are completed, Tegsoft Web Chat - V3 will be available to your visitors on your website.

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 Tegsoft Web Chat to Website?

Table of contents

New Tegsoft Web Chat Version - V3