Chat design


You can change chat theme and design.

Basic settings(Template)

Please find here how to change the chat design that your users will see.
With ChatPlus, you can freely set chat themes, colors, etc.
(1) Click the setting button on the upper right of the management page.


(2) Click [Chat]>[Design]>[Template] on the left side of the screen.


(3) In the section [Theme], click the theme you want to use.

■List of themes


(4) Choose the agent's image size
Choose the size you want from the pull down of [Agent's image size].
※Only available for App and Modern theme.


(5) Choose color
Look at the picture and choose the color corresponding to each box.


(6) Choose the chat height
Click either [In %] or [In px]
※If you want to designate it in %, write a number between 0 and 100 in the box.


(7) Display settings for mobile version
If you want to make the chat smaller for mobile version, check the box [Reduce the size on mobile].
※From Business plan, you can designate the % of the height for mobile smaller version.


(8) Location settings
In the section [Location], from the pull down, click the place where you want to put the chat. If you want to make the chat window float, check the box [Float the window].

■When not separated

■When separated

(9) Settings of the text size of choices

You can set the text size for choices that you set in [Chatbot].
From the pull down below, click the text size you want to set.
To make the text bold, check the box [Make the text bold] below.


(10) Click [Update].

Export/Import design

Export design

When you operate multiple sites and want to use the same chat design for all your sites, you can export and save the design.
(1) Click [Export design].


(2) The design will be downloaded in CSV file. 

Import design

When you operate multiple sites and want to use the same chat design for all your sites, you can also import the design.
(1) Click [Import design]. 


(2) Click [Select a file] and import the CSV file.


(3) Click [Send].

Detailed settings

With detailed settings, you can create a chat that better meets your needs.

※Detailed settings are available from Business Lite plan or higher plan. You cannot use them from Minimum plan.

If you click [Display detailed settings], you can customize the following points.


Detailed color settings

(1) Click [Display detailed settings].


(2) Select the color as you want for each following parts.
※If you check the box [Edit the frame color in offline mode], then you will also be able to choose the color when offline.


(3) Click [Update].

Detailed background settings

For further details, please refer to「【Add functions】Designate background picture

Detailed settings of chat window

(1) Click [Display detailed settings].


(2) Check boxes and fill the empty fields as you want.

※If you check [Display options], the options will be displayed in the visitor's chat window.
When the visitor clicks on [Option], he can set the notification sound.

(3) Click [Update].

Various settings (Menu)

Please find here how to change the settings of chat, eye catcher etc.

※You can use [Display detailed settings] in [Stand-by], [Online], [Offline], [Waiting], [Chatting], and [End] tabs from Business Lite plan.

Stand-by

What is the eye-catcher?
The eye-catcher is displayed on the bottom right of the site during business hours. Users who visited the site can send a chat to support center.

How to change the eye-catcher

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


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


(3) Click [Stand-by] tab.


(4) Check the box [Use the eye-catcher], and click [Edit].
※You can set it for both for PC and smartphone.

If you check the box [Skip stand-by screen], you can skip it and display directly the chat window. If you check the box [Delete the title bar], you can hide the title bar.

(5) Choose the eye-catcher that you want to use, and click [Save].
*Click [Select a file] below to use your own image as eye-catcher.

How to hide the chat in smartphone

(1) Leave the box [Use the eye-catcher] blank, and check the box [Delete the title bar].


(2) Click [Update].


(3) Confirm that the eye-catcher and the title bar are hidden in the preview screen.
 

Detailed settings

By using detailed settings, you can create a chat that better meets your needs.

*Detailed settings are available from Business Lite plan or higher plan. You cannot use them from Minimum plan.

If you click [Display detailed settings], you can customize the following parts.

Eye-catcher display , location and size

Please find here how to display the eye-catcher and its position for each PC and smartphone version.
(1) Click [Display detailed settings].

(2) Click and choose the eye-catcher display from the pull down.

(3) Enter numbers in the boxes below.
* Display position : the higher the value is, the farther the eye-catcher is from the lower right of the window.
* Size: If you let it blank, the default size will be set.

(4) Click [Update].

Online

Please find here how to set the design when displaying the chat to users when online.
(1) Click the setting button on the upper right of the management page.


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


(3) Click [Online] tab.


(4) Check the box according to your needs and write a message.
1:If you check these boxes, you can hide this screen when starting and resuming a chat.
2:Write down an automatic message for when a user starts a chat.
3:If you check this box, you can add questions/choices with the initial message.
4:If you check this box, the initial message will appear when resuming a chat.


(5) Write a message for each corresponding box.


(6) Check the following boxes according to your needs and click [Update].

Detailed settings

By using detailed settings, you can create a chat that better meets your needs.

*Detailed settings are available from Business Lite plan or higher plan. You cannot use them from Minimum plan.

If you click [Display detailed settings], you can customize the following parts.

How to set a message when resuming a chat

(1) Click [Display detailed settings].

(2) Check the boxes [Also display the initial message when resuming the chat] and [Use the initial message of the resumption of the chat].

(3) Write the initial message in the empty field below [Use the initial message when resuming the chat].
*If you check the box [Add a choice], you can add choices to the initial message.

How to set an initial message when offline

(1) Click [Display detailed settings].

(2) Check the boxes [Also display the initial message in offline mode] and [Use the initial message of offline mode].

(3) Write a message in the empty field below [Initial message when offline].
*If you check the box [Add a choice], you can add choices to the initial message.

*Settings of initial message can also be done from [Chat]>[Functions]>[Initial message]. *For further details, please refer to「 [Initial message setting method]

Offline

Please find here how to set the design when displaying the chat to users when offline.
(1) Click the setting button on the upper right of the management page.


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


(3) Click [Offline] tab.


(4) Write in each field according to your needs. 


(5) Write in each empty field and click [Update].
1:Name and email address are set by default and cannot be changed.
2:Click to delete the category.
3:Write the category name.
4:If you check this box you can designate it as a required content.
5:Choose the question type from the pull down.
  *Title, text, text area, radio button, check box, and drop-down list.
6:Click to add categories.

Detailed settings

By using detailed settings, you can create a chat that better meets your needs.

*Detailed settings are available from Business Lite plan or higher plan. You cannot use them from Minimum plan.

If you click [Display detailed settings], you can customize the following parts.

Offline form settings

(1) Click [Display detailed settings].


(2) In the empty box (in red), write [Leave a message] as button text.


(3) In the empty box (in red), write a text for when the user didn’t enter required elements.


(4) In the following fields, write messages when user successfully left a ticket, and for when user failed to leave a ticket.


(5) Click [Update].

When you do not want to receive a message by offline form

(1) Click [Display detailed settings].


(2) Check the box [Do not receive message] and click [Update] at the bottom of the screen.

Waiting

Please find here how to set what is displayed to the visitor when waiting.
(1) Click the setting button on the upper right of the management page.


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


(3) Click [Waiting] tab.


(4) Fill in each following element and click [Update].
1:If you check this box, if there is a queue while the page is loading, the chat window will not be displayed.
*The chat will display if the chat window is open before waiting in line and if the visitor is waiting in line before the chat starts.
2:Enter a title
3:Enter explanation

Detailed settings

By using detailed settings, you can create a chat that better meets your needs.

*Detailed settings are available from Business Lite plan or higher plan. You cannot use them from Minimum plan.

If you click [Display detailed settings], you can customize the following parts.

Set the limit number of people waiting

(1) Click [Display detailed settings].

(2) Check the box [Set up the maximum capacity of the queue], enter a number, and click [Update].

Detailed settings when using [Manual method] for the chat queue

Manual method: method in which the agent selects customers in order and starts chatting

(1) Click [Display detailed settings].

(2) Check the box [Define the display content of the manual method], enter content as you want and click [Update].

For further details, please refer to [Chat queue]

Chatting

Please find here how to set what is displayed to the visitor during chat.
(1) Click the setting button on the upper right of the management page.


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


(3) Click [Chatting] tab.


(4) Fill the empty fields as you want. 
1:Enter title
2:Enter phone number
3:Check boxes

*If Basic theme was chosen from [Chat]>[Design]>[Template], it will display [Register logo] in here. By checking the box [Show logo] and clicking [Register logo], you can choose a logo and register it.

(5) Click [Update].

Detailed settings

By using detailed settings, you can create a chat that better meets your needs.

*Detailed settings are available from Business Lite plan or higher plan. You cannot use them from Minimum plan.

If you click [Display detailed settings], you can customize the following parts.

Settings of the text guidance and sending button

(1) Click [Display detailed settings].


(2) Within the following boxes, write down text guidance and text of the sending button.


(3) Click [Update].

Settings for operating only with the chatbot

(1) Click [Display detailed settings].


(2) Check the box [Do not display message input field] and click [Update].

*If you want to operate with the chatbot only during non-business hours, you can uncheck the box [Do not display message input field], and check the box [Do not display in offline mode only].

End

Please find here how to set and display the design of the chat to users when they are ending a chat.
(1) Click the setting button on the upper right of the management page.


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


(3) Click [End] tab.


(4) Write down the title when ending a chat.


(5) End confirmation window.

End a chat without confirming If you check the box [End chat without confirmation], the users will not see the confirmation window when they click [×]. Show [Do not display the chat for a while] If you check the box [Do not display the chat for a while], the user can check the box [Do not display the chat for a while] so the chat will not display for a certain amount of time.


(6) Next window after ending the chat
Skip end screen If you check the box [Skip end screen], the end screen will not be shown.

Display feedback If you check the box [Display feedback], the feedback page will be shown.


(7) Chat screen after the end
Do not display the eye-catcher after the end of the chat If you check the box [Do not display the eye-catcher after the end of the chat], the eye-catcher will not be shown on the page after ending a chat. Shrinkage at the end of the chat If you check this box, the chat window will be in a smallest form right after the user clicked [Yes](end the chat).


(8) Click [Update]. 

Detailed settings

By using detailed settings, you can create a chat that better meets your needs.

*Detailed settings are available from Business Lite plan or higher plan. You cannot use them from Minimum plan.

If you click [Display detailed settings], you can customize the following parts.

Detailed settings for hiding the chat window for a certain amount of time

You can set a message displayed when the user is checking the box [Do not display the chat for a while].
(1) Click [Display detailed settings].


(2) Check either [End confirmation window] or [Pop-up].
*Write down the number for [Hide the chat for □ minutes].

Display examples

End confirmation window

Pop-up


(3) Click [Update].

Settings to display the survey after ending a chat

You can display a survey to users after ending a chat.
(1) Click [Display detailed settings].


(2) Check the box [Display the survey].


(3) Write in empty fields and check boxes as you want.
1:Enter title.
2:Choose question type from the pull down.
   *Text, text area, radio button, check box, and select box.
3:Check this box to make the content required.
4:Check this box to add choices in the survey.
5:Check this box to add more questions in the survey.


(4) Click [Update].


(5) Confirm on the demo page.

Settings to display [Resume the chat]

(1) Click [Display detailed settings].


(2) Uncheck the box [Do not display "Resume the chat"].

*If you check this box, when users want to return to the chat, “Resume the chat” will not be displayed. Therefore they won’t be able to restart chat as long as they reload the page.

(3) Click [Update].


(4) When the user revisits the chat after ending it, “Resume the chat” will display.
*If the user clicked “Resume the chat”, the user can restart the chat.

Settings of chat ending page design

(1) Click [Display detailed settings].


(2) Fill the following empty fields as you want.


(3) Click [Update].

Notification

Notification sound can be set in each side, from the user and the agent.

Settings of notification sound (User)

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


(2) Click [Chat]>[Design]>[Notification sound].


(3) Click the notification sound from each [When starting a chat] and [When receiving a chat] pull downs.
*Click [Play] button to hear the selected sound.
*If you select [None] in the pull down, you can mute the notification sound.


(4) Click [Update].

Settings of notification sound (Agents)

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


(2) Click [Agents].


(3) Click [Edit] next to the agent that you want to edit the notification sound.


(4) Click [Detailed settings].


(5) Choose notification sound from each pull down.
1:Click [Play] button and to hear the selected sound.
2:If you select [None] in the pull down, you can mute the notification sound.
3:If you check the box below, no notification sound will be heard except for the site you operate.


(6) Click [Update].

シェアする

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

フォローする