[User Guide] Getting Started with Comm100 Live Chat

May 25th, 2018 | Setup & Getting Started

Comm100 Live Chat is hosted by Comm100. We take care of all the hardware, software, backup and maintenance work on the server side to simplify your IT infrastructure, so that you can have more time to spend on running your business.

It is easy for you to get started with Comm100 Live Chat. All you need to do is logging into your account to get the live chat code, and then paste the code onto your website.

After that, a chat button appears on your website and you can chat with website visitors in the Agent Console window.

Quick Video Guide to Get Started:


This tutorial, as structured below, is designed to walk you through steps to begin using Comm100 Live Chat.

Setup and Installation

  1. Log into your Comm100 Live Chat system after you create the free trial account, and the Dashboard page will appear. Click the Get Code button beneath the Step 1/2 icon on the dashboard screen.
  2. Get Live Chat Code
  3. After you click the Get Code button, a pop-up window will appear. Click inside the code box to select and copy the live chat code.
    Copy Live Chat Code
  4. Launch a Web file manager or editing utility, and then open the page on which you want to place the live chat button to display the HTML code.
    Launch Web File Manager
  5. Paste the live chat code to the line just before the </body> tag. That’ it; the Comm100 Live Chat code is now installed on your website. If you view the webpage in a browser, you should see the Comm100 Live Chat button in the bottom-right corner of the window.
    Paste Live Chat Code
  6. Repeat the above steps to add your Live Chat button to other webpages as needed.
  7. Tips: The above process works with standard HTML sites. If you have a WordPress, Joomla!, or other CMS, specialty or non-standard website, you can find installation instructions for your site by clicking HERE!

Customizing and Getting Ready to Chat

With Comm100 live chat, it’s easy to match the appearance of your overall website or brand. The two things we’re interested in customizing are the Chat Button (the live chat before it’s opened) and the Chat Window (the live chat after it’s opened).

  1. Ensure that you’re still logged in to the Comm100 Live Chat Dashboard. Then, click Campaign on the menu to the left.
  2. Click Customization
  3. Click the Chat Button link underneath the Campaign menu header. After the Chat Button page appears, you can find that we offer three types of chat buttons: Adaptive, Image Button and Text Link.
  4. Adaptive chat button has interactive animations, and adjusts automatically in size and layout to fit mobile screens. You don’t need to customize chat buttons for mobile devices to achieve optimized presence. You can customize the color of the adaptive button to match your company color scheme.

    Adaptive Chat Button

    For Image chat button, you can choose the Position from pre-defined ones. If you want to place your chat button in a different position, click Switch to Advanced Mode to set one per your needs.

    Choose Button Position

    Click From Gallery in the Desktop View section to select an image for your chat button. Alternatively, click From My Computer if you want to use your logo or another custom image.

    Choose Button Image

    In the Mobile View section, you can click Customize to set up the mobile chat button with Text type or Image type (the chat button that visitors will see when they access your website from mobile devices), and then click Save Changes.

    Mobile View Chat Button

    Text Link displays plain text which your customers can click on to activate a live chat session. This is a minimal design which has no customization options except for the text content.

  5. Click the Chat Window Tab underneath the Campaign menu and then pick a theme color for your chat window in the Choose Color section.
  6. Choose Color Theme
  7. You can add agent info in the Header section. If you want to add a banner image, Choose Banner Image and then set a banner for your chat window. Alternatively, click Agent Avatar & Company Logo if you want to show your agent avatar and company logo to your visitors during chatting.
  8. Choose Chat Window Header
  9. In the Style section, choose one style for your chat messages. If you want to use your own custom style, click Customize Style with Your Own CSS. Read our tutorial to learn typical examples about how you can define your CSS code to achieve various customization requirements.
  10. Choose Message Style
  11. Determine if you want to use an embedded chat window (the default setting) or a pop-up window. If you want to use a pop-up chat window, click the Switch link to change to the pop-up window.
  12. Change Window Type
  13. Enter custom text for your chat window in the Set Window Title field, and then configure additional options on the Chat Window page.
  14. Set Window Title and Options
  15. Click Save Changes to finish customizing the chat window.
  16. Tips: On the right side of the page, you can see the preview of your chat window, helping you quickly get how the customizations change the look of your chat window.

    Note: There are more customization options you can configure for your live chat, including Invitation, Pre-Chat Survey, Offline Messages Window, Post-Chat Survey, Agent Wrap-up, Language and other features.

Start Accepting Chat Requests

  1. Click the Get Online & Chat link on the left menu list to open the chat console (Comm100 Agent Console) and become available for chatting.
    Click Get Online and Chat
  2. Tips: The Chat Console (Comm100 Live Chat Agent Console) is where you can monitor your on-site visitors, answer visitors’ chat requests, and collaborate with other agents.
  3. Wait a few seconds for the chat console to load and open in a new browser window. There, in the Visitors tab, you can see all visitors on your website implemented with Comm100 Live Chat code.
    Visitor List
  4. Click on the Details link of a selected visitor and you’ll see his/her detailed information, including Location, Where From, Current Browsing, History, etc.
    View Details
  5. Open your website that contains the live chat code and click on your chat button to initiate a chat request. In the meanwhile, you’ll see a visitor waiting for chat in the My Chats tab of the chat console. To answer the chat, click Accept.
    Initiate Chat Request
  6. When the chat gets started, on the visitor side, you’ll see a message, reading the agent has joined the chat. You (Visitor) can now type and send chat messages (by pressing the Enter key, or clicking send icon).
    Chat Accepted
  7. After you send a message on the visitor side, the message will appear in the chat console window. You (Agent) can then respond by typing a message and pressing Enter or clicking Send.
    Respond to Visitor Messages
  8. During or after the chat session, you (Agent) can categorize and add notes to each chat in the Wrap-up panel so as to easily manage and retrieve a certain type of chats for reviewing, training and other purposes.
    Agent Wrap-up Information

