Website Widget

Embed a "Login with Discord" button on any website. Members verify through your site and receive their Discord role automatically.

Overview

The Restore Hub widget enables Discord OAuth2 on external websites. Instead of sending members to a separate verification URL, you can embed a button directly on your site. When a member clicks it, a popup opens for Discord authorization. After authorizing, the popup closes and the member receives their verified role — all without leaving your website.

This is useful for:

• Game launchers or dashboards that want Discord SSO
• Community websites that gate content behind Discord membership
• Storefronts that verify buyers are in your Discord server

Installation

NPM Package

npm install @restorehub/widget

import { RestoreHubWidget } from "@restorehub/widget";

const widget = new RestoreHubWidget({
  serverSlug: "your-server-slug",
  onSuccess: (user) => {
    console.log("Verified:", user.discordUsername);
  },
  onError: (err) => {
    console.error("Verification failed:", err);
  },
});

widget.mount("#verify-button-container");

Script Tag (no build step)

<script src="https://cdn.restorehub.net/widget.js"></script>
<div id="rh-widget" data-slug="your-server-slug"></div>

Configuration Options

| Option | Type | Default | Description |
|---|---|---|---|
| serverSlug | string | required | Your server's verification slug |
| buttonText | string | "Login with Discord" | Text displayed on the button |
| buttonColor | string | "#5865F2" | Button background color (hex) |
| textColor | string | "#FFFFFF" | Button text color (hex) |
| theme | "light" | "dark" | "dark" | Widget theme |
| onSuccess | function | — | Called with user data after successful verification |
| onError | function | — | Called with error if verification fails |
| onClose | function | — | Called when popup is closed without completing |

Enabling the Widget in Your Dashboard

Before the widget works, you must enable it in your server settings:

1. Go to server settings → Widget tab.
2. Toggle "Enable Widget" on.
3. Add your website's domain to the Allowed Origins list (e.g., https://yoursite.com). This prevents unauthorized sites from embedding your widget.
4. Copy the server slug displayed and use it in the widget configuration.
5. Optionally configure a custom role to assign via the widget (separate from the main verified role).

Warning: Always add your domain to Allowed Origins. Without this, cross-origin requests from your site will be blocked by the API.

Security

The widget uses the same security pipeline as standard verification — VPN detection, alt detection, firewall rules, and captcha all apply. The only difference is the entry point (your website instead of a Restore Hub URL).

Popup blockers can interfere with the widget. The widget handles this by showing a fallback link if the popup is blocked.

What Data Is Returned

On success, the `onSuccess` callback receives:

{
  discordUserId: string;
  discordUsername: string;
  email: string | null;
  avatar: string | null;
  verified: boolean; // true if role was assigned
}