Skip to main content
Skip table of contents

Web Widget Admin Guide

Web Widget is developed by Expertflow under Expertflow CX as a sample implementation of the web channel. For deployment/hosting of web widget follow this Deployment Guide.

Customization of Web Widget

Customers can start the chat by using the web widget. Businesses can customize the widget as per their requirement.

The Web Widget can be embedded on the client site with GTM (Google Tag Manager) or without GTM. See the following section to learn how to embed the widget.

With Google Tag Manager

Customer Identification by using GA (Google Analytics)

When the web widget is deployed via Google Tag Manager, the customer is identified by a unique customer identifier (fetched from the browser cookie). The system fetches GA Unique ID from the browser cookie as a customer channel identifier. GA Unique ID can only be available if a Google Analytics account is integrated. To identify customers via Google Analytics, see Web Widget Deployment Guide => Customer Identification via GA.

Direct Embed in the Website:

Customer Identification by Channel Identifier

When the web widget is embedded within the customer website, the customer is normally identified by the customer channel identifier field created in unified-admin’s pre-chat form and this field contains the value of a cookie like Mautic (mtc_id), GA (_ga), or any other third party marketing tool. If and when the customer initiates the chat, this field gets populated with available cookie value and it remains the same until and unless the Cookie expires or is removed, the system will identify and link the chat with that conversation.

Create a Web Widget in Unified Admin

The Business administrators can create customized web widgets and that customization can be fetched in web widget applications using a unique Widget Identifier eg: “Web“. This identifier is case-sensitive.

The following configurations can be created in the unified-admin => web widget component as per their requirements:

Widget Identifier

Case Sensitive Identifier(not editable)

Widget Title

Title

Widget Subtitle

SubTitle

Pre Chat Form

Select Pre-Chat Form

Dynamic Form coming from Unified-admin’s form component.

Language

Select language for widget

Theme Color

Choose Theme Color

Enable Emoji

Enable/Disable Emoji

Enable File Transfer

Allows to transfer multimedia message

Enable Font Resize

Allows Chat Message Resizing

Enable Dynamic Link

Allows links clickable

Enable Download Chat Transcript

Allows customer to Download Chat Transcript

Enable Web-RTC

Enable Web-RTC and Fill the configuration to start Voice Calls

Note: Refer to the RTC Team for FS Configurations.

Enable Callback

Enable Callback with ECM and fill the following fields to schedule Callback Requests

Note: Currently callback is only supported with Expertflow’s ECM.

Enable Webhook Notification

Notification via Google Chat Webhook

Pre-Chat Form in Unified Admin

Business Administrators can create and customize the Dynamic Pre-chat form from unified-admin => Form Component to have their pre-chat form on the web widget.

Customer Identification in CX:

When it comes to identifying customers during the pre-chat process, there's a need to create a specific field in Unified Admin's Pre-Chat Form. The default choice for this is the 'Phone' field, serving as the Channel Customer Identifier. However, Business Administrators have the flexibility to customize this according to their needs.

To set up customer identifiers in CX for Web Chat,

  • Ensure you have at least one required field in the pre-chat form, such as 'Phone' or 'Email'.

  • When creating a new required field, like 'First Name', just input the label as 'First Name' in the Attribute Name.

  • The system will automatically generate an Attribute Key in lowercase, replacing spaces with underscores. For instance, the Attribute Key for 'First Name' will be 'first_name', and for 'Phone', it will be 'phone', and it is case-sensitive.

  • Use the auto-generated key of the chosen field as your customer identifier in the 'ef-customer-widget-configmap.yaml' file.

  • By default, the 'phone' key is defined in 'CHANNEL_IDENTIFIER' as the customer identifier in the 'ConfigMaps/ef-customer-widget-configmap.yaml' file, but you can easily replace it with your preferred choice.

image-20240104-105251.png

Below is the Screenshot for understanding:

image-20240104-091107.png

Customer Name in Conversation View

To ensure personalized interactions in the unified agent conversation view, it is mandatory to create a 'First Name' field for customer naming. The key for this field should be 'first_name', and it is case-sensitive.

While the 'First Name' is compulsory, other fields can be tailored based on business requirements.

For instance, the 'Last Name' field, with the key 'last_name' is optional. If provided, the customer's name in the conversation view will display both the first name and last name, creating a more comprehensive and personalized engagement.

  • First Name → first_name (Compulsory and Case Sensitive)

  • Last Name → last_name (Optional)

Below is the Screenshot for understanding:

image-20240104-085621.png

Below is the sample pre-chat form Screenshot for understanding:

image-20240104-091440.png

Once the pre-chat form is created just select that form from the web widget configuration setting to render it on the Web Widget.

image-20240104-092328.png

Pre-Chat form selected from web widget settings

Below is the actual Pre-chat form rendering on the web widget user interface:

image-20240104-092701.png

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.