20
1
1
2
IntroductionIn this tutorial, we are going to walk you through installing Comm100 Live Chat on your website,customizing your live chat to get ready to chat, accepting chat requests, conducting teamcollaboration and chat supervision, and more. Follow the step-by-step instructions below to beginusing Comm100.
Setup and Installation
1. Log into your Comm100 Live Chat system after you create the free trial account, and theDashboard page will appear. Click the Get Code button beneath the Step 1/2 icon on thedashboard screen.
2. After you click the Get Code button, a pop-up window will appear. Click inside the code boxto select and copy the live chat code.
3
3. Launch a Web file manager or editing utility, and then open the page on which you want toplace the live chat button to display the HTML code.
4. Paste the live chat code to the line just before the </body> tag. That’ it! The Comm100 LiveChat code is now installed on your website. If you view the webpage in a browser, youshould see the Comm100 Live Chat button in the bottom-right corner of the window.
4
5. 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 havea WordPress, Joomla!, Shopify or other CMS, specialty or non-standard website, you can findinstallation instructions for your site by clicking HERE!
Customizing and Getting Ready to Chat
1. Ensure that you’re stilled logged in to the Comm100 Live Chat Dashboard. Then,click Campaign on the menu to the left.
2. Click the Chat Button link underneath the Campaignmenu header. After the ChatButton page appears, select a setting in the Choose Button Position section. If you want to
5
place your chat button in a different position, click Switch to Advanced Mode to set one peryour needs.
3. Click From Gallery in the Choose Button Image section to select an image for your chatbutton. Alternatively, click FromMy Computer if you want to use your logo or anothercustom image.
4. In the Options section, enable and customize responsive chat button (responsive chatbutton shows when visitors access your website frommobile devices), and then click SaveChanges.
6
5. Click the Chat Window link underneath the Campaignmenu header, and then pick a themecolor for your chat window in the Choose Color section.
6. Choose Banner Image and then set a banner for your chat window in the ChooseHeader section. Alternatively, click Agent Avatar & Company Logo if you want to show youragent avatar and company logo to your visitors during chatting.
7
7. In theMessage Style section, choose one style for your chat messages. If you want to useyour own custom style, click Customize Style with Your Own CSS. Read our tutorial to learntypical examples about how you can define your CSS code to achieve various customizationrequirements.
8. Determine if you want to use an embedded chat window (the default setting) or a pop-upwindow. If you want to use a pop-up chat window, click the Switch link to change to thepop-up window.
9. Enter custom text for your chat window in the Set Window Title field, and then configureadditional options on the Chat Window page.
8
10. 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 youquickly 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, AgentWrap-up, Language and other features.
9
Start Accepting Chat Requests
1. Click the Get Online & Chat link on the left menu list to open the Comm100 Agent Consoleand become available for chatting.
Tips: The Comm100 Live Chat Agent Console is where you can monitor your on-site visitors,answer visitors’ chat requests, and collaborate with other agents.
2. Wait a few seconds for the Agent Console to load and open in a new browser window.There, in the Visitors tab, you can see all visitors on your website implemented withComm100 Live Chat code.
3. 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.
10
4. Open your website that contains the live chat code and click on your chat button to initiatea chat request. In the meanwhile, you’ll see a visitor waiting for chat in theMy Chats tab ofthe Agent Console. To answer the chat, click Accept.
5. When the chat gets started, on the visitor side, you’ll see a message, reading the agent hasjoined the chat. You (Visitor) can now type and send chat messages (by pressingthe Enter key, or clicking Send).
11
6. After you send a message on the visitor side, the message will appear in the Agent Consolewindow. You (Agent) can then respond by typing a message and pressing Enter orclicking Send.
7. During or after the chat session, you (Agent) can categorize and add notes to each chat intheWrap-up panel so as to easily manage and retrieve a certain type of chats for reviewing,training and other purposes.
12
13
Collaboration and Supervision
Join Chat
Sometimes new hires need extra hands with a complicated case. In such cases, you can click Join tojump 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, youcannot 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 thechat 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, youcan ask an experienced agent for suggestion when you run into an unfamiliar case.
14
Monitor Chat
To control chat quality, you can clickMonitor to supervise ongoing chats without being noticed bythe chatting agents and visitors.
Tips: You can also enable the auto monitor function by clicking Settings and then Others. When youneed to monitor all chats, using this feature will save you a lot of time from manuallyclickingMonitor.
15
Agent Console SettingsAgent Console settings are where you can set your preferences for monitoring, chatting, login andlogout.
Chat Settings
1. Mouse over Settings and then click Chat Settings.
2. Choose either to press Enter or press Ctrl + Enter to send chat messages. When one isselected for sending, the other will be for forcing a line break.
16
3. Set keyboard shortcut for Next Chat, Next Response and Search Canned Messages toquickly switch to another chat/response and locate a canned message.
4. Check Automatically send a pre-defined message after a chat request is accepted and thesystem 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.
Language
1. Go to the Language tab and there you can set the direction of text showing in the agent sidechat window.
2. Enable Spell Check and choose the language you speak. Once any typo or spelling mistake isdetected, a red wavy line will show under the word. You can right click on the word andchoose a correct word to use.
17
3. Enable Auto Translation and select a target language. The system will then automaticallydetect chat messages from a visitor who speaks a different language, and translate themessages 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 controlpanel.
Sound & Popup
Go to the Sound & Popup tab, and you can enable/disable sound and popup alerts for different livechat scenarios, including New Visitor, Incoming Chat, New Response, Chat Ended, Chat Transferred,Agent Message and Exception.
18
Column Settings
In the Columns tab, you can select which columns to hide/display in the Visitors tab in your AgentConsole, as well as adjusting their display order.
Tips: You can also adjust the column display order by dragging and dropping directly in the Visitorstab of your Agent Console.
And to adjust the width of a column, please position the mouse over a column line till the cursorbecomes a double arrow. Click and drag the mouse to increase or decrease the width, then releasethe mouse when you are satisfied.
Other Settings
Besides the auto monitor function, in the Others tab, you can set your preference for login, awayand logout.
19
1. Check Automatically login with last login information if you want to save time enteringemail and password every time, so that once you open the Agent Console, you’ll beautomatically logged in.
2. Check Auto Away (only available in the Desktop app) and specify the time period if youwant the system to automatically change your status to Away when no mouse or keyboardinput is detected.
3. Check Auto Logout (only available in the Desktop app) and specify the time period if youwant the system to automatically log you out from the Agent Console when no mouse orkeyboard input is detected.
4. Choose whether you want to exit or minimize your Agent Console to system tray when youcross out the Agent Console (only available in the Desktop app).
ConclusionAnd, 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, reviewour knowledge base and features sections. Also, don’t forget to check outour Desktop and Mobile apps, you can use them to unlock even more features and make your livechat even more efficient.
If you have any questions, don’t hesitate to chat with our online support team. We look forward tohearing from you and wish you the best with all of your live chat and support endeavors.
20
About Comm100Comm100 is the global provider of live chat, email marketing and help desk software. With “100%communication, 100% success” as our motto, we are committed to making customercommunication simple and effective for you.
Comm100 Live Chat is an enterprise-grade live support solution that enables businesses ororganizations to engage their website visitors in real time so as to improve conversions, sales andcustomer satisfaction. Our clients include Farmer’s Insurance, Sears, Stanford University, Whirlpool,and many more.
More ResourcesTo find more resources about the live chat industry and more tips on improving customer service,you can:
Visit Comm100 official blog
Follow us on
Contact UsTEL | (778) 785-0464
FAX | (888) 837-2011
E-Mail | [email protected]
Web | www.comm100.com
Suite 238 – 1027 Davie Street Vancouver, British Columbia V6E 4L2 Canada
Copyright © 2016 Comm100. All Rights Reserved
Comm100, Comm100 Live Chat, MaximumOn and other Comm100 brand or product names are trademarks ofComm100 Network Corporation in Canada and other countries. All other trademarks or registered trademarks areproperty of their respective owners.
The information provided herein and opinions stated herein are not guaranteed or warranted to produce any particularresults, and may not be suitable for every individual.
