Integrate WidgetBot Discord to embed live chat directly on the VitePress website, enhancing user engagement by allowing interaction without leaving the page.

📋 Setup Instructions

What is WidgetBot?

WidgetBot replaces your simple Discord link button with a fully embedded Discord chat widget. Users can now interact with your Discord community directly from the website without leaving the page!

⚡ Quick Setup (5 minutes)

Step 1: Enable Discord Developer Mode

• Open Discord → User Settings → Advanced → Enable "Developer Mode"

Step 2: Get Your Discord IDs

• Right-click your Discord server → Copy ID (this is your serverId)
• Right-click the channel you want to embed → Copy ID (this is your channelId)

Step 3: Add WidgetBot Bot to Your Server

• Visit: https://discord.com/oauth2/authorize?client_id=299881420891881473&scope=bot&permissions=536870912
• Select your server and authorize the bot

Step 4: Update Configuration

Edit .web/docs/.vitepress/widgetbot.config.ts:

export const widgetBotConfig = {
  serverId: 'YOUR_SERVER_ID_HERE',     // ← Replace with your server ID
  channelId: 'YOUR_CHANNEL_ID_HERE',   // ← Replace with your channel ID
  color: '#646cff',
  position: ['bottom', 'right'] as [string, string],
};

Step 5: Test It

cd .web
pnpm install
pnpm dev

Look for the Discord icon in the bottom-right corner! Click it to see your embedded Discord chat.

🎨 Features

For Your Visitors

• 💬 Live Discord chat embedded directly in the website
• 🔔 Notification indicators when new messages arrive
• 📖 Read messages without logging in
• ✍️ Log in with Discord to participate
• 📱 Works on mobile and desktop

For You

• ✅ No backend required - fully client-side
• ✅ Uses your existing Discord infrastructure
• ✅ Free to use
• ✅ Matches your theme colors automatically
• ✅ Zero additional dependencies

🎯 Recommended Channel Setup

1. Create a dedicated channel like #website-chat or #support
2. Make it public so website visitors can see it
3. Pin a welcome message for Discord users
4. Ensure you have active moderators
5. Consider this channel as your public-facing support channel

📚 Full Documentation

Complete setup guide with troubleshooting, customization options, and best practices is available in:
.web/WIDGETBOT_SETUP.md

✅ Build Tested

The integration has been tested and builds successfully:

✓ building client + server bundles...
✓ rendering pages...
✓ generating sitemap...
build complete in 18.07s.

🔧 Customization Examples

Change widget position:

position: ['bottom', 'left']   // Bottom-left
position: ['top', 'right']     // Top-right

Change widget color:

color: '#5865F2'  // Discord brand color
color: '#YOUR_BRAND_COLOR'  // Your custom color

📞 Support Resources

• WidgetBot Documentation: https://docs.widgetbot.io/
• WidgetBot Discord Server: https://discord.gg/zyqZWr2
• Setup Guide: See .web/WIDGETBOT_SETUP.md for detailed instructions

The widget is now integrated and ready to use once you configure your Discord server and channel IDs! 🚀