Change the design by setting up CSS

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

(2) Click [Chat]>[Design]>[Original CSS].

(3) In the empty field [Enter the CSS], enter codes to change the design and click [Update].

When adding new codes, do not delete the existing code and just add them to it.

Codes to change the design

Change the height of the chat window

*By changing the red numbers in the code, you can change the height of the chat window.

■Mini theme

#chatplusview.chatplusview-mini #outline #chatpluscontent #body #messages{height:330px;}

■Basic theme

#chatplusview.chatplusview-basic #outline #chatpluscontent #body #messages{height:330px;}

■App theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages, #chatplusview.chatplusview-app #outline #chatpluscontent #body.frame #messages {height:330px;}

■Modern theme

#chatplusview.chatplusview-modern{height:500px;}

Change the width of the chat (stand-by)

*By changing the red numbers in the code, you can change the width of the chat.

#chatplusview.chatplusview-basic.closed #outline,

#chatplusview.chatplusview-app.closed #outline,

#chatplusview.chatplusview-mini.closed #outline{

  position:absolute;

  right:0;

  bottom:0;

  width:200px;

}

Change the location of the chat window

*If you use this code, you can display the chat window on the left side of the screen.

#chatplusview{

  left:0px;

}

Change the height of the text area

*You can change the height of the text area where users type messages.
　By changing the red numbers, you can change the height of the text area.

#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper textarea,

#chatplusview.chatplusview-basic #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,

#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper textarea,

#chatplusview.chatplusview-app #outline #chatpluscontent #textarea #message-wrapper.has-operate textarea,

#chatplusview.chatplusview-mini #outline #chatpluscontent #textarea #message-wrapper textarea,

#chatplusview.chatplusview-modern #outline #chatpluscontent #textarea #message-wrapper textarea {

  height: 150px;

  max-height: 150px;

}

If you want to change the height of the text area for other than the Modern theme, uncheck the box [Input field on one line], from [Chat]>[Menu]>[Chatting].

Change the chat window icon

*By changing the red part in the Unicode, you can change the chat window icon.

Unicode for icons, please refer to this page: https://fontawesome.com/icons
(Go to the page with icons you want to use and copy the Unicode)

■Button to minimize the window

#chatplusheader .operate .button-close i::before {content: "f146";}

■Button to end the chat

#chatplusheader .operate .button-remove i::before {content: "f00d";}

■Smartphone version: button to display the full screen

#chatplusheader .operate .button-expand i::before {content: "f424";}

■Smartphone version: button to minimize the window

#chatplusheader .operate .button-compress i::before {content: "f422";}

Make the eye catcher transparent

#eye_catcher:hover {

opacity: 0.6;

}

Change font

*As an example, this code below shows how to change the font to [Yu Mincho].

#chatplusview div, #chatplusview span, #chatplusview applet,

#chatplusview object, #chatplusview iframe, #chatplusview h1,

#chatplusview h2, #chatplusview h3, #chatplusview h4, #chatplusview h5,

#chatplusview h6, #chatplusview p, #chatplusview blockquote,

#chatplusview pre, #chatplusview a, #chatplusview abbr, #chatplusview

acronym, #chatplusview address, #chatplusview big, #chatplusview cite,

#chatplusview code, #chatplusview del, #chatplusview dfn, #chatplusview

em, #chatplusview font, #chatplusview ins, #chatplusview kbd,

#chatplusview q, #chatplusview s, #chatplusview samp, #chatplusview

small, #chatplusview strike, #chatplusview strong, #chatplusview sub,

#chatplusview sup, #chatplusview tt, #chatplusview var, #chatplusview

dl, #chatplusview dt, #chatplusview dd, #chatplusview ol, #chatplusview

ul, #chatplusview li, #chatplusview fieldset, #chatplusview form,

#chatplusview label, #chatplusview legend, #chatplusview table,

#chatplusview caption, #chatplusview tbody, #chatplusview tfoot,

#chatplusview thead, #chatplusview tr, #chatplusview th, #chatplusview

td, #chatplusview input, #chatplusview textarea {font-family: "游明朝",

serif;}

For more information about how to change the font, please refer to [Use Google fonts within the chat window].

Change the font size of the message

*By changing the red numbers, you can change the font size.

■Mini theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

■Basic theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

■App theme

#chatplusview.chatplusview-app #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

■Modern theme

#chatplusview.chatplusview-modern #outline #chatpluscontent #body #messages

.msg .text {font-size: 14px;

For more information about adding animation to the eye-catcher, please refer to [Setting up animations to the eye-catcher with original CSS].