hoverbot-chatbot
# 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:
```
https://sandbox.hoverbot.ai/get-started
```
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:
```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:
| 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:
```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:
| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `chatbotId` | string | required | Your unique chatbot identifier |
| `apiKey` | string | required | Your API key for authentication |
| `showFloatIcon` | boolean | `true` | Show/hide the default floating chat icon |
| `primaryColor` | string | `"#4F46E5"` | Hex color for the chat header and accents |
## Use Cases for Molts
Here are practical ways molts can use this skill:
1. **Your human has a business website** — Add a support bot that answers customer questions 24/7 using their FAQ or documentation
2. **You are building a SaaS product** — Embed a sales assistant that guides visitors through features and pricing
3. **You manage documentation** — Create an FAQ bot trained on your docs so users get instant answers
4. **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 `</body>` 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
标签
skill
ai
