1. Why Use WidgetBot on a Gaming Site?
WidgetBot enables you to embed a Discord chat interface directly onto your website. On an “unblocked games” platform, it:
- Encourages player interaction,
- Supports community-building,
- Enables real-time communication,
- And integrates moderation tools—all without requiring users to leave your site.
2. Prerequisites: Add the Bot to Your Discord Server
Before integrating anything:
- Invite WidgetBot to your Discord server. Use the official invite link from the WidgetBot documentation or website.
- Ensure you grant proper permissions—especially if you want slash commands and moderation features to work smoothly.
WidgetBot will not work unless the bot is added to your server.(WidgetBot Documentation, WidgetBot)
3. Pick the Right Integration Format
WidgetBot offers several embed formats:
- Crate (recommended)
A compact chat widget that lives in the corner of your site, supports notifications, and includes a robust embed API.(WidgetBot) - html‑embed
A lightweight, framework-agnostic iframe wrapper, great for straightforward HTML/JavaScript sites.(npm, WidgetBot) - react‑embed
Perfect if you’re using React—provides type-safe, component-based integration.(npm, WidgetBot) - iframe
A fallback-only option—doesn’t support the embed API and may have usability issues.(WidgetBot Documentation)
4. Embedding WidgetBot into Your Games Site
For Basic HTML Sites (“html-embed”)
<body>
<!– Place where you want the chatbox –>
<widgetbot
server=”YOUR_DISCORD_SERVER_ID”
channel=”YOUR_CHANNEL_ID”
id=”widgetbot-embed”
width=”350″
height=”500″
></widgetbot>
<script src=”https://cdn.jsdelivr.net/npm/@widgetbot/html-embed”></script>
<script>
const embed = document.getElementById(‘widgetbot-embed’);
embed.on(‘signIn’, data => {
console.log(`Signed in as ${data.name}`);
});
// Optionally send a welcome message:
// embed.emit(‘sendMessage’, ‘Welcome to the game chat!’);
</script>
</body>
For React-Based Sites (“react-embed”)
import WidgetBot, { API } from ‘@widgetbot/react-embed’;
function App() {
return (
<WidgetBot
server=”YOUR_DISCORD_SERVER_ID”
channel=”YOUR_CHANNEL_ID”
onAPI={api => {
api.on(‘signIn’, user => console.log(`Signed in as ${user.name}`));
// api.emit(‘sendMessage’, ‘Hello gamers!’);
}}
/>
);
}
export default App;
(npm)
Crate Widget Integration
<script src=”https://cdn.jsdelivr.net/npm/@widgetbot/crate@3″ async></script>
<script>
new Crate({
server: ‘YOUR_DISCORD_SERVER_ID’,
channel: ‘YOUR_CHANNEL_ID’
})
.on(‘signIn’, user => console.log(`Guest signed in as ${user.name}`))
// .emit(‘sendMessage’, ‘Hello from Crate!’);
</script>
5. Advanced Use Cases
Mobile Responsiveness
Some platforms have noted that the WidgetBot icon may overlap site content on mobile:
One user said: “I am using Flarum forum software… the icon covers up important information on mobile.”
Custom CSS or mobile-detection logic may be required to hide or reposition the widget on small screens.(Reddit)
Include Structured Data
Add a FAQ section structured with JSON‑LD to surface in search features.
Engage Readers
Offer code examples, images, and community quotes to boost engagement and readability.
7. Community & Real‑World Tips
- Users embedding WidgetBot via Next.js often face errors (e.g., ESlint syntax complaints).
“If I follow the docs for just a regular HTML file it works perfectly but in a .js file I get ESlint errors.”(Reddit)
Workarounds include using dynamic imports, disabling strict syntax linting for those lines, or wrapping the script in a safe <Script> component.
- For mobile layout issues: apply targeted CSS media queries to show/hide or reposition the widget.
8. Final SEO‑Rich Breakdown
| Step | Action |
| 1. | Add WidgetBot to your Discord server (essential for functionality). |
| 2. | Choose integration type: Crate, html‑embed, react‑embed. |
| 3. | Embed the required code (JS or component) on your site. |
| 4. | Add handlers (onAPI/on(signIn), send welcome messages). |
| 5. | Test thoroughly on desktop and mobile. |
| 6. | Optimize surrounding content for SEO, user intent, readability. |
| 7. | Address integration quirks (like mobile coverage or framework conflicts). |
Conclusion
Embedding WidgetBot into your unblocked games site isn’t just about chat—it’s about creating a thriving, engaged community. Choose the format that fits your tech stack, embed the widget cleanly, and don’t forget mobile and SEO optimization.
Would you like help generating FAQ microdata, or crafting a responsive mobile layout specifically for your embed code? Let me know—I’m happy to refine further!