Comm100 Chat Button is fully customizable. For mobile-optimized websites which are specifically designed for use on mobile devices, you can customize the chat button for optimal effects.
Comm100 supports three types of chat buttons, which differ in visual effects and provide varying customizations:
- Adaptive Chat Button: An icon type chat button which has mouse-over animations on desktop websites. The icon applies to both desktop and mobile websites. You can customize its position for desktop view and mobile view separately.
- Image Chat Button: An image chat button which can contain text overlay. The image chat button allows you to customize the image and position separately for desktop view and mobile view. You can choose an image from the gallery provided by Comm100 or upload your own image. If you want to use your own image, you need to upload both online button and offline button images.
- Text Link Chat Button: A text link button that works for both mobile and desktop websites. The position of a text link chat button depends on where you place the Live Chat installation code in your website code.
This article guides you to choose an image type chat button for your mobile-optimized website.
Note:
- To learn more about the differences among the three types of chat buttons, see this article.
- To learn more about how you can customize your chat button, see this article.
Step by Step Instructions
To customize the chat button for a mobile-optimized website, follow these steps:
- Log in to your Comm100 account.
- From the left navigation menu, go to Live Chat > Campaign > Chat Button.Note: If you are using multiple campaigns, make sure to select the correct campaign from the drop-down list.
- On the Chat Button page, choose Image type, and verify that the Float the image button over the webpage toggle is turned on.Note: Float the image button over the webpage is enabled by default. If you disable the floating option, a static image button appears on your website. The position of a static chat button depends on where you place the Live Chat installation code in your website code. It can disappear when visitors scroll up or down the webpage.
- In the Desktop View section, choose the image and set the position for the chat button. You can choose an image from the gallery provided by Comm100 or upload your own image.
- In the Mobile View section, choose the Text or Image type.
- For the Text type chat button, input the Online Text and Offline Text to show when your team is online or offline, and choose the Background color. If you leave the online text and offline text fields empty, the chat button will be hidden on your mobile website.
- For the Image type chat button, upload both the online image and offline image for the button, and choose the position for it.
- For the Text type chat button, input the Online Text and Offline Text to show when your team is online or offline, and choose the Background color. If you leave the online text and offline text fields empty, the chat button will be hidden on your mobile website.
- (Optional) To hide your chat button when your team is offline or on some of your webpages, expand the Advanced menu, and complete your settings according to your requirements.
- To hide your chat button when none of your agents is online, select the Hide chat button when my team is offline checkbox.
- To show your chat button on some of the webpages that are implemented with Live Chat code, select the Display chat button on specified domains or URLs only checkbox and input the URL list.
- Click Save.
