Skip to main content

Disqus Boards

Boards, a user forum functionality from Disqus

Written by Ryan

Introducing Disqus Boards, a new offering from Disqus that provides a full forum functionality that can be installed on your site. Once installed, it will allow your users to create their own discussions and interact with each other on your site, even when you haven't published any new content.
​
​Please note that Boards is a Business tier product, and publishers will need to be on the Business or Preferred tiers to be able to use Disqus Boards. In addition, manual setup steps will need to be configured by our team before you can begin installation. If you are already on one of these plans, please reach out to your account manager or support to get set up. If you are not yet on the Business plan, you may reach out to us here to get more information on this plan.


How Boards Works

Once installed, Boards will live on a set page of your site (like website.com/boards), and will have the ability to create new URLs, one for each user-created discussion.
​

The base Boards page will show a list of created discussions, including the original poster, a preview of the discussion content, the comments and views each discussion has received, and the latest activity. A list of discussion categories will appear on the left side of the page, allowing users to browse different discussions by content and type. Users can also toggle between different view formats, and can select a sort order for discussions.
​
When logged in with their Disqus account, users can then either participate in existing discussions, or start their own.

Clicking into an existing discussion will show the original discussion content at the top of the page, followed by the Disqus commenting embed for users to contribute to the discussion.
​


All responses in the discussion will be governed by your existing moderation rules, and will be moderated in your regular Disqus admin panel. If Reactions are enabled for your regular Disqus comment sections, they will also appear for your Boards discussions.
​

When users create a new discussion, they'll be prompted to add the category that best applies to their discussion, and then add their title and content.
​


​When they've finished adding the category, title, and body and click Post Discussion, the new discussion will appear in the board automatically, unless Boards moderation rules are set up to require pre-approval for new discussions.


​

Boards Settings and Discussion Moderation

Once you've installed Boards and our team has gotten you set up, you'll have a new Disqus Boards header appear in the top navigation bar of your Disqus Admin panel.
​

Clicking this will take you to your Boards Settings and Discussion Moderation panel. The Disqus Boards admin will only be for Boards configuration settings, and for moderating the Discussions themselves. All other functions will be completed through your regular Disqus Comments Admin.

Once in the Boards Admin, there are 3 sections in the header: Site, Content, and Moderation.

Site

The Site page of the Boards admin will contain layout and display settings, content limits, Discussion pre-moderation, and Lifecycle settings.

Display Settings

For the Display name, you can choose between Boards, Forums, or a Custom value of your choosing. This selection will appear in the top left header on your Boards landing page, above your Categories.
​

For Default Sort, you can choose between Trending, New, or Top. Trending will prioritize discussions that are currently active, while New will surface new discussions in the order they were created, regardless of activity levels. Top will prioritize the discussions that have the all-time highest engagement.
​
For Default view, there are two options: Card or List. Card view will show an image with each discussion where applicable, or a colorful box when no image has been supplied, and will display less discussion details in the view. List view will not show images, but will show more details on each discussion. On this page there is a preview section that will show you roughly how your boards will look when configured with either of these views.

Content Limits

Content limits settings will allow you to set minimum and maximum character limits for the Discussion title, as well as a max characters limit for the content of each discussion.

Moderation Settings

This section will allow you to toggle whether you want new discussions to require explicit approval from a moderator before they appear publicly.

All replies to a discussion are treated as regular comments, and are moderated through the Comments Admin. Additionally, Boards will use all of your existing moderation settings from your Comments integration, including your Banned User list and Restricted Words. If you need to make any updates to these, you can click over to those options directly from the links in the Moderation Settings section.

Lifecycle


This section will allow you to set discussions to auto-lock after a certain number of days. This can be helpful if you want to encourage users to continue creating new, fresh discussions for the group. From this section you can also set a discussion cooldown period, forcing a non-moderator to wait X minutes after discussion creation before they can create their next discussion. This can help give some breathing room for other members of the community to speak up.

Content

The Content page of the Boards admin will allow you to manage your Categories and your Featured Discussions.

Categories and Groups

