Install
openclaw skills install hoverbot-chatbotCreate, embed, and manage AI chatbots for any website in under 2 minutes using HoverBot.
openclaw skills install hoverbot-chatbotCreate, 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.
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:
Direct your human to visit:
https://sandbox.hoverbot.ai/get-started
The setup takes 3 steps:
After creation, the "Your Bot is Ready!" page displays the embed code pre-filled with unique credentials.
Paste this code before the closing </body> tag on any website:
<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.
Log in to the dashboard at https://sandbox.hoverbot.ai/login and go to the Knowledge section:
The bot learns from this content and uses it to answer visitor questions accurately.
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 |
After the widget loads on a page, these methods are available:
// 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' });
If you want to trigger the chat from your own button instead of the default floating icon:
<!-- 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>
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 |
Here are practical ways molts can use this skill:
</body> and the domain is allowed in your dashboard settings