a guide to live chat guide to live chat...through all the features and tabs. in any case, if you...

A Guide to

Live Chat Customization

TECHNIQUES How to setup a perfect chat widget

Chatwee

Customization techniques

Contents

About the Customize section in Control

Panel

Exploring Customize Tabs

General

Messages

Welcome Cloud

Colors & Fonts

Privacy

Integration

Moderators

Ban List

Additional Notes

Chatwee


About the Customize

section in Control Panel

So, you have the Chatwee chat widget installed on your website for the first time and you have probably noticed that the chat window is operating on default settings. Dark panels, orange icons, inner white background and so on…

Most likely, the appearance of the chat does not fit too well with the

layout and color of your page. It seems it would be good to adjust this

and that.

Luckily, there is a number of settings available in Control Panel, that

will allow you to make the chat match the design of your site perfectly.

Chatwee


Where can I find all these settings?

All the usual settings and adjustments can be made in the Customize

section. It is easily accessible from the main menu in Control Panel.

See the screenshot below.

The Customize section is available from the main navigation

Chatwee


Browsing the Customize section, you will soon find that your options

are endless.

The entire section is divided into tabs, referring to specific areas you

might want to change. You will see the following tabs available :

General, Messages, Welcome Cloud, Colors & Fonts, Privacy,

Moderators and Ban List.

The General tab contains a bunch of key chat settings such as chat

name, mode, its position on a page and chat window dimensions.

The Messages tab pertains to your future chat content generated by

users and the way it will be presented in the chat window, such as text

messages, shared files and media, links, etc.

The Colors & Fonts tab relates to general skin customization. You can

pick one of dozens of skins available or create your own, selecting the

perfectly matching color scheme to fit your website even better. It is

also possible to choose a font family and text size.

The upper part of the Privacy tab allows you to manage authorization

methods that chat users will use on a regular basis to log in to your

widget. You can also set various permissions for actions performed by

the users, depending on their selected method of log in. For instance,

you can switch the chat off only for guests.

Chatwee


The lower section deals with security matters. For instance, you can

set a profanity filter against prohibited vocabulary and make swear

words and spam disappear from your chat window.

The Moderation tab is a place to appoint and manage all moderator

roles.

The Ban List tab contains a list of all the banned users. You can

manage the list by adding or removing troublesome users, utilizing

their IPs.

We believe you will not have to use this powerful tool, but it has been

added anyway, just in case.

Now, let us take a closer look at all these options and features, and

discuss in detail what they are about. Keep on reading to learn the best

practices and become an expert chat admin.

Chatwee


Exploring Customize

Tabs

Now that we have the basics covered, it is time to dive into specifics of the various customization options available.

While customizing your chat widget, you obviously do not have to go through all the features and tabs. In any case, if you will happen to be unsure about the result of a change you want to make in a particular tab, please refer to this guide, as it provides detailed explanations in the part that follows.

Chatwee


General

Chat name

Chat name is always shown at the top of the chat window. If you don't want to have the chat name displayed, leave the field blank.

Status

In this section, you can turn the chat on your website on or off. Should the need arise, uncheck the box labeled Enable Chatwee to make the chat window disappear immediately.

It is convenient and safe, because you do not have to remove the installation code from your HTML markup or uninstall the Chatwee plugin from the CMS you are using.

The Status section also lets you decide whether the chat is displayed, depending on screen resolution. Thus, unchecking Enable Chatwee on mobile devices will disable the chat on screens where the width is less than 1024px.

With the Force proper viewport on mobile devices option enabled, Chatwee will appear in responsive design on mobile devices.

Chatwee


Technically, this feature dynamically adds proper viewport meta tag. Please note, that it may automatically zoom the content of an entire HTML page on mobile devices.

If you are not a developer, you can learn more about viewport meta tag at https://developers.google.com/speed/docs/insights/ConfigureViewport before making any changes.

General tab

https://developers.google.com/speed/docs/insights/ConfigureViewport

Chatwee


Embed as

