How to Integrate Tegsoft Web Chat - V3 to Website?

12 May 2023
6 Minutes to read

Print
Share
Dark
Light

How to Integrate Tegsoft Web Chat - V3 to Website?

Updated on 12 May 2023
6 Minutes to read

Print
Share
Dark
Light

Article summary

Did you find this summary helpful?

Thank you for your feedback

In this article,the new version of Tegsoft Web Chat - V3is 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 webchat options have been added to the script for automatic popup chat window when the user lands on a website,customization of the chat icon, size, color, and header color andsetting the visibility and edit-ability of the registration form fields. To discover new webchat features, please review the webchat script and the start_with,layout and input_rows parameters in this article.

The URLs of Tegsoft webchat test pages have been updated. New URL:

https://YOUR_TEGSOFT_FQDN/Tobe/forms/TegsoftVue/chat/chattest.html

Additionally, the following extensions can be used for accessing specific test page.

/Tobe/forms/TegsoftVue/chat/chattest.html
/Tobe/forms/TegsoftVue/chat/chattest_chatonly.html
/Tobe/forms/TegsoftVue/chat/chattest_chatanonymous.html
/Tobe/forms/TegsoftVue/chat/chattest_chatwhatsapp.html
/Tobe/forms/TegsoftVue/chat/chattest_chatvideo.html

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 integratethe 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, pleasecheck 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' >
window.tegsoft_webchat_v3_options = {
  tegsoft_hostname: "YOUR_TEGSOFT_FQDN",
  layout: {
    chatIconURL: "",
    closeIconURL: "",
    iconSize: "",
    icon_backgroundColor: "",
    header_backgroundColor: "",
    height: "620px",
    width: "420px",
  },
  position: {
    right: "15px",
    bottom: "70px"
  },
  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"
  },
  video_call_options: {
    enabled: true,
    tooltip:"Video call",
    DID: "3101515"
  },
  webchat_options: {
    enabled: true,
    tooltip:"webchat",
    disableSkill: "true",
    SKILLID: "",
    TRUNKID: "",
    SUBJECT: "",
    FIRSTNAME: "",
    LASTNAME: "",
    EMAIL: "",
    PHONE: "",
    input_rows: { 
      firstNameRowVisible: true, 
      firstNameRowEditable: true, 
      lastNameRowVisible: true,
      lastNameRowEditable: true,
      emailRowVisible: true,
      emailRowEditable: true,
      phoneRowVisible: true,
      phoneRowEditable: true,
      skillRowVisible: true,
      skillRowEditable: true
    },
    input_fields: {
      locale: "EN",
      firstNameInputLabel: "First Name",
      lastNameInputLabel: "Last Name",
      emailInputLabel: "E-mail Address",
      phoneInputLabel: "Phone Number",
      skillInputLabel: "Choose a Skill"
    },
    start_with: {
      start_delay: "delay_time_in_seconds",
      start_popupType: "webchat_popup_type"
    }
  }
};
</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_FQDN"	Your Tegsoft instance FQDN needs to be defined here. Please do not forget to replace the greenYOUR_TEGSOFT_FQDN with your own Tegsoft FQDN!
layout:{ chatIconURL:"", closeIconURL:"", iconSize:"", icon_backgroundColor:"", header_backgroundColor:"", height:"620px", width:"420px",	Chat Icon: Please update the icon parameters to change the chat icon, size, and color. Header: Please update the header parameter to change the chat header color.
whatsapp_options:{ enabled:true, whatsapp_number:"whatsapp_number", tooltip:"whatsapp" }	Your WhatsApp number needs to be definedhere. Please do not forget to replace the greenwhatsapp_number with your own WhatsApp number!
facebook_options:{ enabled:true, facebook_username:"facebook_username", tooltip:"facebook" }	Your Facebook username needs to be definedhere. Please do not forget to replace the greenfacebook_username with your own Facebook username!
instagram_options:{ enabled:true, instagram_username:"instagram_username", tooltip:"instagram" }	Your Instagram username needs to be definedhere. Please do not forget to replace the greeninstagram_username with your own Instagram username!
video_call_options:{ enabled:true, tooltip:"Video call", DID:"DID"	Please enter "true" to enable video calling. DID: Destination ID number.
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.
FIRSTNAME:""	Your first name parameter needs to be set here.
LASTNAME:""	Your last name parameter needs to be set here.
EMAIL:""	Your e-mail parameter needs to be set here.
PHONE:""	Your phone parameter needs to be set here.
input_rows:{ firstNameRowVisible:true, firstNameRowEditable:true, lastNameRowVisible:true, lastNameRowEditable:true, emailRowVisible:true, emailRowEditable:true, phoneRowVisible:true, phoneRowEditable:true, skillRowVisible:true, skillRowEditable:true	You can set the parameter values as the true or false to determine their visibility or edit-ability. The visible parameters determine the visibility of the fields in theregistration form. The editable parameters determine the edit-ability of the fields in the registration form.
input_fields:{ firstNameInputLabel:"", lastNameInputLabel:"", emailInputLabel:"", phoneInputLabel:"", skillInputLabel:"" }	If these placeholders on the webchat registration page aredesired to be customized, newlabels should be entered here.
start_with:{ start_delay:"delay_time_in_seconds"	You can delay the chat window from showing up on a page after a specific amount of time by using thestart_delay parameter. The unit of the parameter value is seconds. The default value is 10 seconds. For example; start_delay:"40" refers to a delay of 40 seconds.
start_with:{ start_popupType:"webchat_popup_type"	You can configure the automatic popup chat window when the user lands on a website with the start_popupType parameter. This parameter has 3 options: start_popupType: "Default" ➔ The webchat icon pop-ups automatically after a specified delay time when users open the website. For example; If the delay time is set to 20 seconds, the webchat icon will appear on the screen after 20 seconds. start_popupType:"registration" ➔ The webchat registration page pop-ups automatically after a specified delay time when users open the website. For example; If the delay time is set to 20 seconds, the webchat registration page will appear on the screenautomatically after 20 seconds. start_popupType: "anonymous" ➔ The webchat session is automatically started as an anonymous contact after the specified delay time when the users open the website. For example; If the delay time is set to 20 seconds, the webchat session will start after 20 seconds anonymously.

➤ 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 parameterin 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 WhatsApp to Tegsoft Web Chat via Twilio?

Table of contents

New Tegsoft Web Chat Version - V3