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

HoverBot workspace ID (found in your dashboard under Settings → Embed)
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
  src="https://widget.hoverbot.ai/loader.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  async
></script>

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

WordPress Setup

Option A: Plugin (recommended)

Go to Plugins → Add New in your WordPress admin
Search for "HoverBot" and install the official plugin
Activate the plugin and enter your Workspace ID in Settings → HoverBot
Save and verify the widget appears on your site

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>
Save and preview your store to verify the widget loads

Shopify-specific features

The widget automatically detects Shopify product pages and can provide product-specific answers when connected to your knowledge base
Cart context can be passed via data attributes for conversational commerce flows
Works with Shopify Online Store 2.0 themes and classic themes

Customization Options

<script
  src="https://widget.hoverbot.ai/loader.js"
  data-workspace-id="YOUR_WORKSPACE_ID"
  data-position="bottom-right"
  data-primary-color="#7C3AED"
  data-greeting="Hi! How can I help you today?"
  data-language="en"
  async
></script>

Attribute	Options	Default
data-position	bottom-right, bottom-left	bottom-right
data-primary-color	Any hex color	#7C3AED
data-greeting	Custom greeting text	Hi! How can I help?
data-language	ISO 639-1 code	en

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