Free Live Chat & Chatbot Software

Chat with your website visitors in real time, increase sales and improve customer satisfaction. All for free, forever!

Sign Up Free

How to Add Live Chat to your Website (for free!)

Live chat has become one of the most popular customer service channels, so it comes as no surprise that there are many vendors to choose from. For most live chat buyers, set up and integration with your website should be an important part of the decision-making process. 

For some software, live chat website integration is straightforward and quick, while for others adding live chat to your website may be more complicated. And of course, while some solutions will be expensive to run, other live chat support is totally free – including Comm100 Live Chat.

To help you understand how to add live chat to your website for free, we have created this simple step-by-step guide that shows the most typical integration, while detailing the key features of the Comm100 Live Chat setup. 

Step 1: Paste your code

To add chat to your website for free, the first step is to copy your unique code provided by your vendor and paste it into the web pages where you would like your live chat to be available to your customers.  

If you have chosen Comm100 Live Chat, you can easily get the code yourself from the admin console and paste it before the HTML tag </body> in your website’s HTML files. Once you have done this, a chat button will appear on your site. You can preview what this will look like using our handy Preview option. 

How you add online chat to your website will differ slightly depending on the content management system or website builder you use. To help make this easier for you, here are step-by-step instructions for the key platforms: 

Step 2: Customize the chat widget

Once your live chat integration is complete, it’s time to customize the appearance of your live chat software to make sure it matches your website and brand. The level of customization varies from vendor to vendor — with Comm100, you can adjust both your chat button and the chat window to match your brand. 

Chat button 

Comm100 offers three types of chat buttons – Adaptive, Image Button and Text Link – for paid packages. (Only the Adaptive button, our most popular, is available within the free plan.) 

  • Adaptive 

This button has interactive animations and adjusts automatically in size and layout to fit mobile screens. You can also customize the color of the button to match your company color scheme. 

  • Image 

This button lets you select an image to use as your chat button. You can also choose the position of the button that works best for your website.  

  • Text Link 

The text link button 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 itself. 

Chat window 

The next step to fully integrate live chat to your site is to customize the chat window. With Comm100 you begin by choosing between an embedded chat window or a pop-up window so your visitors can navigate elsewhere while chatting. Customers of Comm100 can also choose a color for the chat window that matches your brand and website color theme, as well as customize the style from inbuilt options, or with your own CSS. 

The header of the chat window can also be customized with a banner image, agent avatar and company logo, or agent info to display to your visitors during the chat session. With Comm100 Live Chat, you can also adjust the body of the chat window by displaying an avatar alongside a message, as well as add text and picture fill for the background. 

You can preview what your chat button and chat window will look like using our handy Preview option. 

Step 3: Set up messaging

  • Pre-chat window 

The pre-chat window allows you to gather information from the visitor before the chat begins, helping to streamline conversations and save agents from asking repetitive questions. By collecting information about the nature of the query, chats can also be more accurately routed to the correct agent and department. A variety of input types are available within the Comm100 pre-chat window, from drop-down boxes to simple text fields. You can also set a greeting message to tell your visitor more about your company. 

  • Chat invitations 

With Comm100 you can set up manual and auto-invitations to proactively connect with your website visitors. Manual invitations allow agents to analyze visitor data collected from multiple channels inside the chat console and invite targeted visitors to chat with them. You can create customized invitations message tailored to each site visitor to create a personalized customer service experience. 

Auto-invitations are automated chat invites that can be sent to visitors based on certain rules and conditions including geography, behavior, source, and historical contact information. 

  • Offline message 

Offline messages allow visitors to leave a message if there are no agents online. You can set any email address for offline messages to be delivered to, as well as view them within the platform. 

  • Canned messages 

Canned Messages are pre-defined messages that can be sent to visitors so agents don’t have to re-type the same answer to frequently asked questions. In the Comm100 platform admins and agents with permissions can create public canned messages that are accessible to everyone, and agents can also create their own private ones. 

Step 4: Configure settings

The best live chat software will have a variety of tools and features that you can choose from to best support your customers. Here are some of the key features Comm100’s Live Chat offers in its Team, Business, and Enterprise editions that you should consider when setting up your live chat. 

  • Set uauto allocation and routing 

Auto allocation defines how chat volume is managed. With Comm100 Live Chat you can set the maximum number of chats agents can take and how they are distributed by a number of factors – load balancing, round robin, agent capability, last-chatted agent. This helps to reduce wait time and queue abandonment. You can also set up departments to make sure chats get routed to the correct teams and specific agents based on set rules and conditions. Click here to learn more about Routing Rules. 

  • Create visitor segments 

Visitor segmentation allows you to identify and categorize specific customers based on pre-defined rules. Agents can then see these visitor segments within the agent console in real-time. For example, you can create a visitor segment for VIP clients and have notifications sent to your VIP support team whenever a VIP client arrives on your website. 

  • Configure conversions 

The Comm100 console offers a conversion feature that links together live chat data with your onsite data, allowing you to view which chats and the detail of these chats that drive your visitors to convert. Click here to read more about this feature. 

  • Post-chat survey 

The Post-Chat Survey prompts visitors to rate their chat experiences, allowing you to collect qualitative or quantitative statistics on the effectiveness of your chat service. Answers can then be reported on in the Reports area of the control panel. You can read more about the Post Chat Survey here

  • Configure agent wrap-up 

Wrap-up is a feature that allows the agent to make notes on a chat. This allows for fuller chat histories to aid future conversations, as well as allowing for further reporting on chats. This is again configurable, allowing you to add whatever fields you need. 

Wrap-up

Adding online chat to your website for free shouldn’t be complicated, no matter the website builder you use. For more information on how to integrate Comm100 Live Chat to your site, read our step-by-step guide here. 

About Kate Rogerson

Kate is the Content Marketing Specialist at Comm100. She has extensive experience in content creation for technology companies across the world, including the UK, Australia and Canada. She specializes in B2B messaging, branding and soccer trivia.