This one is a real game changer. As you may know, Chatwee is available in two versions, depending on its location on a webpage.

The chat window is inserted into a fixed spot by default. This means that it is displayed as a tab, always attached to the bottom of the page.

Every time you scroll the page down or up, the chat window follows the flow. The way it is embedded makes it separate from page content and always visible.

Fixed Tab setup

Chatwee


ContainerId

Every chat box needs to be hooked to a specific container. Most frequently, it will be a <div>, a <section> or any other HTML block level element (http://www.w3schools.com/html/html_blocks.asp). When the page loads, Chatwee identifies the proper container by its id attribute and links with it.

ContainerId is an id attribute of a <div> tag displayed in the chatbox code described in the next paragraph. ContainerId has a default value, however, it can be changed in accordance with a proper naming convention.

It is crucial to realize that every time a ContainerId change occurs, its new value automatically replaces the old one in the chatbox code.

Chatbox code

This additional code snippet has to be pasted directly into your HTML markup, exactly where you want the chat box to appear. When your page loads, the script inserts Chatwee into the container specified by the chatbox code.

Size

The last thing in the basic setup of the Chatwee chat box is specifying the desired dimensions. You can do this in two different ways.

http://www.w3schools.com/html/html_blocks.asp

Chatwee


First, you can choose to define the chat box dimensions manually. From

the dropdown menu labeled Size, select define manually and enter

your desired height and width values. When the chat box loads, these

values will determine its dimensions by feeding the inline CSS height

and width properties directly into the chat box (and not into its

container).

By choosing the adjust to container option, you determine the chat box

dimensions according to its container. This means you have to set the

height and width styles for your container directly in the CSS file,

however, it also creates some additional opportunities.

While defining the height and width manually in Chatwee Control

Panel, make sure you enter the values in pixels. The second option

gives you the opportunity to set these values in percent or any other

units available in CSS. For instance, you can set the width value to

100%, which can come in handy if you want to entice proper responsive

behavior.

Hence, the second option seems to provide more flexibility. It is

recommended for advanced users and developers who have access to

the complete code.

Chatwee


Chat Box setup

User list

With this feature enabled, the chat window will contain a box that lists the users who are currently online. Each chat user can hide/show the user list in the chat window by clicking on the show/hide user list button located on the top bar of the chat.

Please note, that disabling the user list completely makes it impossible for an individual chat user to show/hide the list.

Chatwee


User list visibility

When the user list is enabled, you can still decide whether to show it or not, by default, for each new user. Thus, if the user list visibility is disabled, all users are able to turn it on their own, regardless.

Pop-out chat window

Pop-out chat is a supplementary way for the chat window to be displayed, in addition to the other two modes described above: embedded and fixed. When enabled, chat window will contain a pop-out button which opens the chat in a new browser window upon clicking on it. The pop-out button is located on the bottom bar of the chat.

The default pop-out chat window sizes can also be specified by entering appropriate width and height values.

Language

Chatwee is available in more than 33 languages including: English, Spanish, Chinese, Arabic, Persian, Kurdish, Hebrew, Bengali, Telugu, Turkish, Portuguese, Russian, German, French, Danish, Finnish, Polish, Czech, Hungarian, Slovenian, Slovak, Thai, Dutch, Italian, Korean, Greek, Swedish, Norwegian, Hindi, Serbian, Croatian, Japanese, Romanian and Vietnamese.

Although new translations are added regularly, we suggest you inquire about any missing language versions at: https://www.chatwee.com/social-chat-software/contact.

https://www.chatwee.com/social-chat-software/contact

Chatwee


User list, pop-out and language setup

Chatwee


Messages

Public chat input

This option allows you to set the input field text, such as 'Say something...' or 'Type here...', to encourage greater involvement among your visitors. This setting applies only to the public chat input field, not to the private one. The private chat input field will be covered later in this section.

For instance, if you are running a live Q&A session, you can invite people to ask questions with a simple "Ask a question..." prompt.

Sound

You can turn off the chat sounds completely and hide the sound icon. However, by disabling sounds, you make it impossible for users to enable them in the chat window. When left enabled, people can decide whether to turn the sounds on or off at any given time.

New message notification

Enabling this option will make the browser tab blink every time a user receives a new message. It is very useful to receive alerts while browsing the Web in other tabs. This way you will not miss anything.

Chatwee


Private chatting

Private chatting is one of the core features available at Chatwee since the very beginning, and has been undergoing various changes and improvements.

Although private conversations are switched on by default, they can be disabled at any time if necessary, simply by unchecking this option.

Messages tab

Chatwee


Separate vs. compact private chat windows

Using the Facebook or Gmail chat apps on a daily basis, we have grown accustomed to chatting in small separate windows placed next to each other at the bottom of the page.

Chatwee too provides you with an opportunity to test its modern take on chatting, where all the private chat windows are piled up on top of each other. Access to individual conversations is made possible at the top of the page by clicking on particular user avatars or, if you are holding many conversations at the same time, swiping the list left and right. This type of private windows can be enabled by unchecking the Enable private conversations in separate windows option.

Separate private windows are enabled by default.

Private chat input

Private chat input field text, e.g. 'Type message and press enter...'. This option works in exactly the same way as the aforementioned public chat input field.

Spell check

Spell checker highlights words in the chat input field, that may be spelled incorrectly. Enabling spell checker will save you and your users

Chatwee


time and make your chat look more professional and cleaner by getting rid of typos, misspellings and other mistakes.

Smileys

Decide whether you want to enable a rich set of emojis to enhance the communication and bring more emotions to the interaction. In addition to classic smileys, Chatwee provides animated emojis that bring life to text chats.

File sharing

If enabled, all chat users will be allowed to share files in the public space and private chats as well. The size of a single file cannot exceed 3 MB.

Message style

This option lets you choose between different styles of displaying messages in the chat.

Simple

Select this mode if you prefer classic style and simplicity. Messages are not inserted into speech bubbles, which allows for message rating, showing dates and other additional elements.

Chatwee


Bubbles

This option makes your messages stand out and look trendy. The content of messages is inserted into colorful speech bubbles resembling those known from Facebook Messenger. The background color of a speech bubble can be set in the Colors and Fonts tab.

Text-only

This IRC- or shoutbox-like message style is the most modest of all three. It is recommended when the frequency of posted messages reaches tens per minute. Due to its simplicity, a message styled this way does not take up unnecessary space, which allows for more messages to be displayed on the screen.

Text-only messages allow you to use smaller avatars, however, the message rating feature and dates are not shown.

Avatars

If enabled, all messages appear with user avatars.

Chatwee users (regular members, who signed in using their email address) can upload and edit their custom avatars at any time.

Facebook, Twitter and Google users are automatically assigned avatars extracted from their corresponding social media profiles.

Chatwee


Single Sign-on users can also have avatars assigned via Chatwee API, using the avatar parameter, which is of a String type and contains a URL of an external image.

Only guests users cannot have personal avatars, instead, there is a default avatar image displayed next to their names.

Avatar shape

Avatars can be of the following shapes: square, rounded or circular. These shape names refer to the CSS3 border-radius property, which can have the following corresponding values: 0px, 3px and 50%.

Image preview

When enabled, this cool feature allows for auto-previewing in the chat window of an external image that was posted by you or another user. All popular image formats are supported.

Moreover, the width of a displayed image always fits the chat window and the image can be opened in a new browser tab to show its original size.

Video preview

This option allows for automatic preview of posted videos hosted at the following video services: YouTube, Vimeo, Vine and Dailymotion.

Chatwee


Like the Image preview feature, video preview adds another layer of interactivity to the chat and can be used in dozens of ways to boost user engagement on a daily basis.

Message rating

When enabled, messages of all kinds are enhanced with a simple and effective voting system for all users to rate them simply by clicking on the thumbs up or down icons. It is a proven and effective method of generating additional involvement during live events and real-time discussions bursting with comments.

Message settings

Chatwee


Welcome Cloud

Welcome Cloud is a beautifully designed bubble with a welcoming message, prompting the user to enter the chat room. When enabled, it always appears right after a visitor enters the site.

Entry button

You can compose your own message and include a Call to Action (CTA) on the Welcome Cloud’s entry button.

Encourage your visitors by putting an inviting slogan on the entry button saying, for instance, 'Have some questions? Click here'.

Welcome Cloud

The essence of this feature is, of course, a chat bubble displayed above the entry button.

Please note, that this setting is available only in the Tab mode, when the chat is displayed as a floating bar. It means that Welcome Cloud is unavailable in the Chat Box mode. You can compose your own welcoming message to encourage visitors to enter the chat room as described below.

Chatwee


Title

The Welcome Cloud bubble is comprised of the title and the message section. The title font is bolded and allows for up to 150 characters. It is advised to create an encouraging and eye-catching title to drive interaction and curiosity.

Message

Beneath the title you should also provide some additional information for your guests. This is another excellent opportunity to enchant visitors and increase engagement. Some of the site owners use it to describe the topics discussed in their chats, post their latest announcements or even list the most important principles prevailing in their chat rooms.

Chatwee


Welcome Cloud tab

Chatwee


Colors & Fonts

Template

If there was no way to customize the appearance of the chat it would not make much sense, as you want to make it fit your page well in terms of colors, texts and backgrounds, as well as typefaces and font sizes.

That is why Chatwee has paid a lot of attention to designing over 50 templates for you to use without limitations. Each of the templates can undergo further customization, so that you can create even more versions for richer experience.

What is important is that many of these ready-to-use templates have been tagged as ‘flat’. This means that during the design process, only flat color pallets have been used. Flat color pallets are considered to be the most popular and valued in modern design trends.

The Chatwee team has tried to maintain consistency, and thus, in most cases, a single color picker has been applied to the entire group of elements which, thanks to sticking to a uniform color scheme, further emphasizes the cohesion and helps to maintain a consistent style of the entire chat window.

Chatwee


Described below are all the color pickers available, which have been used to color particular chat elements that together create a single color scheme.

Colors & Fonts tab

Primary color

Background color of the top and bottom panels.

Secondary color

Chatwee


Add color to your chat widget name, icons, menu button when active. Works well when the secondary main color contrasts with the primary main color.

Border color

Border color of the top and bottom panels. Here, we suggest applying a primary color with increased darkness for best results.

Inner background color

The background color of the key chat window panels: user list, message container and avatar preview window.

Inner border color

The border color of the most important chat window panels: user list, message container and avatar preview window.

Secondary inner background color

Background color of the user list tab container, user preview information box and other inner elements.

Message field border color

The border color of the field for typing text messages.

Chatwee


Moderator’s badge color

The color of the special symbol indicating a user who is a moderator.

Chat bubbles

The background color of chat bubbles containing messages.

Tooltips

The background color of tooltips.

Scrollbar

The background color of all the scrollbars appearing throughout the chat window.

Titles color

The color of all the labels located on the top and bottom panels e.g. chat name, user counter, user name, etc.

Text color

The color of the message content of any type, including the names of users.

Chatwee


Colors scheme

Chatwee


Font family

The font family for all the text used in the design of the chat window, including labels, tooltips, user names, messages, etc.

Font size

The size of the text used mainly in the content flow of the chat window, e.g. user names in the user list or messages in the message panel, etc.

Transparency

By checking the Enable widget transparency option, you are making your chat window look semi-transparent. With this feature enabled, you are making it possible for users to observe both, the discussion in the chat and the content located directly underneath it on the page.

Chatwee


Privacy

Auto-start

With this feature enabled, the chat window opens automatically as soon as a user visits your website. This means that the welcome cloud message is skipped and the chat is turned on, ready to be used at once.

Just to be clear, this functionality does not automatically log the user in (there is another option for that described below) but it gives you instant access to all the panels and settings from the chat menu, so it is quicker and easier to run your chat session starting from there.

Authorization

This is one of the key and most extensively developed functionalities of our chat service. Chatwee gives you the opportunity to authorize users in six different ways: Chatwee, Facebook, Twitter, Google, Guest and Single Sign-on (SSO).

Chatwee


Authorization options available on Privacy tab

Displaying the chat in the SSO mode

If the Display chat only for logged-in users option is checked, chat window will be visible only when a user is logged in. When disabled, the chat window remains visible for unauthenticated users as well.

This functionality is available only for the Single Sign-on login method.

Chatwee


Guest names list

When enabled, your own guest names list will be used to automatically assign names to auto-logged Guests. Disable it if you want to let Chatwee assign guest names like 'Guest Johnny' automatically.

When the Set my own guest names list is checked, the additional button, labeled Edit user names list appears. When you click on the button, a text field containing current guest usernames appears ready for editing. For instance, you can replace the default guest names convention with numbers (e.g 001, 007, 057, etc.).

Guest posting

Leaving this option enabled allows Guests to post messages. When disabled, they may be able to log in but they are not allowed to chat.

This functionality is recommended for chats open to public, where most of the users are Guests and the opportunities for constant real-time moderation are limited.

Enabling chat history

With this option enabled, guests can view chat history with no limitations by clicking on the 'Show more messages' button available in the public chat space. When disabled, the button is not there, so guest users cannot browse the chat history.

Chatwee


Public chat posting

When checked, the public chat space is closed for posting and only moderators are able to send messages. Please note, that this option only applies to public chat room and not to private conversations.

Auto-login

Auto-login makes every new site visitor automatically logged in as a Guest.

This option is a powerful one because it makes your chat noticeable to all your websites visitors but it has to be used wisely. Suppose you have lots of daily visits to your website and many visitors are also registered as regular users on your site. Sometimes, to maintain consistency and privacy, you might not want to have any random people logged in to the chat automatically without proper authentication.

The decision whether to set the auto-login on also depends on the type of the site and the content that is being offered. It is definitely worth it to test both scenarios and see which one works best for you.

Auto-login minimized

When this functionality is enabled, even after the user has been automatically logged in, the chat window remains minimized and has to be opened manually in order to be used.

This feature creates distractionless environment and is particularly recommended for pages, whose users rarely use instant messaging, or the chat is only an additional tool in the background.

Chatwee


Flags

By enabling flags, you agree to display the geolocation information of the logged in users by showing their country flags next to their names on the user list.

If you hover your mouse over the flag, the tooltip with the corresponding name of the country will appear immediately.

Privacy settings

Chatwee


Profanity filter

This powerful tool should be enabled at all times for security and anti-spam reasons. Profanity filter ensures that all the major offensive words and phrases are always replaced by asterisks (*).

You can add or remove particular blacklisted words by clicking on the Edit blacklist keywords button. Please note, that adding (*) at the end or the beginning of a word prohibits any word with that string of characters from being used.

To boost safety and keep high standards, you can additionally check the Block profanity option. When enabled, users will be unable to send messages containing the prohibited vocabulary from your blacklist.

User name filter

Leave this option checked if you want to filter profanities or prevent other words (such as Admin, moderator, etc.) from being used as user names. This option in particular protects against fake self-proclaimed administrators and abusers.

Chatwee


Profanity and user name filters

Chatwee


Integration

This tab provides unique keys and settings for integrating Single Sign-on and Chatwee API. In other words, Chatwee API is a way to integrate your website with the Chatwee server.

Chatwee API supports both, HTTP and HTTPS requests. To integrate Chatwee with the website hosting session mechanism, two API calls have to be triggered: RemoteLogin and RemoteLogout. Every request is using the GET method to transmit the parameters. To learn how to integrate Single Sign-On, visit https://www.chatwee.com/single-sign-on and https://www.chatwee.com/chatwee-api.

Chatwee API is available for Chatwee accounts with active subscription. To get instant access, upgrade your account immediately or request a free trial at https://www.chatwee.com/social-chat-software/contact.

ChatId

Unique chat identification key assigned to a particular client. ChatId cannot be changed.

https://www.chatwee.com/single-sign-on

https://www.chatwee.com/single-sign-on

https://www.chatwee.com/chatwee-api

https://www.chatwee.com/social-chat-software/contact

Chatwee


Chatwee API Key

API key is required to make Chatwee API calls. Chatwee API Key is classified information such as your account password - do not show it to third parties.

Session Cookie Key

The name of the cookie key used to save the session under.

Integration tab

Chatwee


Moderators

Some of the Chatwee users may perform moderator roles. They can ban abusers, delete messages directly in the chat window in real-time, as well as use the chat while remaining invisible in the user list. In order to turn a regular Chatwee user into a moderator, you need to take a number of steps in the Moderators tab.

Moderator email

The process of adding a moderator is quite similar to appointing an administrator of a Facebook group or page. In order to do that, you need to type in a valid email address in the field labeled Moderator email. Please note, that the user, whose email address you enter, must already exist in the Chatwee database. This practically means that the user must have logged in to the chat app at least once before to become fully eligible.

Moderator user type

For the simple reason that Chatwee users may use several different login methods, and the same email address may be linked to multiple accounts like Google+ and Facebook, the user type has to be specified. The user type adheres directly to the authorization method, so you have to choose from Chatwee, Google and Facebook User options. Unfortunately, Twitter users cannot become moderators, partially due to Twitter's privacy policy.

Chatwee


All current moderators are listed at the bottom of the screen. You can easily remove moderators from the list at any time.

Moderators tab

Chatwee


Ban List

As a moderator, you are able to ban abusers right in the chat window.

However, if during your absence someone had been very mischievious,

you can also use the option of banning available in this section. The

Ban list allows you to manage your banned user list as well.

IP Address

As you can see on the screen below, all you have to do to ban a user is to provide his IP address and click on the Add this IP to Blacklist button.

Where do I get the IP address from? All your visitor IP addresses are stored in History section at https://www.chatwee.com/client/history, so it is easy to search for and trace abusers even if you have to dig deep into the history. You can use various filters and do your search by date, username and messages.

https://www.chatwee.com/client/history

Chatwee


Ban list tab

Chatwee


Additional Notes

About Cookies and cache

Sometimes it is necessary to clear the browser’s cache and cookies

related to Chatwee in order to see the latest changes you have made.

Chatwee saves all the major user settings like chat window size, mode

and preferred chat location in the browser using cookies. For instance,

if you have been using the chat window located on the right so far, and

now you would like to have it on the left, making a a change will only

be effective for new visitors. Due to the fact that the information on

your preferred view is stored in a cookie file, it is necessary to remove

it, before you can use the newly created default setting.

This is why you should clear your cache and cookies related to the

Chatwee widget to see the results of a new setting properly.

Another clever way to view new default settings is to open a page with

the chat in a new browser tab using the incognito mode, where cookies

and cache are not maintained between sessions.

Chatwee


Request a feature

Every day we receive suggestions and ideas on how to develop our live

chat software. We work tirelessly to add more and more features.

Each request sent by you, regarding a new functionality, is thoroughly

analyzed and taken into account during the planning process. Although

meeting every single expectation of our customers is simply impossible,

we offer the opportunity to obtain a feature on demand.

Every Chatwee client has the option to order a feature in the form of a

chat add-on/module. Since these are mostly quite demanding requests,

any such innovative solution can be considered only within the

Enterprise plan.

The implementation of such a module may take from several days to a

couple of weeks – depending on the complexity of the ordered feature.

Upvote and/or submit your own suggestions

Go to Chatwee’s suggestions page, where you can upvote a number of

already suggested functionalities. You can also access this page after

you log in to Dashboard and scroll to the very bottom of the home

screen, where it says UPVOTE SUGGESTIONS.

https://www.chatwee.com/client/suggestions

Chatwee


Suggestions page

a guide to live chat guide to live chat...through all the features and tabs. in any case, if you...

Documents