Full post originally published at Aviyel, do check it out.
As a business owner who has to interact with customers quite often, live chat support is the best plausible option. However, the results amplify if you integrate your support methods with applications frequently used by the customers- in this case, I am talking about Shopify, WordPress, and Webflow. But before we begin, it is important to know what is live chat and why is it important for businesses?
Live chat is a customer relations tool businesses use in interacting with their customers. It is a type of technical support usually added to a website or social account that enables companies and customers to interact in real-time.
Importance of Integrating a Live Chat To Your Website
Live chat offers so many benefits if utilized properly. Here are a few advantages of integrating a live chat into your website.
Low Cost for Support
Live chat offers so much value with little or no extra cost to a business. Integrating a live chat in your business is cheaper than setting up traditional call centers that require call agents to answer emails and calls.
Keeps the User Engaged on Your Website
While customers await replies to their messages, they can use this time to go through your website and see what you’re working on in your business. Make sure to put up interesting blogs, testimonials, or case studies on your website. This is helpful because the more visitors spend time on your website, the more Google Analytics recommends you. A very wonderful SEO benefit.
Better Customer Service
With the live chat feature on your website, support agents don’t need to worry about the language difference of customers. Answering multiple customers while keeping track of all their requests becomes a breeze here. This helps support agents stay on their game, and in situations customers experience similar issues, support agents can log these issues and refer to the solution easily to fix them even faster in the future.
Now you completely understand how much value live chat adds to your business, let’s learn about the tools you can use to add this live chat to your WordPress, Shopify, or Webflow websites.
Best Tools for Integrating Live Chat
If you Google live chat, you’ll notice that there are quite a large number of CRM tools you can use to integrate live chat into your website. CRM stands for customer relationship management, which shows the strategy, principles, or guidelines businesses use to organize and manage customers. I have listed down some of the top CRM tools that have caught my attention for a while:
- Chatwoot
- Zendesk
- Salesforce
- Pipedrive
- Insightly
- Hubspot
- Scoro
- Keap
- Freshdesk
I recently started using Chatwoot for customer engagement needs and would be using the tool today to integrate live chat support with other websites. Unlike other mentioned software for integrating a live chat, Chatwoot stands out as an open source non-proprietary solution with tons of tweakable features. You can read more about that here. If you are an open source enthusiast, you can also look forward to contribute to Chatwoot on GitHub.
Create your Chatwoot Account
To create an account, visit this link: https://chatwoot.com to get started. The registration is very straightforward. Create an account and then verify your email.
Add User Details
After creating an account, you’ll see a conversations dashboard. On the bottom left, click (Profile icon > Profile Settings) which will take you to an account settings page.
Under the account settings, fill in the boxes with your necessary details.
Add a profile photo and a display name. Once you’re done, hit Update Profile.
Now we’re done filling in our details, we can proceed to the next step.
Add an Inbox
On the sidebar to the left, click inboxes and select add a new inbox. You’ll be presented with a new screen that asks you to choose a channel you want to integrate the live chat in.
Choose your preferred channel, in this case, website.
Fill in the boxes with your website information.
Add your website domain name into the website domain box. (E.g www.mywebsite.com) PS: Omit the https:// protocol.
This is to make sure the live chat widget matches the style of your business website and the user experience is consistent.
Pick an Agent for Your Live Chat Needs
The next step is to pick a default agent for the live chat. Add Yourself as the primary agent. But If you want to add a new support agent, click the Agents tab on the left to do that.
Now a code will be generated after picking an agent. This code is how we will add the live chat to our website. The next step is to customize the widget even further, you can skip this step and proceed to integrate the live chat widget on your website if you want, but I highly recommend you don’t skip it to avoid your chat widget from being too generic.
Customize Your Widget
To customize the widget even further, click More Settings below the code.
First, add a logo for the chat widget, and then choose a name and your widget color.
There are more settings available to customize your chat widget even further, you can add more features like
- Welcome greeting message
- Welcome tagline
- A message when the visitor starts typing
- An email field to collect visitors’ email addresses.
- Automatic assignment of chat agents, and many more features.
Figure out how you want the live widget to be like and then customize it to fit that description. You can refer to Chatwoot docs to learn more.
How to Integrate Live Chat into your Shopify Website?
Now we have completely set up our chatwoot account and added an inbox, we can proceed to add it to our Shopify website.
Once you’re done customizing the widget, click update and select the configurations tab to see the code.
Copy the code and go to your Shopify website.
- Click edit code and navigate to
theme.liquidand then paste the code inside the body tag and hit save.
- The next step is to test the chat widget, refresh the website page and now you should see the widget.
- You can try typing a message on the chatbox to test it out.
- Here’s a preview of the live chat on our Shopify website.
How to Integrate Live Chat to Your Webflow Website?
The process is practically similar since we already created and set up our Chatwoot account, all we have to do is add a new inbox for our Webflow widget. Follow through the same steps as mentioned above, add your Webflow website domain, customize your profile to match the live widget, and then copy the code. Paste the code into the body tag and save it. Refresh your Webflow website to see the changes.
How to Integrate Live Chat to Your WordPress Website?
There are different ways through which we can add live chat to a WordPress site, the simplest way is to add the code in the PHP file.
- To do this, (after generating our WordPress website code) go to your project dashboard, and navigate to Appearance > Theme Editor.
- Open the Theme Footer (footer.php) file and paste the code inside the
<body>tag.
- Once you’ve pasted the code, click Update File and go to your website, and refresh the page. You should see the live chat widget now.
- Here’s a preview of the live chat in action.
Final Words
Aviyel is partnering with Chatwoot to scale, build and incentivize open source communities. To stay updated, follow the discussions here. Join Aviyel’s Twitter space at AviyelHQ.
Top comments (0)