How to Add a Chat Widget to WordPress, Wix, Shopify and More

You've set up a chat assistant and it's ready to go. Now there's one line of code to paste into your website, and you're staring at your website builder wondering where it goes. Good news: on most builders it takes a few minutes, and you don't need to be a developer.

This guide explains what a chat widget snippet is, where it goes on the common website builders, how to check it's working, and what to do if it doesn't appear.

What a chat widget snippet is

A chat widget snippet is a small piece of code that loads the chat button onto your pages. You paste it once, and it appears across your whole site.

Here's what KipDesk's snippet looks like:

<script src="https://kipdesk.com/w.js" data-key="wk_..." defer></script>

A quick breakdown:

• src is where the chat script lives.
• data-key tells it which assistant to load. Yours will be a longer code starting with wk_. Copy the whole line from your dashboard rather than typing it.
• defer means it loads after your page, so it doesn't slow your site down.

In KipDesk, you'll find your snippet on the Install page, along with step-by-step guides for WordPress, Wix, Squarespace, Shopify, Webflow and GoDaddy. It works on any other site that lets you add code. If you're not technical, you can enter your web person's email and KipDesk will send them the code and instructions.

Where to paste it on each website builder

The general rule: put the snippet in your site's footer code area, or just before the closing </body> tag, so it loads on every page. Website builders change their menus from time to time, so the exact names below may differ slightly on your account.

WordPress

You have two common options:

1. A header and footer code plugin. Install a plugin that lets you add code to your site's header or footer. Paste the snippet into the footer box and save.
2. Your theme's settings. Some themes have a "custom code" or "footer scripts" area in their settings. If yours does, paste it there.

Avoid editing theme files directly, because a theme update can overwrite your change.

Wix

Go to your site's Settings, then Custom code (it may sit under an Advanced section). Add new code, paste the snippet, choose to load it on all pages, and place it in the body end if you're given the choice. Custom code on Wix usually needs a paid plan with a connected domain.

Squarespace

Go to Settings > Advanced > Code injection and paste the snippet into the Footer box. Save. Code injection is only available on paid Squarespace plans that support it, so check your plan if you can't see the option. Menu names can change, so search Squarespace's help for "code injection" if needed.

Shopify

Go to Online Store > Themes, then choose Edit code for your live theme (it may be under a "..." or Actions menu). Open theme.liquid from the Layout folder. Find the closing </body> tag near the bottom and paste the snippet just above it:

    <script src="https://kipdesk.com/w.js" data-key="wk_..." defer></script>
  </body>

Save. If you switch themes later, you'll need to add it to the new theme too.

Webflow

Open Site settings > Custom code and paste the snippet into the footer code box. Save, then publish your site. Custom code in Webflow needs a paid site plan, and changes only go live after you publish.

GoDaddy and others

Look for a section called something like custom code, embed code, or header and footer scripts. The KipDesk Install page has a GoDaddy guide. On any builder, the footer or "before </body>" spot is the one you want.

How to check it works

Once you've saved and published:

1. Open your live website in a new browser window, ideally a private or incognito one. Visit your real web address, not the builder's preview.
2. Look for the chat button in the bottom right or bottom left corner, depending on your settings.
3. Ask it a question like a customer would, such as "what are your opening hours?"
4. Check on your phone as well as your computer.

KipDesk also shows in your dashboard when it has been seen live on your site, which is a handy confirmation.

Common problems and fixes

The chat doesn't appear at all

• You haven't published. Some builders (Webflow especially) save changes without putting them live. Publish the site.
• You're looking at a preview. Builder previews and editors often don't run custom code. Check the live address.
• The code is in the wrong place, or only on one page. Make sure it's set to load on all pages.

Caching plugins

On WordPress, caching or optimisation plugins can keep showing an old version of your pages. Clear the cache after adding the snippet. Some plugins also combine or delay scripts. If the chat still doesn't show, try excluding kipdesk.com/w.js from those settings.

Ad blockers and browser extensions

Some ad blockers and privacy extensions hide chat widgets. If you can't see it but a friend can, try a private window with extensions switched off. You can't control what visitors run in their own browsers.

The domain allow-list

For security, your chat only works on your own website's address. That means it won't show on a different domain, a staging site or a temporary builder address. If you've moved to a new web address, enter it in KipDesk under Teach, then Website, so it reads the new site and allows the chat there.

It still doesn't work

Copy the snippet again from your dashboard in case a character went missing, and check there are no curly "smart quotes" if you pasted via a word processor.

No website?

If you don't have a website, you can still use KipDesk. Answer a few short questions about your business and you get a hosted chat page with its own link, which you can share on Google, social media, in emails or as a QR code.

Next steps

Once the chat is live, test it with real customer questions. If you're still deciding whether a chat is right for you, read website chat vs contact form, or see how it works for trades and cleaners. Plans and the free trial are on the pricing section.

One line of code, one save, one publish. Then open your site and say hello to it.