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

Hello there! ChatPlus is a wonderful tool to increase inquiries, increase customer satisfaction and decrease support cost. You can install ChatPlus to mostly all sites, however, if you do not set it wisely, you could lose its effect. When you hear about ChatPlus for the first time, you might think [Why is it so cheap but has so many functions?]. ChatPlus was a simple tool at first, however, with many companies collaborating with us, it is now the chat service with the most numerous functions in the world. On the other hand, for first time users, it might have too many functions and cannot be used completely, so they might end the trial which is very sad for us. That's why ChatPlus decided to guide you through 7 steps of know-how when installing and using our service. Let's see first How to customize the chat design as your favorite.

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

With ChatPlus, you can customize theme, color, and text freely. To change themes, please proceed as follows. (1) Login to the management screen. Management screen:https://app.chatplus.jp/login/

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

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

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

(5) Click your favorite theme from the pull down of [Theme]. There are 4 themes: Basic, Mini, App, and Modern.

To increase chat effects, please select App or Modern theme. The number of inquiries would change about 30%-40%. It will improve the chat attractivity and make the customer want to use it.  It will facilitate the sales process, solve automatically customer issues and decrease cases in support center.

The characteristics of each themes are shown below.

Basic theme

Basic theme can be used in any plan of ChatPlus. It is a very basic design so it will not increase inquiries as much as App theme or Modern theme. *Basic theme can be used in any plan (and the only theme of Minimum plan).

Mini theme

Mini theme minimizes the chat window. It can be used from Business Lite plan. It would not increase inquiries as much as App and Modern theme do. The area to display selections and long sentences will be limited, however, it is suitable for stylish homepage because it only takes small space. *Mini theme can be used from Business Lite plan.
*It cannot be used with 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. AppTheme ※App theme can be used above Business Light Plan.
※It cannot be used in Minimum Plan.

Modern theme

Modern theme has a speech bubble stylish design. It can be used from Business Lite plan. It would increase inquiries about 10% compared to App theme. You can use animations and CSS. *Modern theme can be used from Business Lite plan.
*It cannot be used with Minimum plan.

Easy right?

Now we will set the colors of the chat window.

You can choose what color you want to use based on your homepage colors or which color suits the most. With ChatPlus, you can set all the colors freely. For the design, you can ask a designer or refer  color sample site or color pallet.【color-sample】 https://www.color-sample.com/ 【color hunt】 http://colorhunt.co/

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

(5) Click [Update].

Easy right?  You can also check the design on the demo site DemoPage:https://app.chatplus.jp/admin/cp/demo.

We will now explain the detailed settings for the chat design. Detailed settings can be used from Business plan. ①You can edit the agent icon size (only for App and Modern theme)
②You can choose the color for each element of the chat
③You can edit the height of the chat (in % or px)

With ChatPlus, you can make the chat window half transparent. Choose the color and click the transparency rate on the right.

④You can edit the chat location for PC and mobile and float the window.
⑤You can set the text size of messages, selections and input field. You can also edit the character font and the background image.
⑥You can edit the display settings for mobile version.
⑦You can access to more detailed settings.

By clicking [Display options], you can use an option to mute notification sounds. 

Change the eye-catcher to original image

Let's change the eye-catcher which is the window to the chat. In ChatPlus, 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 displayed at the bottom right of the page.
When the visitor clicks the eye-catcher of the home page, he can start chatting easily.

(1) Login to the management screen. Management screen:https://app.chatplus.jp/login/

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

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

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

(5) Click [Stand-by] tab.

  (6) Check the box [Use the eye-catcher] and click [Edit]. *You can set for PC and smartphone. If you don't want to use the eye -catcher, uncheck the box.

  (7) Choose the eye-catcher you want to use and click [Update]. *You can also upload your own image by clicking [Choose a file] at the bottom of the screen.

About images used as the eye-catcher.
Eye-catchers are very important to attract the customer to the chat window. (Some people consider it's more important than the design of the chat.) There are many cases where the eye-catcher has basically the same color as the site. Also, the eye-catcher can be compatible depending on the content of the service and the purpose of setting up a chat. On overseas product sales sites, there are also sites that flicker the eye catcher on the screen or guide customers to chat with the aim of inducing them to chat as much as possible and converting them. The eye-catcher on the Japanese site is basically in the lower right corner so as not to get in the way.

Speech bubble icon

SpeechBubbleIcon Speech bubble icon would heighten usability. The eye-catcher is useful for people using chat, but for people who don't use 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 the most convenient. The characteristics are listed below. 1.It would not disturb so the users would look at the content carefully. 2.It gives users cutting-edge  and calm image. 3.You can receive the chat from people who really need to ask you something. 4.It is suitable for [Flat Design] as it is a Web trend now. 5.It is displayed as icon, so it is accessible and understandable to users in many languages. 6.It is mostly used with the chatbot with all automated method, FAQ and BtoB.

Operator icon

OperatorIconOperator icon would give users a 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 use the chat and increase customer satisfaction and conversion rate, it is the most recommended. The characteristics of operator's icon is listed below. 1.It stands out, increase inquiries. 2.It looks friendly and it would give to users the image that the service is going to give full support with live chat operation. 3.It is suitable for utilizing chat and increase customer satisfaction and conversion. 4.It is suitable for EC site, or other bustling designs. 5.It is mostly used in live chat operation services and hybrid method.

Original icon

If your service's brand image is high or use a famous character, you can set the image to put it as eye-catcher. It would also increase customer satisfaction just by putting that eye-catcher on the homepage if the brand image and service quality is high. The characteristics of an original icon are listed below. 1.If it is branded, it would increase customer satisfaction. 2.It would increase your company's affinity. 3.It would still increase customer satisfaction even with full-operated support.

You can preview the chat on the demo page.

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

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

(3) Choose the type of site.

(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
・Choose the chat theme according to your service
・Change colors 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 the number of inquiries and customer satisfaction. If you customize the eye-catcher, click rate would be higher. 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 ChatPlus

If you have questions or doubt on how to set the chat, ChatPlus staff will support you though chats, phone calls, visit at office or emails. We also conduct seminars and individual consulting to set up your chat. Please feel free to contact us!


  • このエントリーをはてなブックマークに追加