← All docs

Install the chat widget on your website

Install the chat widget on your website

This guide shows you exactly where to paste the Costello embed snippet on the most popular website platforms, plus a fallback for any other site.

Before you start

First, grab your snippet. In Costello, go to Integrations → Web chat and click Copy embed snippet. It's a small <script> block — you'll paste the same snippet on every page of your site.

On WordPress? There's an easier way

WordPress users can skip the snippet entirely with our official plugin and one-click connect. See Connect your WordPress site (one-click). The manual route below is only needed if you can't use the plugin.

After installing on any platform, come back to Integrations → Web chat and click Verify install to confirm the snippet is live.

WordPress (manual, without the plugin)

The simplest no-plugin route is the free WPCode plugin.

1
Install WPCode

In WordPress, go to Plugins → Add New, search for WPCode, then install and activate it.

2
Open Header & Footer

Go to Code Snippets → Header & Footer.

3
Paste into the Footer box

Paste your Costello snippet into the Footer box and save.

Shopify

1
Open your theme code

From your Shopify admin, go to Online Store → Themes, then click Edit code on your live theme.

2
Open theme.liquid

In the file list, open theme.liquid.

3
Paste before the closing body tag

Paste your Costello snippet just before the closing </body> tag, then click Save.

Wix

1
Open Custom Code

In your Wix dashboard, go to Settings → Custom Code.

2
Add a new code snippet

Click Add Custom Code and paste your Costello snippet.

3
Set placement and pages

Set it to load in Body – end and apply it to All pages, then apply.

Squarespace

1
Open Code Injection

Go to Settings → Advanced → Code Injection.

2
Paste into the Footer box

Paste your Costello snippet into the Footer box and save.

Webflow

1
Open Custom Code

Go to Project Settings → Custom Code.

2
Paste into Footer Code

Paste your Costello snippet into the Footer Code box. (You can also add it to a single page's settings before </body> if you only want it on one page.)

3
Save and publish

Save, then publish your site for the change to go live.

Any other website

If your platform isn't listed, the rule is the same everywhere:

1
Find your closing body tag

Open the template or layout file that's shared across your whole site.

2
Paste the snippet

Paste your Costello snippet just before the closing </body> tag on every page.

3
Publish

Save and publish your changes.

Add your domain to the allowed list

The widget only loads on websites you've whitelisted. If the bubble doesn't appear after installing, check that your domain is in the allowed domains list under Integrations → Web chat. See Web chat widget settings.

Next steps