From this page, you can add new categories, setting the category name, the slug (what will appear in the URL when a user is viewing the discussions in this category), and optionally add a description for each category.
​
Categories can also be grouped together, but each category can only be added to one group at a time. New Groups can be added in the left sidebar of the Categories section. Groups are not clickable to users, but serve to organize the categories into different sub-sections for easy navigation.

Featured Discussions

All Featured discussions will appear in the list here. You can reorder them in this section so that your favorite discussions appear at the top of the list to users.

Moderation

The Moderation page of the Boards admin will be where you can Approve/Unapprove discussions. From this page, you can also Hide, Close, Pin, or Feature any of your discussions.


If you require new discussions to be approved, you can click into the "Pending Review" header in this page to review all new discussions that have been submitted. You can also view discussions by Category, or search for them using the search bar in the top right corner of the page. You may apply an action to multiple discussions by using the checkboxes to the left of the discussion title, or clicking "Select All".

Installing Boards

The first step for installing Boards is getting in touch with our team for initial setup steps. If you are on the Preferred or Business plans, please reach out to your account manager. If not on one of these plans please reach out to us at publisher-success@disqus.com or through our Disqus For Business form. Please let us know which site or sites you'll be looking to set Boards up for.
​
Our team will complete the Disqus-side setup steps, including creating a new Boards-specific shortname for each site that you'll be enabling Boards for. Typically the new shortname value will have a "boards-" prefix before the existing site's shortname value, such as "boards-SHORTNAME".
​
We will confirm once the new shortname has been created and our steps have been completed. Once that's done, you can then proceed to installing the Boards code on your site. There will also be server-side configuration steps required for some installation types. Please see our Configuring Boards section below for more information.
​
As mentioned, you'll need a dedicated landing URL for Boards on your site. Disqus will create additional URLs branching off from this base URL to create links to the Category and Discussion pages.
​

If your landing page URL is:

website.com/boards

then a category page would live at:

website.com/boards/category/category-slug

and a discussion page would live at:

website.com/boards/discussion/discussion-title


​

Installation Code

Once your landing page has been created, you'll want to add the Boards installation code below and amend the necessary parameters in the code.
​
Please be sure to update the <shortname> piece of your code with your new Boards shortname, and update the this.basePath line to match the slug of your landing page URL. For example, if your landing page url is website.com/boards, then your basePath value would be "/boards".

<div id="disqus-boards-host"></div>
<script>
window.disqus_boards_config = function () {
this.routerMode = 'history'
this.basePath = '/WHEREBOARDSLIVES' // update to match your route
}
</script>
<script>
(function() {
if (document.getElementById('disqus_boards_script')) return;
var d = document, s = d.createElement('script');
s.id = 'disqus_boards_script';
s.src = 'https://<shortname>.disqus.com/boards.js';
(d.head || d.body).appendChild(s);
})();
</script>

If you are using Boards in History Mode like the code above, it will not be fully functional until the Configuration steps below have been completed.
​

Configuring Boards

In the code above, you'll notice the following parameter in the code:
​this.routerMode = 'history'


This indicates that Boards is installed in History Mode. This is the recommended installation method for most publishers, as it preserves direct comment linking and creates clean, SEO-friendly discussion URLs and social activity previews. However, it does require a small amount server-side configuration, which won't be possible for all kinds of sites. For sites that cannot setup the server configuration needed for History Mode, we provide an alternate installation method called Hash Mode. Hash Mode will have a simpler installation, but will lose some functionality and the ability to link directly to any discussion or comment.

If you are installing Boards to a WordPress site, please review the History Mode and Hash Mode sections below, and then proceed to our Boards WordPress Installation Directions. If you are implementing Boards with SSO login, please see our Using Single-Sign-On with Boards article.

History Mode

