Live Chat Designer [v4.9.1]

For versions:4.9.1

Click ‘Download’ button to show summary or download as PDF for offline viewing.

Live Chat Designer

At 3Dolphins, we know how important it is to maintain the awareness of your brand among customers. That’s why 3Dolphins presents a live chat designer menu. Live chat designer allows you to customize and design the live chat widget’s or even enable or disable some features looks without using any CSS/JavaScript.

To begin, login as ‘Supervisor‘ or ‘Administrator‘, for the 3Dolphins SRM login mechanism, do the steps described on the ‘Login‘ page.

Go to integration menu and click the live chat designer menus, then you will see a live chat designer page and here you will a list of the live chat widgets that have been created, as shown below.

New Design

You can customize and design a livechat widget as needed. With just a few easy steps, you can not only change the looks of your chat window but also enable or disable member mode, campaign, voice and speech and many more. And all of that without using any additional CSS or JavaScript configuration! So, without further due, let’s dive in and see how you can use the live chat designer to your advantage. Take a look at the Preview section located on the right side of the screen. You can see all changes reflected in real-time. 

  • To start customizing your live chat, at the top right click the ‘New Design‘ button.
  • You will see a form to design your live chat widget. First, type the name of the widget.

Style

You can set your livechat style, such as color theme, default avatar, agent avatar and icon of live chat widget. Within style in live chat designer, you can change the look and feel of the Chat Widget to match your branding that is relevant to you. You will see a preview of your changes on the right side of the page.

Field component explanation :

Field NameDescription
Color ThemeChoose a color theme of the chat widget you would like to customize.
Default AvatarThe rounded picture located on the header. Avatar’s value can be an url or a relative path pointed to the resource.
Agent AvatarThe default avatar that is displayed alongside every incoming message bubble.

Icon

Set your icon live chat that will appear in your website page. You can copy and paste the link image icon in the live chat designer.

Live Chat Connection

On the live chat designer, you can also connect the live chat widget that you created with the live chat channel that has been registered in the 3Dolphins omnichannel. All you have to do is enter the ‘url’, ‘channel key’ and ‘channel secret’ according to the livechat channel you chose. You can see the ‘url’, ‘channel key’ and ‘channel secret’ on the channel connector page.

On Boarding Form

Boarding form will appears if customer clicking icon of live chat on your website page. In a boarding form, you can configure ‘login label’, ‘on boarding message’, ‘connect button text’, etc.

Field compponent explanation :

Field NameDescription
Login LabelDescription that located below header on a chat window.
On Boarding MessageDescription that located on login form.
Connect Button TextA text displayed in connect button.
Name PlaceholderA placeholder located in text area where we type our name.
Email PlaceholderA placeholder located in text area where we type our email address.
Phone PlaceholderA placeholder located in text area where we type our phone number.

Livechat Label

The live chat label form will appear when the customer is connected to live chat. In the live chat label, you can configure the ‘chat title’, ‘welcome text’, ‘type placeholders’, and ‘chat label’.

Field component explanation :

Field NameDescription
Chat TitleDescriptions that located at the header of chatbox.
Welcome TextThe first message that automatically come out when the user first login.
Typing PlaceholderA placeholder located in text area where we type our message.
Chat LabelDescription that located below header on a chat window.

Messaging Settings

Here you can change the default messaging for your Live Chat Widget. Admins can use this to make sure messaging matches organizational branding and styles of communication.

Field NameDescription
Number Of MessagesNumber of message, in this field you can only enter numbers. ex : value
Quick Reply FlatBy default, quick reply in live chat 3Dolphins is enable. However, if you’d like to disable those quick reply, simply switch this option off.
Render Form Typerender form type, in this field you can only enter numbers. Ex : value
Guest NameAn auto login mechanism, no login form is required. When enabling this feature, the ‘Name’ value is automatically filled with ‘guestName’ value. As for the ‘Email’ and ‘Phone’ value are auto-generated
Max Upload MessageConfigure max. upload message.
Uploading TextA text for uploading.
Menu Trigger WordIt’s a property that automatically trigger a hidden outgoing message as soon as we successfully login. Usually it’s purpose is to trigger a bot to  reply us based on our hidden message.
Enable AttachmentThe livechat platform allows you to attach assets to messages, including audio, video, images, and files. Max attachment size is 2MB.
Enable HistoryConversation history of all of our livechat login session. In order for the chat history to be recorded and retrievable under the same user, the client must login the livechat with the same name and phone number for every session.
There is a configurable limit of how many message bubble is retrievable by client. The setting is at System Setting page under Ticket Configuration section, administrator role is required in order to access that page.

Member Mode

When this feature is enabled, before login, system will gives option to the customer’s to select member mode which is ‘member’ or ‘non member’.

Field component explanation :

Field NameDescription
Member Mode TitleSet the title of member mode for your Live Chat visitors prior to them selected option of member mode.
Option MemberSet the name of option member for your Live Chat visitors prior to them filling in the on boarding form.
Option Non MemberSet the name of option non member for your Live Chat visitors prior to them filling in the on boarding form.
Member Id PlaceholderA placeholder located in text area where we type our member Id.
Member Id Input Error MessageDisplay a custom message for some reasons failed.
Select Topic TitleText to selected topic.
Selection Topic MemberInput the topic to be asked by the customer’s (member).
Selection Topic Non MemberInput the topic to be asked by the customer’s (non member).
Select Topic Input Error MessageDisplay a custom message for some reasons failed.

Queue

By default, message from customer will incoming in a queueing if the Agents is not available or is not idle. In the live chat designer, you can configure queue text when the message incoming as a queue. The queue section is displayed at the very bottom of the chatbox and the number of queue is refreshed every 30 seconds. Number of queue left before being handled by an agent. However, if you’d like to disable those queue feature, simply switch this option off.

Error Message

Display a custom message when our field or widget for some reasons is failed.

Voice and Speech

By default, every message a customer receives in chat, system will automatically read incoming messages and convert them into sound. However, if you’d like to disable those voice and speech, simply switch this option off.

Campaign

A campaign is a set of configurations that define the style of your chat button. You need to firstly enable the campaign feature, you can customize the avatar, title, text and menu of your campaign live chat, you can add max. 4 menus of campaign.

Service Hour

Now is the time to set up your working days, you can on or off the service hours for your Live Chat. Set the active schedule to daily or holiday, to determine when to apply the service hours. Set the starting and ending times for your customer service availability, to meet your service schedule. When the service schedule ends, the message from the customer will enter as an offline message that is referred to the email.

Generate Script

After your design live chat is done, you can generate script to embed on index of live chat.

Then, the live chat widget that you have designed will appear on the designer live chat page. Here, you can edit widget, delete widget and view script from the widget, as shown below.

View Script Widget

Select design and click ‘View Script‘ button, then you will see a pop up of script to integration with your website page.

Remove Design

If you no longer need the specific live chat widget that you have designed, you can delete it by following these steps :

  • Select design and click ‘Delete Widget‘ button, then you will prompts to confirm the delete request, click ‘Yes‘ to proceed remove widget, or you can click ‘No‘ to return to the live chat designer page.
Was this article helpful?
Dislike 0