Modern chat window customizations and functionality

<< Click to Display Table of Contents >>

  System Setup and Customization > Control Panel > Account customization > Visual customization > Modern chat window >

Modern chat window customizations and functionality

How to customize modern chat window

 

With Modern chat window you can customize its look and feel and preview updates at the same time with help of interactive customizations preview window. If the chat button code is added to your website, you can also preview updates there by adding your website URL to the "Preview on your website" field:

 

Live chat window updates preview

Live chat window updates preview

 

1.Pre-chat survey preview

2.Offline form preview

3.Chat window preview

 

Only appearance and window size settings are applicable to the pre-chat survey and offline form.

 

Chat window appearance customization

 

In the Appearance section you can:

 

choose the theme for your chat window

pick the color to match your website look and feel

enable chat window logo displaying

 

chat window appearance

Choosing your chat window appearance

 

1.Choose chat window theme. Three themes are available: weightless, colored and neon

2.Pick the color for your chat window background and border. You can pick the color to match your website look and feel

3.Enable this option if you would like to show your logo in your chat window. You can upload your logo or choose any from our gallery by clicking "Edit logo" link or on the Account Settings / Images page

4.You can edit your chat window logo if you enabled it: make an image bigger, smaller or crop

 

Chat logo editing

 

If you would like to show the logo in your chat window, you can upload it to your account. The ideal logo size should be the same as the width of your chat window with height 90 px. However, if the image you upload is bigger or smaller, you can edit it with help of built in images editor. Note! The quality will be decreased in this case. To presume the quality the image source file should be edited in special editor. The best way to have the chat window logo displaying right is to make it appropriate size in an images editor, e.g. Adobe Photoshop, CoralDraw or Paint and then upload to your account.

 

Chat window editing options

Chat window editing options

1.Upload your own image or drag and drop it to the editor. By default the image chosen or uploaded on the Account Settings / Images page will be displayed here

2.Click this link to select the chat window logo from our gallery

3.In this section you will see the ideal logo size for your chat window width. The white rectangle will show the area, where the logo will be displayed. You can adjust the logo image to fit the rectangle. You can reposition the image, crop or zoom

4.To reposition your logo you need to drag it to fit the rectangle area

5.You can use crop option to crop the image

6.With help of zooming you can make the image bigger, smaller or revert to the default size if you do not like changes

7.You can use this option to undo all changes and revert to the original image

8.Click 'Apply' button to save your updates

 

Chat icon customization

 

In the Chat Icon section you can:

 

specify chat icon shape - round or rectangular

pick chat button color

upload custom chat button images

specify chat button position on your website. Note! The chat button position can be specified only if you use chat button code with Javascript

define chat button behavior on mobile devices

 

 

Choosing chat button settings

Choosing chat button settings

 

 

1.Here you can see how the chat icons look on your website

2.Select the form of your chat icon - round or rectangular - or upload your own one

3.Pick the color for your chat icon to match your website look and feel

4.By following this link you will be able to select the set of chat icons from our gallery

5.In this section you can define the position of the chat button on your website. This option is applicable only if you use the chat button code with Javascript

6.You can select the chat button behavior on mobile devices: leave the chat button as is, make it smaller or completely hide. This option is applicable only if you use the chat button code with Javascript

 

To upload custom chat icons, please do the following:

 

1.Select "custom" option in the "Shape" section

2.Click "Upload custom chat icons" link

 

Uploading custom live chat icon

Uploading custom live chat icon

 

3.Either select files or grad and drop them

4.Save chat window updates

 

Chat window size

 

In the Size section you can:

 

define the size of your chat window

set it to open as a pop up window

 

Chat window size settings

Chat window size settings

 

1.You can specify here the size of your chat window, pre-chat survey and offline form in pixels. You need to adjust the size according to the number of fields you have on your pre-chat survey.

2.If you check the box "Open chat window as a pop-up" it will open in a pop up window. Please note! Messages counter which is available for embedded chat window will not work for the chat window in a pop up mode.

 

 

 

