Skip to main content

Installing the Chatbot

Adding the Theo chatbot to your website is simple. Just copy and paste a small piece of code.

Creating a Web Deployment​

Before installing, you need to create a deployment:

  1. Go to Agents in your dashboard
  2. Click on your agent
  3. Find Web Deployments section
  4. Click Add Deployment
  5. Give it a name (e.g., "Main Website")
  6. Configure settings (welcome message, colors)
  7. Click Save

Getting Your Embed Code​

Once you've created a deployment:

  1. Go to your agent's Web Deployments
  2. Find your deployment
  3. Click Get Code or Copy Embed Code
  4. You'll see something like this:
<script src="https://app.needtheo.com/widget/YOUR-UNIQUE-ID.js"></script>

Adding Code to Your Website​

Option 1: Add Before </body> (Recommended)​

Paste the code just before the closing </body> tag on every page where you want the chatbot:

<!DOCTYPE html>
<html>
<head>
    <!-- Your head content -->
</head>
<body>
    <!-- Your website content -->

    <!-- Add the Theo chatbot code here -->
    <script src="https://app.needtheo.com/widget/YOUR-UNIQUE-ID.js"></script>
</body>
</html>

Option 2: Add to Header​

If you prefer, you can add it in the <head> section, but before </body> is slightly better for page load performance.

Platform-Specific Instructions​

WordPress​

Using a Plugin (Easiest):

  1. Install "Insert Headers and Footers" plugin (or similar)
  2. Go to Settings → Insert Headers and Footers
  3. Paste the code in the "Scripts in Footer" box
  4. Save

Using Theme Editor:

  1. Go to Appearance → Theme Editor
  2. Select footer.php from the right sidebar
  3. Find the </body> tag
  4. Paste the code just before it
  5. Update File

Using a Page Builder: Most page builders (Elementor, Divi, etc.) have an "HTML" or "Custom Code" widget. Add the script code there.

Squarespace​

  1. Go to Settings → Advanced → Code Injection
  2. Paste the code in the "Footer" section
  3. Save

Wix​

  1. Go to Settings → Advanced → Custom Code
  2. Click "Add Custom Code"
  3. Paste the code
  4. Set to load on "All Pages"
  5. Set placement to "Body - end"
  6. Save

Shopify​

  1. Go to Online Store → Themes
  2. Click "Edit code" on your active theme
  3. Find theme.liquid
  4. Paste the code just before </body>
  5. Save

Webflow​

  1. Go to Project Settings → Custom Code
  2. Paste the code in "Footer Code"
  3. Save
  4. Publish your site

GoDaddy Website Builder​

  1. Go to your website editor
  2. Add an "HTML" section
  3. Paste the code
  4. Save and publish

HTML/Static Sites​

Simply paste the code before </body> on each page, or include it in a footer file that all pages share.

Verifying Installation​

After adding the code:

  1. Visit your website in a new browser tab
  2. Look for the chat bubble (usually bottom-right corner)
  3. Click the bubble to open the chat
  4. Send a test message to make sure it works
  5. Check your dashboard for the test conversation

Troubleshooting Installation​

Chat bubble doesn't appear:

  • Clear your browser cache and refresh
  • Check that the code was saved correctly
  • Verify you're looking at the right page
  • Make sure there are no JavaScript errors (check browser console)

Chat opens but doesn't respond:

  • Check your deployment is configured correctly
  • Verify your agent is set up
  • Check your subscription is active

Multiple Websites​

You can create separate deployments for different websites:

  1. Create a new Web Deployment for each site
  2. Use different settings/branding if needed
  3. Each site gets its own embed code
  4. Conversations are tracked separately

Removing the Chatbot​

To remove the chatbot from your website:

  1. Remove the script code from your website
  2. Save and publish
  3. The chat bubble will no longer appear

You can also disable a deployment from your dashboard without removing the code, but removing the code entirely is cleaner.

Testing Tips​

Use Incognito Mode​

Test in an incognito/private browser window to see what first-time visitors see.

Try Different Devices​

Check how the chatbot looks on:

  • Desktop computers
  • Tablets
  • Mobile phones

Test Various Scenarios​

  • Ask about business hours
  • Request an appointment
  • Ask a question not in your knowledge base

Common Questions​

Will this slow down my website?​

No. The chatbot loads asynchronously and won't block your page from loading.

Does it work on mobile?​

Yes! The chatbot is fully responsive and works on phones and tablets.

Can I put the chatbot on only certain pages?​

Yes. Only add the code to pages where you want it to appear.

Do I need to update the code when I make changes?​

No. Changes you make in your dashboard (colors, welcome message, etc.) update automatically.

What if I use a different website builder?​

The general process is the same: find where to add custom code/scripts and paste the embed code. Most platforms have a way to add custom JavaScript.

Need Help?​