+254725682556 +254725052660 info@ziprof.co.ke
Client Area

Website & Web Design

How to Add a Live Chat Widget to Your Website

A live chat widget lets visitors ask questions directly from your website instead of emailing or calling you, which is especially useful when someone wants a quick answer about pricing, stock, or an MPesa payment before they commit to buying. Setting one up usually takes a few minutes: you create an account with a live chat provider, copy a short snippet of code, and paste it into your website.

Before you start

Sign up with a live chat provider of your choice. Most offer a free plan that's more than enough for a small business site. Once you've created an account, look for a section called something like Install, Widget Code, or Get the Code and copy the JavaScript snippet it gives you. You'll paste this exact snippet into your website in the next step.

Adding the widget to your site

If your website runs on WordPress

  1. Log in to your wp-admin dashboard.
  2. Install and activate a plugin that lets you insert custom code into your site's header or footer. Search the WordPress plugin directory for one; there are several free options.
  3. Open the plugin's settings and paste the chat widget code into the Footer field.
  4. Click Save, then open your website in a new browser tab to confirm the chat bubble appears.
If you're comfortable editing theme files directly, you can instead paste the code just before the closing </body> tag in your theme's footer file under Appearance > Theme File Editor. A theme update can overwrite this change, so a plugin is the safer option for most site owners.

If your website is static HTML (not WordPress)

  1. Open your hosting control panel's File Manager and navigate to your website's files.
  2. Open each page file, or your shared footer/include file if your site uses one, in the code editor.
  3. Paste the widget code immediately before the closing </body> tag.
  4. Click Save and reload your website to confirm the widget loads.

If your site has many pages and no shared footer file, you'll need to repeat this on every page, or ask your web developer to add it through a shared template if your site uses one.

A few things to check afterward

  • Test the widget on your phone as well as a desktop browser: some widgets load slowly or sit awkwardly over mobile menus.
  • Set your chat provider's business hours so visitors see an offline message outside your working hours instead of an unanswered chat box.
  • Make sure the widget doesn't cover your WhatsApp button or other buttons if you already have one on your site.
A live chat widget only helps if someone is actually watching it. If you can't staff it consistently, consider a WhatsApp chat button instead, since messages arrive on a phone you're already checking.