Skip to content

Web Chat

Web Chat Channel Configuration

Create Web Chat Channel

To carry out this procedure, the user needs to access the flow designer and right-click, where the option to configure the channel will be displayed. Next, select the "Add channel to developer" option, which will open the following window:

During this process, it is essential to define the configured waiting time to detect inactivity and close the interaction. In this case, the maximum limit is 7200 seconds (2 hours) (TIMEOUT_SECONDS). Additionally, choose the option to display historical conversations of the day in the widget (DIALOGUES_OF_THE_DAY).

Widget Designer (Web Chat Appearance)

The widget designer is a functionality that allows creating graphic design themes that adapt to the look & feel of the client's website.

Here several themes can be created and the default theme with which the widget will be presented to the client's website will be selected.

This designer will present several sections depending on the level of expertise in web design. It can be personalized at a general level, header, footer, button, chat, form and advanced where CSS can be used.

If you want to use the widget in a development environment, consult the section Sandbox.

Architecture

The channel is configured in the tenant diagram, from where you can go to the theme configuration, and finally, it is included on the client's page for deployment.

Themes

Themes are different designs in which the widget will be presented on the client's website. You can create as many themes as desired, and the theme that will be displayed is the one selected as the default.

You can give a name and description to identify the type of theme designed.

Configuration

General Appearance Section

Here, you can configure different elements of the widget's general design.

Header Section

Here, you can configure different elements of the widget's header design.

This section is optional and is configured in case there are frequently asked questions or security information

Button Section

In this section, you can configure the graphical elements of the button that will open the widget, whether it's presenting the form or presenting the chat with which the user will interact with Lynn, creating an interaction.

Chat Section

Here, you define the graphical elements that compose the chat in the widget, such as the bubbles for the bot or executive (left) and the bubbles for the client (right).

You can also configure the menus in a general manner, according to the executive's bubble configuration.

You can also adjust the text input box.

The bot's box will display the description, which is the name defined for the tenant.

Form Section

If the form is active, a form will be presented to the widget user where corresponding data will be requested:

Criterio: User identification value, such as ID, phone number, email, etc.

Identificación: It is the way the user will identify themselves to Lynn or the executive. Usually, it is the person's name.

You can also add all the necessary fields according to the client's needs.

The information sent through the form is considered as "User Data" or user interaction information.

Date and Time Components Section

In this section, adjustments can be made to the date and time components, such as changes in background color, font type, button design for accessing these properties, among others.

Remember Session Data Section

The "Remember Session Data" feature provides the ability to keep the session active while the user navigates between different pages, regardless of whether they remain on the same page or switch to another.

1. Features

  • End Session on Browser Close: Automatically closes the session when the browser tab is closed.
  • Activate: Allows remembering the session between pages within the client's site.
  • Encrypt Data: Encrypts session data in the browser's storage for enhanced security.

2. Storage Type

This feature enables storing session information either as cookies or in the browser's local storage.

3. Refresh Time (sec)

The duration for which the session or stored information remains active can be configured.

Events Section

1. When in Chat Conversation:

This field allows the user to solely view and access the chat typing area when interaction is requested by them. For example, the chat prompts for entering the Rut or name.

2. When Typing in the Text Box:

  • Show Character Counter: This field, when selected, displays the number of characters entered. To indicate the corresponding limit, it must be configured in the Maximum Message Length parameter, located in the text input box section within the chat.

  • Hide Send Button and Show When Typing: When selected, this field displays the message send button only when text is entered in the text box.

  • Hide File Send Button When Typing: When selected, this field displays the file send button only when no text is entered in the text box.

Download Transcription Section

This section enables a tab that allows the user to download the transcription of the conversation conducted within the chat. Here, the title, subtitle, button description, and check activation can be configured.

Advanced Section

In this section, direct adjustments to the widget css can be made. If the client has the support of a web designer, a stylesheet can be defined to overwrite the basic widget styles.

Tips

The design changes are not reflected on the widget.

You can put this link on the browser.

https://lynn-latam-production-br-ch-reg-t{IdApp}.azurewebsites.net/widget/refreshcss

The {IdApp} text must be replaced with the app identifier, as shown in the example below.

