Add the chat widget to your website

WordPress

Requirements: a WordPress administrator account. On WordPress.com you also need a paid plan that allows plugins (if you can't find the Plugins menu or the Install button, check your plan). Self-hosted WordPress (WordPress.org) has no plan limits.

Option A — Use a plugin (recommended, no coding)

1. In your WordPress admin, go to Plugins → Add New Plugin.
2. Search for WPCode (full name: “WPCode – Insert Headers and Footers + Custom Code Snippets”), then click Install Now and Activate.
3. In the left menu, open Code Snippets → Header & Footer.
4. Paste your widget code into the Footer box.
5. Click Save Changes.

Tip: if you turned on WPCode's “Headers & Footers mode”, the same boxes are under Settings → Header & Footer instead.

Option B — Add it from code (for developers)

Add this to your child theme's functions.php (or to a code-snippets plugin). Don't edit a parent theme's files directly: theme updates overwrite your changes.

add_action( 'wp_footer', function () {
    echo '<script src="https://agent.voxent.us/widget.js" data-key="pk_YOUR_KEY" async></script>';
} );

If it doesn't appear

• Caching or optimization plugins (WP Rocket, LiteSpeed Cache, Autoptimize and similar): clear their cache after saving. If the bubble still doesn't show, exclude agent.voxent.us/widget.js from the JavaScript minify, combine and delay options.
• Two copies: if you added the code both with a plugin and in your theme, you'll see two chat bubbles. Keep only one.

Official documentation: WPCode — Header & Footer settings

Wix

Requirements: a Wix Premium plan with a connected domain, and your site must be published. Custom code isn't available on a free Wix site.

1. Open your site's dashboard and go to Settings.
2. Click Custom Code (it's listed under Advanced, or under Development & integrations in newer dashboards).
3. Click + Add Custom Code at the top right.
4. Paste your widget code into the box and give it a name, for example “Radd chat widget”.
5. Under Add Code to Pages, choose All pages, and make sure Load code once is selected (this is the default).
6. Under Place Code in, choose Body – end.
7. Click Apply, then publish your site.

Heads-up: don't choose “Load code on each new page”. Wix sites switch pages without reloading, so that option would re-run the widget on every page change and you would see duplicate chat bubbles.

Heads-up: don't use the “Embed HTML” or iframe element for the widget. It would sit inside a box on one page instead of floating on every page.

Tip: custom code doesn't appear in the Wix editor. Open your published site to see the chat bubble.

Official documentation: Wix — Embedding custom code on your site · Custom code loading options

Shopify

Requirements: access to your theme's code. Shopify only lets you edit a theme's code once you've purchased it (free themes are fine).

1. In your Shopify admin, go to Online Store → Themes.
2. Make a backup first. Next to your current theme, open the three-dot menu (⋯) and choose Duplicate. Shopify recommends this before you edit any code.
3. On your current theme, open the ⋯ menu again and choose Edit code.
4. In the file list on the left, open Layout → theme.liquid.
5. Scroll to the bottom of the file and find the closing </body> tag.
6. Paste your widget code on a new line directly above </body>.
7. Click Save.

Heads-up: the code lives inside the theme. If you publish a different theme later (or a duplicate), repeat these steps for that theme.

Heads-up: Shopify's checkout pages are separate from your theme, so the chat bubble usually won't appear there.

Tip: if you use Allowed domains, add your store's domain, and also myshopify.com if you test on your yourstore.myshopify.com address.

Official documentation: Shopify Help Center — Editing theme code

Squarespace

Requirements: Code Injection needs a Squarespace Business plan or higher; it isn't available on the Personal plan. Squarespace changes its plans over time, so if you don't see Code Injection, check your plan.

1. Log in to Squarespace and open your website's settings.
2. Open Code Injection. Where it appears depends on your version: Settings → Advanced → Code Injection, or under Pages → Custom Code (in the “Not Linked” section).
3. Paste your widget code into the Footer box. The footer box adds the code at the end of every page.
4. Click Save.

Heads-up: use Code Injection, not a Code Block. A Code Block adds the widget to one page only.

Tip: Squarespace changes its menus often. If you can't find Code Injection, search your site settings or the Squarespace Help Center for “code injection”. If you use Allowed domains, remember that your built-in Squarespace address (ending in squarespace.com) is a separate domain from your own.

Official help: Squarespace Help Center (search for “code injection”)

Hostinger

Hostinger is both a hosting company and a website builder, so the steps depend on how your site was made. Pick the case that matches yours.

A — Built with Hostinger Website Builder

Requirements: the Custom code feature must be available on your Website Builder plan. If you can't find it, check your plan.

1. Open your site in the Hostinger Website Builder.
2. Click the three-dot menu (⋯ More) and choose Integrations.
3. Find Custom code and add a new custom code entry.
4. Paste your widget code, exactly as copied, and save.
5. Click Publish (or Update website). This step is required: it's what pushes the new code to your live site.

Tip: custom code doesn't show inside the builder's editor. Check it in the builder's preview mode or on your live site.

B — WordPress hosted on Hostinger

Log in to your WordPress admin and follow the WordPress steps.

C — A plain HTML website on Hostinger hosting

1. In Hostinger's hPanel, open Files → File Manager for your website.
2. Open your website's folder (usually public_html).
3. Edit each page's HTML file (or the shared template if your site has one) and paste your widget code just before the closing </body> tag.
4. Save the file(s).

Tip: if you use Allowed domains, add your own domain. If you also test on a temporary Hostinger preview address (ending in hostingersite.com), add hostingersite.com as well, or leave Allowed domains empty while testing.

Official documentation: Hostinger — Website Builder: how to integrate custom code

Webflow

Requirements: a paid Webflow plan for the site. The free Starter plan doesn't allow custom code.

1. Open your project and go to Site settings.
2. Click the Custom code tab in the left menu.
3. Paste your widget code into the Footer code box (this is the “before </body> tag” area).
4. Click Save changes.
5. Publish your site.

Heads-up: custom code only runs on the published site, not in the Designer. Publish to every domain you use: your staging address (yoursite.webflow.io) and your own domain are published separately.

Tip: if you use Allowed domains, add your own domain. To test on the staging address, add webflow.io too, or leave Allowed domains empty while testing.

Official documentation: Webflow University — Site-level custom code

Other platforms

Any website builder or CMS

Almost every platform has a place for site-wide code. Look in your site or project settings for one of these names: Custom code, Code injection, Header and footer scripts, Tracking code, or Embed code for all pages. Paste your widget code there, in the footer / end of body area if you have the choice (the header area also works), set it to load on all pages, save, and publish. Search your platform's help center for “custom code” or “code injection” if you can't find it.

A plain HTML website

Open each page (or the shared template or layout file, if your site has one) in a text editor and paste your widget code just before the closing </body> tag. Save and upload the files.

Google Tag Manager

Use this JavaScript version instead of the plain script tag. It sets your key explicitly, so it doesn't depend on how Tag Manager re-inserts script tags. Replace pk_YOUR_KEY with your own key.

<script>
  (function () {
    var s = document.createElement("script");
    s.src = "https://agent.voxent.us/widget.js";
    s.async = true;
    s.setAttribute("data-key", "pk_YOUR_KEY");
    document.head.appendChild(s);
  })();
</script>

1. In Tag Manager, go to Tags → New and choose the Custom HTML tag type.
2. Paste the code above.
3. Under Triggering, choose All Pages.
4. Save, then Submit and publish your container.

Tip: on Wix, use the Wix steps instead. Wix handles Tag Manager through its own marketing integration.

React, Vue, Next.js and other web apps (for developers)

For apps with a single HTML shell (Vite, Create React App, Vue CLI), paste the plain script tag into index.html, just before the closing </body>. For Next.js, use the Script component in your root layout:

import Script from "next/script";

// In your root layout, inside <body>:
<Script
  src="https://agent.voxent.us/widget.js"
  data-key="pk_YOUR_KEY"
  strategy="afterInteractive"
/>

Strict Content-Security-Policy: if your site sends a Content-Security-Policy header, allow https://agent.voxent.us in script-src and connect-src. You may also need style-src 'unsafe-inline' (the widget injects its own styles) and img-src data: (your logo is embedded as a data image).

Send these instructions to your web developer

If someone else manages your website, send them this message. Before you send it, replace pk_YOUR_KEY with your own key (or paste the full code you copied from your dashboard).

Hi,

Please add the script below to every page of our website, just before the closing </body> tag (in the shared site template or footer, so it loads site-wide). It loads our customer chat widget.

<script src="https://agent.voxent.us/widget.js" data-key="pk_YOUR_KEY" async></script>

Notes:
- Please use the snippet exactly as written. The key identifies our account.
- If the site sends a Content-Security-Policy header, please allow https://agent.voxent.us in script-src and connect-src, plus inline styles (style-src 'unsafe-inline') and img-src data: for the logo.
- Please make sure it is added only once.

Thank you!

Can't add code to your site at all?

Use your direct chat link instead. In your dashboard, open Integration → Direct chat link, then add it to your site (or to your social profiles and emails) as a normal link or button, for example “Chat with us”. It needs no installation.