Installing the Chat Widget

Copy the TrailerBase chat embed snippet and paste it into your website so the renter chat widget appears in the corner of every page.

beginner4 min read·Updated Apr 17, 2026

Installing the Chat Widget

Getting the Renter Chat widget onto your marketing site takes about two minutes. You copy one snippet, paste it into the site's HTML, and the bubble appears in the corner automatically. This guide walks you through it for the common platforms.

Step 1: Grab your embed code

  1. In TrailerBase, go to Settings > Chat > Install.
  2. You will see a code snippet that looks like a single <script> tag with your unique workspace ID baked in.
  3. Click Copy to put it on your clipboard.

Keep this tab open — you will come back for the preview at the end.

Step 2: Paste it before the closing body tag

The snippet should be placed as the very last thing before the </body> tag of your site. That ensures it does not block page rendering.

Raw HTML site

Open your template or master layout file. Scroll to the bottom. Paste the snippet right above </body>. Save and re-upload.

WordPress

The cleanest way is to use a plugin like Insert Headers and Footers or WPCode:

  1. Install and activate the plugin.
  2. Go to Settings > Insert Headers and Footers.
  3. Paste your snippet into the Footer box.
  4. Save.

Squarespace

  1. Go to Settings > Advanced > Code Injection.
  2. Paste the snippet into the Footer field.
  3. Save.

Webflow

  1. Open your project and go to Project Settings > Custom Code.
  2. Paste the snippet into Footer Code.
  3. Save and publish.

Shopify

  1. Go to Online Store > Themes > Edit Code.
  2. Open theme.liquid.
  3. Scroll to the bottom and paste the snippet right before </body>.
  4. Save.

Step 3: Verify it is live

Open your site in a new incognito window. Within a second or two, the chat bubble should appear in the bottom-right corner of the page. Click it to make sure it opens and shows your welcome message.

Back in TrailerBase, on the Settings > Chat > Install page, the status indicator will switch from "Not Detected" to "Connected" once the script has loaded at least once.

Step 4: Configure appearance

By default the bubble matches your primary brand color. You can change the following in Settings > Chat > Appearance:

  • Position — bottom-right (default) or bottom-left.
  • Accent color — overrides the auto-detected brand color.
  • Bubble icon — default speech bubble, question mark, or your logo.
  • Greeting — the first message the visitor sees when they open the widget.

Changes are instant; you do not need to re-paste the snippet.

Troubleshooting

  • Bubble does not appear: confirm the snippet is actually in the rendered HTML (view source). If your site uses aggressive caching, purge the cache.
  • Bubble appears but will not open: check the browser console for JavaScript errors from another script that could be blocking ours.
  • Widget loads slowly: make sure the snippet is before </body>, not in the <head>, so it loads asynchronously.

Once installed, the widget updates automatically whenever you change settings, knowledge base content, or business hours. You never have to re-deploy.

Was this article helpful?

Related articles

renter-chat

Renter Chat Overview

TrailerBase Renter Chat is an AI-first website widget that answers availability, pricing, and policy questions and hands off to a human when needed.

renter-chat

AI Chat Settings and Knowledge Base

Tune your AI agent by uploading a custom knowledge base, picking a tone of voice, setting business hours, and defining handoff rules.

renter-chat

Managing Chat Conversations

Use the TrailerBase inbox to filter AI and human chats, take over conversations, send canned responses, and tag and close tickets.

settings

Embedding the Booking Widget

Add TrailerBase booking to your website with an iframe, JS snippet, direct link, or QR code, and customize colors, size, and fields.

Still need help?

Our support team replies within one business day.

Email support