This is the recommended mode to run Boards, and will give full functionality.
​
After installing the code on your Boards landing page, you'll want to configure your History routing on a server / SPA that you control with a reserved a URL prefix on your site exclusively for boards (e.g. /boards), and either of the following behaviors set up:

  • your server serves the boards page's index.html for every request under /boards/* (catch-all rewrite), or

  • your SPA router yields cleanly to a non-React route under /boards/*.


For the Server fallback, here are examples of how this can be developed:

  • Next.js / Remix / React Router (host SPA): add a catch-all dynamic route that mounts <div id="disqus-boards-host"></div>.

  • Express / Caddy / nginx: rewrite /boards/* → /boards/index.html.

  • Vercel / Netlify (built-in SPA fallback): add a rewrite rule to that effect.

You can use a deeper basePath if desired, just ensure that your server fallback covers it. For example, if your site's landing page is:

website.com/community/forum

Then your basePath line would be: this.basePath = '/community/forum'
​

History Routing on GitHub Pages (or another static host) using the 404.html trick

History mode is achievable on a static host that has no built-in SPA fallback. The pattern is rafgraph/spa-github-pages: GitHub Pages serves /404.html for unknown URLs, a script there encodes the original path into a query string and redirects to the boards-hosting page, and an unwrap script in that page's <head> rewrites the address bar via history.replaceState before the snippet boots.

 <!-- /forums/index.html -->
<head>
<script>
// Restore deep paths handed off by /404.html before any other script.
// Adapted from https://github.com/rafgraph/spa-github-pages.
(function (l) {
if (l.search[1] === '/') {
var decoded = l.search
.slice(1)
.split('&')
.map(function (s) { return s.replace(/~and~/g, '&'); })
.join('?');
window.history.replaceState(null, null, l.pathname.slice(0, -1) + decoded + l.hash);
}
})(window.location);
</script>
</head>
<body>
<div id="disqus-boards-host"></div>
<script>
window.disqus_boards_config = function () {
this.routerMode = 'history'
// Include the project subdirectory — window.location.pathname does too.
this.basePath = '/<repo>/forums'
}
</script>
<script>/* standard boards snippet */</script>
</body>

In this case, basePath must include the project subdirectory because window.location.pathname on a GH-Pages project site does too (e.g. /<repo>/forums/discussion/foo, not /forums/discussion/foo). React Router compares the full pathname against basename, so the basename has to match.

Caveats for this setup specifically:

  • The first HTTP response for any deep URL is 404 (with the redirect script in its body). Browsers run the script and unwrap; modern crawlers and link unfurlers usually follow, but less sophisticated ones may not.

  • The 404 page should only redirect when the path is under your boards prefix - otherwise unrelated 404s loop. Guard with a prefix check.

Hash Mode

Use hash mode if none of the history-mode setups above apply — typically because you can't reconfigure the host server, can't ship the 404.html workaround, or are pasting boards into arbitrary pages with no reserved prefix.

There are a few ways that Hash Mode can be implemented.


Default Hash Mode Embed: Snippet on an article, sidebar, or footer

This is the dominant fallback case. In this case, Boards is mounted somewhere on the publisher page and you don't want (or can't have) the publisher's address bar change as users move between discussions.

<div id="disqus-boards-host"></div> 
<script>
(function() {
if (document.getElementById('disqus_boards_script')) return;
var d = document, s = d.createElement('script');
s.id = 'disqus_boards_script';
s.src = 'https://<shortname>.disqus.com/boards.js';
(d.head || d.body).appendChild(s);
})();
</script>

With this snippet, no config block needed. Hash routing keeps every boards route in #/... and the publisher URL is untouched.
​

Dedicated page on a static / CDN host without the 404.html workaround

You have a real page at /forums/ that contains the snippet, the host has no SPA fallback, and you don't want to install the 404.html redirect. Same snippet as case 4 — hash routing turns /forums/discussion/foo into /forums/#/discussion/foo, which the static host serves correctly because it always loads /forums/index.html.

If you'd rather get the history-mode feature set, install the 404.html workaround and use the instructions from the History Routing on Github Pages section.
​

Hash Mode with Cross-Page Links into Boards

