Integration Guide

WordPress & Shopify Embed Guide

Add HoverBot to your WordPress site or Shopify store with a single snippet or native plugin in under 10 minutes.

What You Need

Your Chatbot ID and Widget Key (in the HoverBot dashboard, open your chatbot and go to Embed). The WooCommerce plugin can create these for you.
Your store's domain added to the chatbot's Allowed Domains (the WooCommerce plugin does this for you)
Admin access to your WordPress or Shopify store
5-10 minutes for setup and verification

Universal Snippet Method

The fastest way to deploy HoverBot on any platform. Copy the embed snippet from your dashboard and paste it before the closing </body> tag.

<!-- HoverBot Widget -->
<script>
  window.HOVERBOT_CONFIG = {
    chatbotId: "YOUR_CHATBOT_ID",
    apiKey: "YOUR_WIDGET_KEY"
  };
</script>
<script src="https://app.hoverbot.ai/widget.js" async></script>

The script is async and weighs under 15 KB gzipped. It does not block page rendering.

WordPress Setup

Option A: Plugin (recommended, works with WooCommerce)

Download the HoverBot plugin (version 2.1.0)
In your WordPress admin, go to Plugins → Add New → Upload Plugin and upload the zip
Activate "HoverBot"
Go to WooCommerce → HoverBot Chat (Settings → HoverBot Chat without WooCommerce)
New to HoverBot: fill in the form and choose "Create account and connect". The plugin creates your chatbot and registers your store domain.
Already a customer: use "Connect an existing chatbot" and paste your Chatbot ID and Widget Key
Visit your store and verify the chat appears. You can hide it on the cart or checkout page from the same screen.

Option B: Manual snippet

Go to Appearance → Theme File Editor (or use a header/footer plugin)
Open footer.php or your theme's footer template
Paste the embed snippet before </body>
Save and verify

Theme compatibility

The widget works with all major WordPress themes including Astra, GeneratePress, Divi, Elementor, and block themes. It positions itself as a fixed overlay and does not interfere with theme layouts.

Shopify Setup

Method: Theme snippet

Go to Online Store → Themes in your Shopify admin
Click "Edit code" on your active theme
Open theme.liquid (or your layout file)
Paste the embed snippet before </body>
In HoverBot, add both yourstore.myshopify.com and your custom domain to the chatbot's Allowed Domains
Save and preview your store to verify the widget loads

What to expect on Shopify

Answers come from your HoverBot knowledge base: index product and policy content there, and shoppers can ask about it in plain language
The embed snippet does not read the current page URL or Shopify cart; it sends only the chat message and session identifiers to HoverBot
Works with Shopify Online Store 2.0 themes and classic themes

Customization Options

<script>
  window.HOVERBOT_CONFIG = {
    chatbotId: "YOUR_CHATBOT_ID",
    apiKey: "YOUR_WIDGET_KEY",
    name: "Support Bot",
    description: "Hi! How can I help you today?",
    primaryColor: "#7C3AED"
  };
</script>
<script src="https://app.hoverbot.ai/widget.js" async></script>

Option	Description	Default
name	Widget header title	Support Chat
primaryColor	Any hex color	#0037ff
description	Custom greeting text	How can I help you today?

Verification Checklist

Widget bubble appears on all pages (or only specified pages if configured)
Opening the widget shows your configured greeting message
Typing a question returns a knowledge-base-grounded response
Widget does not block page content or interfere with navigation
Mobile viewport shows the widget correctly positioned and responsive

Need help with embedding?

Request Setup Support Widget Patterns Guide