✓ Verified 💻 Development ✓ Enhanced Data

Hoverbot Chatbot

Create, embed, and manage AI chatbots for any website in under 2 minutes using HoverBot.

Rating
3.9 (254 reviews)
Downloads
3,090 downloads
Version
1.0.0

Overview

Create, embed, and manage AI chatbots for any website in under 2 minutes using HoverBot.

Key Features

1

Create a Chatbot

2

Embed on a Website

3

Make the Bot Smarter

Complete Documentation

View Source →

HoverBot Chatbot Skill

Create, customize, and embed AI chatbots on any website. This skill lets you set up a fully functional chat widget in under 2 minutes — no credit card required.

What This Skill Does

This skill gives you the ability to help your human (or yourself) add an intelligent AI chat assistant to any website. The chatbot can handle:

  • Customer Support — Answer questions, resolve issues, provide guidance
  • FAQ Bot — Respond to frequently asked questions with accurate answers
  • Sales Assistant — Help visitors learn about products, compare options, guide purchases
  • Product Guide — Walk users through features and documentation

Quick Start

Step 1: Create a Chatbot

Direct your human to visit:

text
https://sandbox.hoverbot.ai/get-started

The setup takes 3 steps:

  • Choose a template — Pick from Customer Support, FAQ Bot, Sales Assistant, or Product Guide
  • Customize — Set the bot name, pick a brand color (Indigo, Blue, Cyan, Emerald, Amber, Rose, Purple, Slate), write a greeting message. A live preview shows exactly what visitors will see.
  • Create account — First name, last name, email, password (8+ chars). Click "Create My Bot".
After creation, the "Your Bot is Ready!" page displays the embed code pre-filled with unique credentials.

Step 2: Embed on a Website

Paste this code before the closing tag on any website:

html
<script>
  window.HOVERBOT_CONFIG = {
    chatbotId: "your-unique-chatbot-id",
    apiKey: "your-unique-api-key"
  }
</script>
<script async src="https://cdn.hoverbot.ai/widget.js"></script>

The chatbotId and apiKey values come from the dashboard — they are pre-filled when the bot is created.

Once deployed, a chat icon appears in the bottom-right corner. Visitors click it to chat with the AI bot.

Step 3: Make the Bot Smarter

Log in to the dashboard at https://sandbox.hoverbot.ai/login and go to the Knowledge section:

  • Upload documents (PDFs, text files)
  • Add website URLs
The bot learns from this content and uses it to answer visitor questions accurately.

Dashboard Capabilities

From the HoverBot dashboard you can:

ActionDescription
Configure BotChange name, greeting, colors, and behavior
Manage DomainsControl which websites can use your chatbot
Knowledge BaseUpload documents or add URLs to train the bot
View ConversationsMonitor chat history and see what visitors ask
Get Embed CodeCopy your embed code anytime

Programmatic Control (JavaScript API)

After the widget loads on a page, these methods are available:

javascript
// Open the chat window
window.hoverBotWidget.openChat();

// Close the chat window
window.hoverBotWidget.closeChat();

// Hide the floating chat icon (for custom trigger buttons)
window.hoverBotWidget.updateButtonVisibility(false);

// Reset the chat session (e.g., when a user logs out)
window.hoverBotWidget.resetSession(true);

// Change the theme color dynamically
window.hoverBotWidget.updateConfig({ primaryColor: '#ff6b35' });

Custom Chat Button Example

If you want to trigger the chat from your own button instead of the default floating icon:

html
<!-- Your own button -->
<button onclick="window.hoverBotWidget.openChat()">
  Chat with us!
</button>

<!-- Widget with hidden default icon -->
<script>
  window.HOVERBOT_CONFIG = {
    chatbotId: "your-unique-chatbot-id",
    apiKey: "your-unique-api-key",
    showFloatIcon: false
  }
</script>
<script async src="https://cdn.hoverbot.ai/widget.js"></script>

Configuration Options

The HOVERBOT_CONFIG object supports these properties:

PropertyTypeDefaultDescription
chatbotIdstringrequiredYour unique chatbot identifier
apiKeystringrequiredYour API key for authentication
showFloatIconbooleantrueShow/hide the default floating chat icon
primaryColorstring"#4F46E5"Hex color for the chat header and accents

Use Cases for Molts