Collaboration and Supervision

Join Chat

Sometimes new hires need extra hands with a complicated case. In such cases, you can click Join to jump into the chats and offer help. This usually happens when a chat requires multiple agents’ input or management involvement.

Join Chat

Note: In one chat, no more than 4 agents are allowed to be involved at the same time. Thus, you cannot join the chat when there are already 4 agents in the chat at the same time.

Transfer Chat

When a visitor asks a question that is out of the scope of your department, you can transfer the chat to another agent or department by clicking the Transfer icon in the tool bar.

Transfer Chat
Chat with Other Agents

In the Agents tab, you can see all your agents’ status and send messages to them. For example, you can ask an experienced agent for suggestion when you run into an unfamiliar case.

Chat with Other Agents
Monitor Chat

To control chat quality, you can click Monitor to supervise ongoing chats without being noticed by the chatting agents and visitors.

Monitor Chat
Tips: You can also enable the auto monitor function by clicking Preference > Live Chat and then Others. When you need to monitor all chats, using this feature will save you a lot of time from manually clicking Monitor.
Auto Monitor

Chat Console (Agent Console) Settings

Chat console settings are where you can set your preferences for monitoring, chatting, login and logout.

Chat Settings
  1. Move the Mouse pointer over to Preference and then click Live Chat.
    Click Chat Settings
  2. Choose either to press Enter or press Ctrl + Enter to send chat messages. When one is selected for sending, the other will be for forcing a line break.
    Choose Keyboard Shortcut for Send
  3. Set keyboard shortcut for Next Chat, Next Response and Search Canned Messages to quickly switch to another chat/response and locate a canned message.
    Choose Keyboard Shortcuts
  4. Check Automatically send a pre-defined message after a chat request is accepted and the system will automatically send a greeting message to your visitor once the chat gets started. You can edit the wording and insert macros to make a more personalized greeting.
    Auto Send Chat Greeting Message
  1. Go to the Language tab and there you can set the direction of text showing in the agent side chat window.
    Choose Text Direction
  2. Enable Spell Check and choose the language you speak. Once any typo or spelling mistake is detected, a red wavy line will show under the word. You can right click on the word and choose a correct word to use.
    Enable Spell Check
  3. Enable Auto Translation and select a target language. The system will then automatically detect chat messages from a visitor who speaks a different language, and translate the messages to the targeted language in real time on both the agent and visitor side.
    Enable Auto Chat Translation

    Note:To be able to use this feature, you first need to enable Auto Translation in the control panel.

    Auto Translation
Sound & Popup

Go to the Sound & Popup tab, and you can enable/disable sound and popup alerts for different live chat scenarios, including New Visitor, Incoming Chat, New Response, Chat Ended, Chat Transferred, Agent Message and Exception.

Sound and Popup Settings
Column Settings

In the Columns tab, you can select which columns to hide/display in the Visitors tab in your chat console, as well as adjusting their display order.

Column Settings

Tips: You can also adjust the column display order by dragging and dropping directly in the Visitors tab of your chat console.

And to adjust the width of a column, please position the mouse over a column line till the cursor becomes a double arrow. Click and drag the mouse to increase or decrease the width, then release the mouse when you are satisfied.

Other Settings

Besides the auto monitor function, in the Others tab, you can set your preference for Away.

Other Settings

In the General option, you can set your preference for Auto login, and Logout.

Other Settings
  1. Check Automatically login with last login information if you want to save time entering email and password every time, so that once you open the chat console, you’ll be automatically logged in.
  2. Check Auto Away (only available in the Desktop app) and specify the time period if you want the system to automatically change your status to Away when no mouse or keyboard input is detected.
  3. CheckAuto Logout (only available in the Desktop app) and specify the time period if you want the system to automatically log you out from the chat console when no mouse or keyboard input is detected.
  4. Choose whether you want to exit or minimize your chat console to system tray when you cross out the chat console (only available in the Desktop app).


And, there you have it. That’s all there is to getting started with Comm100 Live Chat. Of course, there are many more settings that you can configure to unlock the true potential of our application. Nevertheless, as you can see, configuring the basics and using Live Chat is quick and easy.

To learn more about advance settings and features available in Comm100 Live Chat, review our knowledge base and features sections. Also, don’t forget to check out our Desktop and Mobile apps, you can use them to unlock even more features and make your live chat even more efficient.

If you have any questions, don’t hesitate to chat with our online support team. We look forward to hearing from you and wish you the best with all of your live chat and support endeavors.