Chat window titles, texts and fonts

 

While customizing your chat window look and feel, you can select your language customization (in this case non customizable elements will be translated), update chat window titles, specify default visitor name and enlarge fonts:

 

Updating chat window texts

Updating chat window texts

 

 

 

1.Online chat title: this title appears in the top left corner of the embedded online chat window. If you enabled pop up chat window, this title will appear in your browser title bar

2.Offline chat title: this title appears in the top left corner of the embedded offline chat window. If you enabled pop up chat window, this title will appear in your browser title bar

3.Default visitor nickname: If you decided to skip your pre-chat survey or removed "Name" field from it, by default your visitors will have nickname "Guest1", "Guest2",......, "GuestN". However, you can specify here a different nickname if necessary

4.Font: You can choose here the font for your chat window texts

5.Enlarge font size: if the default font is too small for you and does not look good on your website chat window, you can enable this option to enlarge it

 

Chat Window Fonts

 

Besides fonts available in the list of fonts, it is possible to choose another Google Font, not available in the list.

 

1.For this you need to choose "Other Google font"

2.Enter font name exactly as it is displayed in Google Fonts

 

Choose Google font you prefer

 

 

Chat window features

 

In the "Features" section you can define the chat window features you can use in your chat window toolbar and chat window:

 

Chat window features

Chat window features

 

 

1.You can either allow transferring all files, only images or limit specific file types. File transfer allows limiting types of files being sent in chat:

 

oYou can transfer only image files

oYou can block unsafe file types such as executable files, archives and documents

 

 

The following error will appear if the file transfer limitation is set in the account

 

File transfer limitation

File transfer limitation

 

2.By allowing chat transcripts printing, you will let your customers print your chat conversation out directly from the chat window

3.With "Allow chat transcripts emailing" option your customers can email themselves their chat conversations

4."Allow switching off sound notifications" button will let your customers disable sound notifications on new messages in your chat window

5.Show a notification when operator is typing: this option will let your customers know that a live chat agent is in process of typing a message

6.Show timestamps in the chat text: with this option your visitors can see the time when a message was delivered to chat

7.Show "Powered by" label: "Powered by Provide Support" label appears in all free trial accounts. It can be removed only on active accounts by disabling "Show "Powered by" label" option

8.Show web links preview: by enabling this option, the preview for chat links sent in chat will be displayed in the chat window

 

Chat Window toolbar

 

Chat window toolbar options can be enabled / disabled on the Account Settings / Visitor Chat Messenger page. You can hide unnecessary icons in the Chat messenger functions section. On the following sceenshot you can see all chat window toolbar functions:

 

Chat window toolbar

Chat window toolbar

 

Please note!: An option to hide "Powered by" label is available only for active accounts. It is not available for free trial accounts.

 

Branding

 

There's no possibility to fully re-brand the system.

 

You can remove the "Powered by..." label at the bottom right corner of the chat window in your account chat window settings (only for active accounts). You can also upload images with your company logo to the header and chat invitation.

 

File transfer process

 

Images and video files sent in modern chat messenger can be previewed in chat window. If you send audio files, your customer can listen to them prior to downloading. Your customers can also paste files from the clipboard or drag and drop them:

 

Image file sending in modern chat messenger

Image file sending in modern chat messenger

 

While sending a video file a preview with a player is available, so that you could play your file prior to downloading it:

 

Video file sending in modern chat messenger

Video file sending in modern chat messenger

 

For audio files which you send your customers, a built into chat window audio player allows listening to them directly in chat:

 

Audio file sending in modern chat window

Audio file sending in modern chat window

 

Chat transcript sending

 

If you allow your customers to send themselves chat transcripts, they can do this by clicking an "envelope" icon :

 

Chat transcript sending by a visitor

Chat transcript sending by a visitor

 

Alternatively, a visitor can request a chat transcript while leaving a chat room, before submitting a post chat survey:

 

Request chat transcript while leaving chat room

Request chat transcript while leaving chat room