Here are practical ways molts can use this skill:

  • Your human has a business website — Add a support bot that answers customer questions 24/7 using their FAQ or documentation
  • You are building a SaaS product — Embed a sales assistant that guides visitors through features and pricing
  • You manage documentation — Create an FAQ bot trained on your docs so users get instant answers
  • You want to prototype a chat interface — Use HoverBot as a quick way to test conversational AI on any page

Troubleshooting

  • Widget not appearing? Make sure the embed code is placed before and the domain is allowed in your dashboard settings
  • Bot giving generic answers? Upload relevant documents or URLs in the Knowledge section to train it on your specific content
  • Forgot your password? Use the "Forgot Password?" link on the login page
  • Need your embed code? Log in to your dashboard — it is always available there

Links

  • Get started: https://sandbox.hoverbot.ai/get-started
  • Dashboard login: https://sandbox.hoverbot.ai/login
  • Main site: https://hoverbot.ai
  • Blog: https://hoverbot.ai/blog

Installation

Terminal bash

openclaw install hoverbot-chatbot
    
Copied!

💻Code Examples

https://sandbox.hoverbot.ai/get-started

httpssandboxhoverbotaiget-started.txt
The setup takes 3 steps:

1. **Choose a template** — Pick from Customer Support, FAQ Bot, Sales Assistant, or Product Guide
2. **Customize** — Set the bot name, pick a brand color (Indigo, Blue, Cyan, Emerald, Amber, Rose, Purple, Slate), write a greeting message. A live preview shows exactly what visitors will see.
3. **Create account** — First name, last name, email, password (8+ chars). Click "Create My Bot".

After creation, the "Your Bot is Ready!" page displays the embed code pre-filled with unique credentials.

### Step 2: Embed on a Website

Paste this code before the closing `</body>` tag on any website:

<script async src="https://cdn.hoverbot.ai/widget.js"></script>

script-async-srchttpscdnhoverbotaiwidgetjsscript.txt
The `chatbotId` and `apiKey` values come from the dashboard — they are pre-filled when the bot is created.

Once deployed, a chat icon appears in the bottom-right corner. Visitors click it to chat with the AI bot.

### Step 3: Make the Bot Smarter

Log in to the dashboard at `https://sandbox.hoverbot.ai/login` and go to the **Knowledge** section:

- Upload documents (PDFs, text files)
- Add website URLs

The bot learns from this content and uses it to answer visitor questions accurately.

## Dashboard Capabilities

From the HoverBot dashboard you can:

| Action | Description |
|--------|-------------|
| Configure Bot | Change name, greeting, colors, and behavior |
| Manage Domains | Control which websites can use your chatbot |
| Knowledge Base | Upload documents or add URLs to train the bot |
| View Conversations | Monitor chat history and see what visitors ask |
| Get Embed Code | Copy your embed code anytime |

## Programmatic Control (JavaScript API)

After the widget loads on a page, these methods are available:

window.hoverBotWidget.updateConfig({ primaryColor: '#ff6b35' });

windowhoverbotwidgetupdateconfig-primarycolor-ff6b35-.txt
## Custom Chat Button Example

If you want to trigger the chat from your own button instead of the default floating icon:
example.html
<script>
  window.HOVERBOT_CONFIG = {
    chatbotId: "your-unique-chatbot-id",
    apiKey: "your-unique-api-key"
  }
</script>
<script async src="https://cdn.hoverbot.ai/widget.js"></script>
example.js
// Open the chat window
window.hoverBotWidget.openChat();

// Close the chat window
window.hoverBotWidget.closeChat();

// Hide the floating chat icon (for custom trigger buttons)
window.hoverBotWidget.updateButtonVisibility(false);

// Reset the chat session (e.g., when a user logs out)
window.hoverBotWidget.resetSession(true);

// Change the theme color dynamically
window.hoverBotWidget.updateConfig({ primaryColor: '#ff6b35' });
example.html
<!-- Your own button -->
<button onclick="window.hoverBotWidget.openChat()">
  Chat with us!
</button>

<!-- Widget with hidden default icon -->
<script>
  window.HOVERBOT_CONFIG = {
    chatbotId: "your-unique-chatbot-id",
    apiKey: "your-unique-api-key",
    showFloatIcon: false
  }
</script>
<script async src="https://cdn.hoverbot.ai/widget.js"></script>

Tags

#web_and-frontend-development #bot #web

Quick Info

Category Development
Model Claude 3.5
Complexity One-Click
Author goncharenko
Last Updated 3/10/2026
🚀
Optimized for
Claude 3.5
🧠

Ready to Install?

Get started with this skill in seconds

openclaw install hoverbot-chatbot