Getting Started

The chat widget helps your clients interact with your company, as it provides sending and receiving messages. Messages are sent using the WebSocket protocol.

In this article, we will cover instructions for setting up and enabling the chat on your website.

Follow the algorithm below:

1. From your account manager, obtain details for connecting the library for the following parameters:

webchat/package
webchat/uid
webchat/websocket
webchat/datastore
webchat/backend/rootUrl
webchat/backend/history

2. Download the current version of the widget to configure the web chat.

• From the releases page

• Go to the main page -> click Code -> click Download ZIP

Important: the widget version cannot be more recent than the version of the app backend

3. Place the widget file threadswidget-6.9.1.min.js in the root or any directory of your site.

4. Download the sample configuration file settings.json

Place the settings.json file in the same directory where the web chat is located. You configure all widget settings in this file. You will need to specify the path to it later when initializing the widget (step 9).

5. In the settings.json file, configure the parameters the data on which you received from your account manager in step 1.

6. Customize the color scheme that matches your website.

Go to the skin section. In the sample file, the parameters define the colors of the following elements:

Field	Description	Default value
name	Name of the appearance theme. The following ones are available: mfms, threadsim, halcyon, adaptive	"threadsim"
width	Widget width	"366px"
height	Widget height	"420px"
colorMain	Main base color	"#008aff"
colorSecond	Additional base color	"#05b8ff"
colorLines	Color of lines and agent messages	"#dee4e9"
colorSubText	Additional text color	"#6e6e6e"
colorText	Text color	"#000000"
colorBackground	Widget background color	"#ffffff"

colorMain 1: Client's message background 2: Background of the message input field colorSecond 3: Background of the attachment preview area colorLines 4: Agent's message background colorSubText 5: Color of the close button 6: Color of system messages colorText 7: Color of the header text colorBackground 8: Widget background color 9: Text color of the attachment preview area 10: Text color of message input field

7. Configure WebPush notifications.

Create a Firebase project for push notifications.

How to register in Firebase

1. Create a new project

2. Enter the project name and select a domain

   The project is created. Click Continue.

3. On the project page, click the Settings button in the Project Overview section and select Project settings.

4. On the General tab, scroll down to the Your apps section and click the web app icon.

5. Enter the app's nickname and click Register App.

6. Obtain the generated service worker script and click Continue to the console.

The app's service worker config will remain available on the General tab of the Project settings page. You will need the parameters of this config in the further steps of the widget configuration.

7. Go to the Cloud Messaging tab and obtain the api_key and senderID values.

1. Download firebase-messaging-sw.js.

2. Configure the file. In config, specify the parameters of service worker for the widget:

   var config = {
     enable: false,
     firebaseConfig: {
       apiKey: 'FIX_ME',
       authDomain: 'FIX_ME',
       projectId: 'FIX_ME',
       storageBucket: 'FIX_ME',
       messagingSenderId: 'FIX_ME',
       appId: 'FIX_ME',
     },
     title: 'edna Chat',
     icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAMAAAAp4XiDAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABOUExURUxpcejo6Onp6enp6eTk5Onp6erq6uvr6+np6eXl5enp6ejo6Ovr6+zs7Ojo6Onp6ePj4+rq6pmZmdPT06enp+bm5p6entra2sLCwrm5ueNweO8AAAARdFJOUwBOiKUcunn78A3dnllqk8XwLooT9gAAAWVJREFUSMedllmShSAMRXHggYq+YhLd/0bbtluLJODA/SR1yiQmFxgj6tTEeymE7PmkOnarduRCRxJ8bK+BQSc05KGuljopWWfyqzLADlUp4qMv9aFJNfpGDUqu++pbfSHT6AdqXtSRqKeiUR+Cp6dn3zrcXW+d2eQs6fVRTo0CYQd2KKBQ/T8l6CNhNqdmxMi/2UFz5SNiY1BFw/4R9O3VAK0o/PuZEZ3NEJlReNwQjvIySCgzvnVYvENEx5R+h2jFprfIhEu5Rzjr3yI9I9t702QtmcBHDiIOxwVFFogsFCGJBYgEmlivLzMjeW3lc3JmY4Rs2dbkia7rmp/j/VcquvYxQg1A0bFc4IotdCxhMQhIQBytmHUmIeA0I1jkkASQ07SxXQRzoRDbxWlK9gqxwJQO63uC1NBgvcsTzkODPWzc26w8svGSy6LkSiq5+Aqu15JLvOipUPIgKXn2FD2uHj3hfgChdIQNPQdYDAAAAABJRU5ErkJggg==',
   };

   where:

• enable - The parameter that enables/disables the functionality (possibles values are true and false)
• firebaseConfig - Firebase platform connection parameters, service worker configuration
• title - Header the client will see in the push message
• icon - Push notification icon in the base64 format

3. Similarly, configure the pushNotification section in the settings.json configuration file.

4. Share the sender_id (Sender ID) and api_key (Server Key) values from the Cloud Messaging tab of your Firebase project with your account manager.

5. Place the firebase-messaging-sw.js file in the root of the website. This script must be available here: http(s)://****/firebase-messaging-sw.js (where **** is the domain that is being configured).

8. Download the web-notification-sw.js file.

Place the web-notification-sw.js file in the root of the website. This script must be available here: http(s)://****/web-notification-sw.js (where **** is the domain that is being configured). This is required for the browser web notifications about new messages in the widget to operate properly.

9. Embed the widget on your website.

1. Enable the widget: To place the chat widget on the page where it will be displayed, add the following initialization code before the closing </body> tag:

   <!-- BEGIN CHAT {literal} -->
   <script type="text/javascript">
   !function(e,n){"use strict";function a(e,t){const n=setInterval(function(){ThreadsWidget&&!ThreadsWidget.isDummy&&(clearInterval(n),ThreadsWidget[e]&&ThreadsWidget[e].apply(void 0,t))},100)}window.ThreadsWidget={},e=e||"/settings.json",ThreadsWidget.isDummy=!0,["hideInvite","version","commitHash","showChat","hideChat","onHideChat","onScenarios","onLoad","on","reInit","init","unInit"].forEach(t=>{ThreadsWidget[t]=(...e)=>{a(t,e)}});i=new XMLHttpRequest;var i,t=function(e,t,n,a){i.onreadystatechange=function(){if(4===i.readyState)if(200===this.status)n(i.response);else{if("function"!=typeof a)throw new Error(i.response);a(i)}},i.open(e,t),i.send()};function o(t){t.webchat&&(t.webchat.filename=t.filename),n&&"string"==typeof n&&(t.webchat.currentLocale=n),n&&"object"==typeof n&&(n.locale&&"string"==typeof n.locale&&(t.webchat.currentLocale=n.locale),n.unavailable&&"boolean"==typeof n.unavailable&&(t.webchat.isUnavailableOnStart=n.unavailable));try{sessionStorage.setItem("__threadsWidget",JSON.stringify(t.webchat))}catch(e){window.__threadsWidget=JSON.stringify(t.webchat)}var e;t.filename?((e=document.createElement("script")).type="text/javascript",e.async=!0,e.src=t.filename,(t=document.getElementsByTagName("script")[0])?t.parentNode.insertBefore(e,t):document.body.appendChild(e)):console.error("Invalid bundle")}function s(){t("GET",e+"?rnd="+Math.random(),function(e){const t=JSON.parse(e);o(t)})}"complete"===document.readyState?s():window.addEventListener("DOMContentLoaded",s,!1)}("settings.json",{});
   </script>
   <!-- {/literal} END CHAT -->

2. Connect the configuration file by specifying the path to settings.json at the very end of the initialization script:

   ...}("settings.json");

3. Make sure to set the absolute path to the settings file from the root of your site as the value of this parameter. For example, ("/your/path/to/settings.json")

4. Save the changes and publish them on your website

The following is an example of the file directory:

10. Open the page on your website.

11. If everything is configured correctly, a button to open the chat will appear in the lower right corner of the browser window. When you click it, the chat start window loads.

Once the widget is embedded, make sure that all settings have been made correctly by conducting a few simple, basic tests:

• Sign in the agent WP and switch to the Active status (your account manager will share the agent credentials with you).
• Send a message from the chat widget. In the agent WP, you will see the message as one of the threads in the queue.
• Respond to the message in the agent WP. You will see the response in the chat widget.
• Try to send several messages this way (for example, messages with attachments). Make sure that once the message is read by the recipient, two checkmarks indicating that the message was read are displayed next to the message in the sender's chat. This indicates that the read statuses work properly.

If there are issues with sending and/or receiving messages, please make sure it configured correctly.

If you have any questions about the details of the setup process, you can always contact our implementation engineers at support@edna.io or contact your account manager.