(1/7) Customize the chat design freely and install your favorite chat

Hello there! Chat Plus is a wonderful tool where you can increase inquiries, increase customer satisfaction and decrease support cost. You can install Chat Plus to mostly all the site, however, if you don't set it wisely, you could lose its effect. When you see Chat Plus for the first time, you might think [Why is it so cheap but has so many functions?]. Chat Plus was a simple tool at first, however, with many companies collaborating with us, it is now the chat service which has world-most function in the world. On the other hand, for first time users, it might be too many functions and cannot use it completely, so they might end the trial which is very sad for us. So Chat Plus decided to guide you through 7 steps of know-how of Chat Plus when installing for customers to utilize Chat Plus and think as [We are happy that we installed Chat Plus]. . First article is How to customize the chat design as your favorite design.

The chat design would directly related to customer's recognition, affects usability, and number of inquiries. Create your own chat design according to your service.

Set theme and color of the chat window

In Chat Plus, you can customize theme, color, and text freely. To change themes, please proceed like this below. (1) Login to the management screen. Management screen：https://app.chatplus.jp/login/

(2) Click on the setting button on the upper right of the management page.

(3) Click on [Chat] on the left side of the screen.

(4) Click on [Chat]>[Design]>[Template].

(5) Click on your favorite theme from the pull down [Choose theme]. The template theme has 4 types, Basic, Mini, App, and Modern.

To increase its effect, please select App or Modern theme. Number of inquiries would change about 30%-40%. It will be a standard to spread acknowledgement of the chat and make customers utilize it, in order to acquire conversion with inside sales, solve their own problems with FAQ to decrease cases in support center and help desk.

The characteristics of each themes are shown below.

Basic theme

Basic theme can be used in any plan in Chat Plus. It gives your customers the hard image of the company, however, it is out of date design so it would not increase inquiries as much as App theme or Modern theme. ※Basic theme can be used in any plan. (The Minimum Plan can only use Basic theme)

Mini theme

Mini theme can chat with customers in a small area. It can be used above Business Light Plan. It would not increase inquiries as much as App and Modern theme do. The area to display choices and long sentences will be limited, however, it is suitable for stylish home page because it only takes small space to the chat. ※Mini theme can be used above Business Light Plan.
※It cannot be used in Minimum Plan.

App Theme

App theme can do chat with speech bubbles like the smartphone messenger app. It can be used above Business Light Plan. It would increase about 30% of inquiries compared to Basic and Mini themes. In the chatbot, it has functions that would only show above App theme, so if you want to use the chat window on your home page fully, we recommend you to utilize above App theme. ※App theme can be used above Business Light Plan.
※It cannot be used in Minimum Plan.

Modern Theme

Modern theme has speech bubble stylish plan. It can be used above Business Light Plan. It would increase about 10% more inquiries compared to App theme. You can utilize animations, and designate options, it is used the most using CSS. ※Modern theme can be used above Business Light Plan.
※It cannot be used in Minimum Plan.

How was it?

Now we set the colors of the chat window.

You can choose what color you want to use based on your home page colors and which color suits the most. In Chat Plus, you can set all the colors freely. About design, you can ask for designer or refer to color sample site or color pallet.【color-sample】 https://www.color-sample.com/ 【color hunt】 http://colorhunt.co/

(6) Click on the red box and choose color from the color chart.
　

(5) Click on [Update].

How was it? Did you change chat's themes and colors? You can check the design of the chat from DemoPage：https://app.chatplus.jp/admin/cp/demo.

When you decide on the base colors, we will explain about it in more detail. Detailed setting can be used above Business Plan. ①You can edit the icon to set at the top of the chat window in App theme (only in App theme) ②You can choose the operator's image from 4 sizes, small/medium/big/extra big. (Modern・App theme only) ③You can change the chat window's display color.

In Chat Plus, you can make the chat window half transparent. You can choose the color with color picker and click on the transparent rate on the right, you can set to make it transparent.

④You can designate the chat window's size (height) of Modern theme. ⑤You can set the display of mobile version. ※Mobile version can display the chat at the center so that customers can chat while looking at window. ※You can make the title bar bold. ⑥You can choose the position of the chat window at bottom left, bottom right. You can float the window also. ⑦You can choose the letter size of the choices from 4 sizes, small/medium/big/extra big. ※You can make it bold by option. ⑧You can choose the frame border from bold, thin, and none in except for modern theme. ※You can make the corner rounded as an option. ⑨You can hide [Close button], [Minimize button], [Option], [Title bar] of the chat window.

