Put Discord invites on your website

Discord links guide

What you get (honestly)

GameSignal is web hosting for your community site. Templates ship with Discord-ready buttons and CTAs: header Discord links, “Join Discord” sections, footer links, sometimes whitelist sidebars. Those elements become useful when discord.invite is your invite URL.

What that is not: a full Discord client inside the browser, auto-synced member lists that always work without setup, or a promise that Discord’s widget API will load for every visitor (ad blockers and Discord’s own “Enable Server Widget” setting both matter). For most clans, a clear button that opens discord.gg/… is the feature that converts players. Treat anything beyond that as optional polish.

Create a stable invite

1. In Discord, open Server Settings → Invites (or create an invite from a public welcome channel).
2. Prefer an invite that does not expire in a day. A permanent or long-lived invite saves you from broken buttons after a wipe week.
3. Point it at a channel new players should see first — rules, welcome, or applications — not a staff-only room.
4. Copy the full URL, for example https://discord.gg/your-code.

If you rotate invites for security, update config.js the same day. Old marketing graphics that hardcode a different invite will still send people to the wrong place — search the HTML for discord.gg after you change config.

Edit js/config.js

Open your template’s js/config.js in VS Code. Find the discord block:

discord: {
  enabled: true,
  invite: "https://discord.gg/your-invite",
  serverId: ""   // optional — only if you use a widget mount
},

Set invite to your URL. Keep the quotes. Leave enabled: true unless your template docs say otherwise. Do not edit js/site-config.js — that file applies the config across pages. Full context for config fields is in Edit Templates.

Save, open index.html locally, click every Discord button you can see. If one still shows discord.gg/example, that link was hardcoded without the config attribute — replace its href or add the same pattern neighbouring buttons use.

How buttons pick it up

Templates typically mark Discord anchors with something like data-config-href="discord.invite". On load, site-config.js rewrites those hrefs from your config. That is why one edit updates header, hero CTA, whitelist rail and footer together.

If you add a new button yourself, copy an existing Discord button markup instead of inventing a one-off URL. Consistency beats three different invite codes floating around the site.

Button labels can stay short: “Discord”, “Join Discord”, “Open Discord”. Long promises (“Live chat with 4,000 members now”) age poorly when the server is quiet.

Optional serverId / widget

Some templates reserve a serverId field for Discord’s official server widget (member count / online preview). To use it you generally need:

• Server Settings → Widget → Enable Server Widget
• The numeric server ID pasted into discord.serverId
• HTML that actually mounts the widget where the design expects it

If your template has no widget mount, filling serverId alone does nothing visible — and that is fine. A working invite button is enough. We do not claim every GameSignal design embeds a live Discord panel by default.

Never paste bot tokens, webhook secrets or staff channel IDs into public config.js. Invites and optional public widget IDs are the only Discord-related values that belong in front-end config.

Test checklist

• discord.invite is your real URL (not /example)
• Header Discord button opens the right server
• Home CTA and footer Discord links match
• Whitelist / staff “Contact” Discord buttons match (if present)
• Invite still works in a private browser window
• Files uploaded to GameSignal hosting and hard-refreshed

Questions about domains or plans? See the FAQ. Browse designs on Websites.

Related guides

• Whitelist forms — send applicants into Discord
• Wipe schedules — keep Discord announcements and the site aligned
• All guides