https://lynn-latam-production-br-ch-reg-t31.azurewebsites.net/widget/refreshcss

When this link is invoked the widget environment is cleared and design is loaded again from Lynn.

Include the widget on the client's website

To include the widget on the client's website in the production environment, a Javascript script is placed that will be responsible for loading all the elements necessary for the widget to work. Next is the script that should be included: 

    <script>
        (function (window, document, scriptTagName, globalName, scriptAddress, scriptElement, otherScriptElement) {
        window['ChatLynn-Widget'] = globalName;
        window[globalName] = window[globalName] || function () {
        (window[globalName].q = window[globalName].q || []).push(arguments);
        window[globalName].s = scriptAddress;
        };
        scriptElement = document.createElement(scriptTagName);
        otherScriptElement = document.getElementsByTagName(scriptTagName)[0];
        scriptElement.async = 1;
        scriptElement.src = scriptAddress;
        otherScriptElement.parentNode.insertBefore(scriptElement, otherScriptElement);
        })(window, document, 'script', 'mw', 'XXXXXX');
        mw('create', '', { }, {});
    </script>

The XXXXX must be replaced with the URL of the widget corresponding to your tenant. If it is necessary to pass parameters in the interaction such as additional data or not to open the form, you can use the following sentence at the end of the Script:

mw('create', '', { }, {});

mw(<1st parámetro>, <2nd parámetro>,<3rd parámetro> , <4th parámetro>)

1st parameter: reserved 2nd parameter: criterion variable 3rd parameter: userdata, for example, the user's RUT or department who is logged in on the client's page. 4th parameter: Additional configurations, for example, to display the executive's name, use "executiveName". This parameter will overwrite the executive's name.

Example:

mw('create', 'uid', {page_name: Consultas}, {executiveName:"Julio Pérez"});

Steps for Configuration - Public and Private Portal

  • Identify the tenant that does not have a theme assigned to the widget.
  • A default theme must be created. It is important to customize the widget's style to align with your brand image.

Note: To configure the client's own style, you can refer to our documentation in the Resource Center. Access through the following link: Widget Customization Guide. https://resources.lynn.cx/widget/widget/#widget-designerwidget-appearance

  • Including the Script on the Client's Page: It is necessary to include a specific script on the client's website to activate the widget. Please copy this code snippet onto your website.

Public Portal

The widget on the client's website can be used publicly; therefore, authentication data will be requested for access.

Script for Public Site

<script>
    (function (window, document, scriptTagName, globalName, scriptAddress, scriptElement, otherScriptElement) {
    window['ChatLynn-Widget'] = globalName;
    window[globalName] = window[globalName] || function () {
    (window[globalName].q = window[globalName].q || []).push(arguments);
    window[globalName].s = scriptAddress;
    };
    scriptElement = document.createElement(scriptTagName);
    otherScriptElement = document.getElementsByTagName(scriptTagName)[0];
    scriptElement.async = 1;
    scriptElement.src = scriptAddress;
    otherScriptElement.parentNode.insertBefore(scriptElement, otherScriptElement);
    })(window, document, 'script', 'mw', 'XXXXXX');
    mw('create', '', { }, {});
</script>

Private Portal

The widget on the client's website can be used privately; therefore, no authentication data will be requested, as it was provided by the user during registration on the private site.

Configuration Steps

<script>
    (function (window, document, scriptTagName, globalName, scriptAddress, scriptElement, otherScriptElement) {
    window['ChatLynn-Widget'] = globalName;
    window[globalName] = window[globalName] || function () {
    (window[globalName].q = window[globalName].q || []).push(arguments);
    window[globalName].s = scriptAddress;
    };
    scriptElement = document.createElement(scriptTagName);
    otherScriptElement = document.getElementsByTagName(scriptTagName)[0];
    scriptElement.async = 1;
    scriptElement.src = scriptAddress;
    otherScriptElement.parentNode.insertBefore(scriptElement, otherScriptElement);
    })(window, document, 'script', 'mw', 'XXXXXX');
    mw('create','rut',{rut:"39XXXX-XXXX",nombre:"Pedro",apellido:"Perez",tipo:"privado"},{ showform: false });
</script>