In Option, you can mute the notification sound or choose language. The function to hide the title bar can be used to heighten design when installing chat to smartphone app.

Change the eye-catcher to original image

Let's change the eye-catcher which is the window to the chat. In Chat Plus, you can change eye-catcher freely according to your service.

What is the eye-catcher?
the eye-catcher is an icon-like image to attract customers into chatting shown at the bottom right of the page.
When the user visited to a home page clicked on the eye-catcher, they can start chatting easily.

(1) Log into the management screen. Management screen：https://app.chatplus.jp/login/

(2) Click on the setting button on the upper right of the management page.

(3) Click on [Chat] from the left side of the screen.

　 (4) Click on [Chat]>[Menu] on the left side of the screen.

(5) Click on [Stand-by] tab.

　 (6) Check in the box on the left of [Use the eye-catcher] and click on [Change]. ※You can set for each PC and smartphone version. When you don't want to use the eye -catcher, leave the box empty.

　 (7) Choose the eye-catcher you want to use and click on [Register]. ※You can also upload your own image by clicking on [Browse] at the bottom of the screen.

About the images using in the eye-catcher.
The eye-catcher can be the window to start a chat for customers, so it is very important. (There are people who say this is more important than the design of the chat). About the color scheme, most people use the similar color of the site and the eye-catcher. It has its compatibility according to service's content and purpose to install the chat. For sales site to sell stuff from foreign countries, it would attract customers to the chat and heighten conversion rate, so they would put animation to the eye-catcher to attract customers to clicking it. In Japanese store cases, the many cases are the eye-catcher is just there at the bottom right of the screen not to disturb anything.

Speech bubble icon

Speech bubble icon would heighten usability. The eye-catcher is useful for people using chat, but for people not using the chat, it would damage usability. If you want to use the chat as just for a help and display it discretely, this speech bubble icon is mostly used. The characteristics are listed below. １．It would not disturb so the users would look at the content carefully. ２．It is calm and give users cutting-edge image. ３．You can receive the chat from people who really need to ask you something. ４．It is suitable for [Flat Design] as it is a Web trend now. ５．It is displayed as icon, so it is accessible and understandable to users in many languages. ６．It is mostly used with the chatbot with all automated method or FAQ or BtoB.

Operator icon

Operator Icon would give users the friendly image. The eye-catcher is a window to connect customers and service. If you use the person's face (especially female), the click rate will go up and increase number of inquiries. The icon using person's face largely would give users friendly image and increase inquiries. If you want to utilize the chat and increase customer satisfaction and conversion rate, most people uses the operator's icon. The characteristics of operator's icon is listed below. １．It stands out, increase inquiries. ２．It looks friendly and it would give users the image that service is going to give full support with manual operation. ３．It is suitable for utilizing chat and increase customer satisfaction and conversion. ４．It is suitable for EC site, or other bustling designs. ５．It is mostly used in manual operation services and hybrid method.

Original Icon

If your service's brand image is high or has character that is known for, you can set the image to put it as eye-catcher. It would also increase customer satisfaction just by putting that eye-catcher in the home page if the brand image and service quality is high. If you want to penetrate your logo or your character, you can use it as an eye-catcher. The characteristics of Original Icon is listed below. １．If it is branded, it would increase customer satisfaction. ２．It would increase your company's affinity. ３．It would still increase customer satisfaction even if it is operated as all automated.

You can preview the chat in the demo page.

After customizing the chat design, go check it in the demo page. (1) Click on the setting button on the upper right of the management page.

(2) Click on [Demo Page] on the left side of the screen.

(3) Choose either of the Demo Page.

(4) Check if the design is working.

Did you make your own chat design?

How was it? Were you able to make the chat design suitable for your site? Is the eye-catcher suitable to the design?

After reading this article, you would be able to ・know the chat theme and choose theme according to your service. ・change color of the chat as you want. ・know the characteristics of the eye-catcher and choose the eye-catcher according to your service. When you change the eye-catcher or the chat design, it would drastically change number of inquiries and customer satisfaction. If you customize the eye-catcher, click rate would be higher by multiple times. It would increase inquiries by over 30% if you use speech bubble style in [Modern theme] and [App theme]

Let's customize the chat design according to your service and lead your service to success!

Notice from Chat Plus

If you are thinking like [The chat seems attractive but I don't know whether it would work], Chat Plus offers services like chat and phone calls, visit, to support you. We also conduct seminars and individual consulting to set up your Chat Plus. Please feel free to contact us!