You're still in hash mode, but the publisher's site has more than one page and some of those other pages render links into specific boards routes (e.g. a "Latest discussions" rail in the global footer, a search results page, a sitewide nav, a marketing email). Set basePath to the page that hosts boards so buildAppHref produces fully-qualified /<basePath>/#/<route> links, and so off-page hand-built links follow the same convention.
​
​On the boards-hosting page (/forums/index.html):

<!doctype html>
<html>
<body>
<nav><a href="/">Home</a></nav>

<div id="disqus-boards-host"></div>
<script>
window.disqus_boards_config = function () {
// routerMode stays at the default 'hash'.
// Tell the boards bundle that this page is mounted at /forums,
// so its internal links are absolute (/forums/#/discussion/foo)
// and remain valid even if the user shares or bookmarks them.
this.basePath = '/forums'
}
</script>
<script>
(function() {
if (document.getElementById('disqus_boards_script')) return;
var d = document, s = d.createElement('script');
s.id = 'disqus_boards_script';
s.src = 'https://<shortname>.disqus.com/boards.js';
(d.head || d.body).appendChild(s);
})();
</script>
</body>
</html>

On any other page that wants to deep-link into a discussion (e.g. /index.html rendering a "Latest" rail):

<section class="latest">
<h2>Latest discussions</h2>
<ul>
<!-- Convention: <basePath>/#/discussion/<slug> -->
<li><a href="/forums/#/discussion/who-is-everyone-else">Who is everyone else?</a></li>
<li><a href="/forums/#/discussion/welcome-thread">Welcome thread</a></li>
<li><a href="/forums/#/category/announcements">All announcements</a></li>
</ul>
</section>

Clicking those links from the home page does a full page load of /forums/, the boards bundle mounts, then <HashRouter> reads #/discussion/who-is-everyone-else and lands on that discussion - same as if the user navigated to it from inside the widget.

You still don't need server fallback for this - only the path-prefix-on-link convention changes. And because hash routing is still in effect, basePath does not stop the widget from mounting elsewhere; if you copy the snippet to a different page by mistake, boards will render there too.

Common Mistakes

If you've installed and configured Boards and something isn't working as expected, please check the following scenarios to ensure that your configuration is set up correctly.

  • Setting routerMode: 'history' without configuring server fallback. First reload on a deep route 404s. Test by opening a discussion, then hard-refreshing the address-bar URL.

  • Setting basePath to a path that doesn't actually exist in history mode. The boards router won't match and the widget renders nothing. The address-bar URL must start with basePath for boards to mount.

  • Forgetting the project subdirectory when configuring history mode on a GH-Pages project site. basePath must be /<repo>/<prefix>, not /<prefix>.

  • Setting basePath in hash mode and expecting it to constrain where the widget mounts. It doesn't — that's history-mode-only behavior. In hash mode the widget mounts wherever the snippet runs.

  • Trailing or doubled slashes. The runtime normalises ('/boards/', 'boards', '/boards' are all the same to the router) but the admin drift comparison is exact, so pick one form and stick with it.

  • Trying to deep-link to a specific comment in hash mode. …/forums/#comment-X doesn't work because the boards route already owns the URL fragment. Switch to history mode if you need …/forums/discussion/<slug>#comment-X to work.

  • Mixing basePath with the bundle URL. They're orthogonal. basePath is a publisher routing decision; bundleUrl is a CDN/origin decision driven by tempest's server_side payload.

How to Verify Successful Configuration

Open the embed and navigate into a discussion. The address bar should change in the way you expect (hash fragment vs path).

  1. Hard-refresh the page on that deep URL. It must render boards on the same discussion. If it 404s in history mode, your server fallback is wrong (or the GH-Pages 404.html trick isn't installed correctly).

  2. Open DevTools → Network on the first API call from boards. The request headers should include X-Boards-Client-BasePath: <your basePath>. If the moderator admin shows a "base path drift" banner, the value here doesn't match what's saved server-side.

  3. If you opted into history mode for #comment-X deep linking: paste a URL of the form <base>/discussion/<slug>#comment-<id> and confirm the embedded Disqus iframe scrolls to that comment.

Did this answer your question?