This tutorial, as structured below, is designed to walk you through steps to begin using Comm100 Live Chat.
Setup and Installation
- 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.
- 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.
- 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.
- 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.
- Repeat the above steps to add your Live Chat button to other webpages as needed.
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
- Ensure that you’re stilled logged in to the Comm100 Live Chat Dashboard. Then, click Campaign on the menu to the left.
- Click the Chat Button link underneath the Campaign menu header. After the Chat Button page appears, select a setting in the Choose Button Position section. If you want to place your chat button in a different position, click Switch to Advanced Mode to set one per your needs.
- Click From Gallery in the Choose Button Image 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.
- 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.
- Click the Chat Window link underneath the Campaign menu header, and then pick a theme color for your chat window in the Choose Color section.
- Choose Banner Image and then set a banner for your chat window in the Choose Header section. Alternatively, click Agent Avatar & Company Logo if you want to show your agent avatar and company logo to your visitors during chatting.
- In the Message 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.
- 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.
- Enter custom text for your chat window in the Set Window Title field, and then configure additional options on the Chat Window page.
- Click Save Changes to finish customizing the chat window.
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
- Click the Get Online & Chat link on the left menu list to open the chat console (Comm100 Agent Console) and become available for chatting.
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.
- 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.
- 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.
- 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.
- 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).
- 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.
- 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.
Collaboration and Supervision
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.
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.
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.
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.
To control chat quality, you can click Monitor to supervise ongoing chats without being noticed by the chatting agents and visitors.
Tips: You can also enable the auto monitor function by clicking Settings and then Others. When you need to monitor all chats, using this feature will save you a lot of time from manually clicking Monitor.
Chat Console (Agent Console) Settings
Chat console settings are where you can set your preferences for monitoring, chatting, login and logout.
- Mouse over Settings and then click Chat Settings.
- 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.
- Set keyboard shortcut for Next Chat, Next Response and Search Canned Messages to quickly switch to another chat/response and locate a canned message.
- 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.
- Go to the Language tab and there you can set the direction of text showing in the agent side chat window.
- 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 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.
Note:To be able to use this feature, you first need to enable Auto Translation in the control panel.
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.
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.
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.
Besides the auto monitor function, in the Others tab, you can set your preference for login, away and logout.
- 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.
- 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.
- 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.
- 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.