Forem Creators and Builders 🌱

Cover image for Integrating Discord with your Forem Instance
Nick Taylor
Nick Taylor

Posted on

Integrating Discord with your Forem Instance

As mentioned in a previous post from the Forem team, Connect is being deprecated.

Add Discord

I decided to use Discord for chat and video conferencing in light of Connect being deprecated.

This is a low tech integration, but good enough for me for now. Discord has APIs, where I could probably build out something with it, but I don't have that kind of time at the moment.

As in my previous post, we're going to build out a custom page.

  1. To add a custom page, navigate to your custom pages in the admin area, e.g. https://your_forem_site_/admin/customization/pages and click on the New Page button.

  2. Fill out the required fields including the Body html field (not the markdown one).

  3. To get the markup for the Discord embed, check out their blog post Add the Discord widget to your site.

  4. Click the Update Page button and you're done!

Discord embed on community.vscodetips.com

The embed displays any audio channels you have as well as any members that are online.

I added some additional markup to size the embed. If you want to see what that looks like, check out the repository for my embeds.

GitHub logo vscodetips / community.vscodetips.com

Assets for community.vscodetips.com

Assets and Resources for community.vscodetips.com

Houses logos, social cards etc for community.vscodetips.com as well as markup for embeds on custom pages.

Discord embedded into community.vscodetips.com

Spotify embedded into community.vscodetips.com




That's great that we have a custom page for Discord, but it needs to be surfaced in the community. I decided to add a left sidebar navigation link for this.

Add/Edit a navigation link admin page

  1. Navigate to https://your_site/admin/customization/navigation_links
  2. Click on the Add navigation link button.
  3. Fill in the name, url, select an icon (I use Feather icons), keep the section as default, and check off Display only when signed in.
  4. Click the Add link button and now you have a link to your Discord integration for logged in users.

Left sidebar of community.vscodetips.com

Shortcomings

The integration is an iframe which is more of a bird's eye view of what's going on your Discord with a Connect call to action button to enter the Discord. It would definitely be awesome to have Discord channels that you can interact with directly in the custom page. As I mentioned at the beginning, at some point when I have time, it'd be cool to use the Discord API to build something more integrated.

It would also be interesting to look into webhooks for Discord as well to have some better integration between the Discord and Forem account.

The left sidebar navigation link is only displayed for logged in users, but the page that it links to is public. This isn't really that big a deal, but it'd be nice to make that page only available to logged in users.

Top comments (0)