Displaying Different Chat Buttons for PC/Mobile Sites

Chat Button Display Settings Overview link

Chat buttons can be configured differently for PC sites and mobile sites. This explains methods for achieving device-optimized display.

LiveAgent Chat Button Display Settings link

Mobile Environment Appearance Settings link

In “Settings” - “Chat” - “Chat Buttons” - (click the relevant button name) “Online Button” page, you can customize the display for mobile environments.

Display Size Adjustment Examples link

• “No change”
• “Scale down”
• Text portion only display

Design Customization link

• Use of original images
• Adjustable to match site design
  • Design
  • Display method
  • Position
  • Size

Method for Displaying Different Buttons on PC/Mobile Sites link

Implementation Steps link

1. Set up buttons in LiveAgent

   • PC chat button
   • Mobile chat button

2. Paste source code into website

Display Control with CSS link

Settings for Smartphone Size link

• Hide PC chat button
• Display mobile chat button

Settings for Tablet/PC Size link

• Display PC chat button
• Hide mobile chat button

Implementation Code Examples link

Class Specification in HTML link

<div class="livechat_pc">
  <!-- PC chat button source code -->
</div>

<div class="livechat_mobile">
  <!-- Mobile chat button source code -->
</div>

Display Control with CSS link

@media only screen and (max-width: 679px) {
  .livechat_pc { display: none; }
  .livechat_mobile { display: block; }
}

@media only screen and (min-width: 679px) {
  .livechat_pc { display: block; }
  .livechat_mobile { display: none; }
}