# (Deprecated) Display a "Discord Widget" in a dropdown button

**URL:** https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719
**Category:** Integrations
**Tags:** how-to
**Created:** [November 8, 2017, 8:34pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719 "2017-11-08T20:34:16Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 8, 2017, 8:34pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/1 "2017-11-08T20:34:16Z")

</div>

> **May 2022**  
> This has has now been converted into a theme component by @keegan 🎉🎈
> 
> [Discourse Discord Widget](https://meta.discourse.org/t/discourse-discord-widget/228270)

The Discord Widget does its job, but it’s really cumbersome and generally it’s an eyesore with the style of Discourse.  
In the past few months I had tried to implement it everywhere (after-header, body, footer) but every time I found it too big and too customized to be permanently seen.  
That’s why, in the end, I decided that a dropdown button would be the best solution. Users can decide if open the widget (maybe only to see the users online) and close it, or click the Connect button to enter the chat.

 ![discord](https://global.discourse-cdn.com/meta/original/3X/d/9/d951e11b095b4b41d1190b9c4b51bc5ff5225035.gif) ![discord-dark](https://global.discourse-cdn.com/meta/original/3X/c/5/c51ea2b958668ee3ffe0685b7f7ccf9b0fcb500a.gif)

# Desktop View

## Display the button for ALL users (logged in and visitors):

Add this script under `/admin/customize/themes` inside **` Desktop/Head`** tab

```javascript
<script type="text/discourse-plugin" version="0.8">
const { h } = require('virtual-dom');
const { iconNode } = require("discourse-common/lib/icon-library");

api.createWidget('discord-chat-menu', {
  tagName: 'div.discord-panel',

  html() {
    return this.attach('menu-panel', {
      contents: () => h('iframe', {
                        "src": 'https://discordapp.com/widget?id=your-widget-ID&theme=light',
                        "sandbox": "allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts",
                        "width": "350",
                        "height": "500",
                        "allowtransparency": "true",
                        "frameborder": "0",
                        "id": "chatwidget",
                        "name": "chatwidget",}
                    )

    });
  },

  clickOutside() {
    this.sendWidgetAction('toggleDiscordChat');
  }
});
    
api.decorateWidget('header-icons:before', function(helper) {
  const headerState = helper.widget.parentWidget.state;
  return helper.attach('header-dropdown', {
      title: 'Discord Chat',
      icon: 'fab-discord',
      active: headerState.discordChatVisible,
      action: 'toggleDiscordChat',
    });
});

api.decorateWidget('header-icons:after', function(helper) {
  const headerState = helper.widget.parentWidget.state;
    if (headerState.discordChatVisible) {
        return [helper.attach('discord-chat-menu')];
    }
});

api.attachWidgetAction('header', 'toggleDiscordChat', function() {
  this.state.discordChatVisible = !this.state.discordChatVisible;
});

</script>

```

**Make sure to change the Url here:**

- `"src": 'https://discordapp.com/widget?id=your-widget-ID&theme=light',` entering your Server ID in place of `your-widget-ID`. You can find it on Discord in _Server Setting \> Widget \> Server ID_.  
E.g. "`src": 'https://discordapp.com/widget?id=1234567890123&theme=light',`

 ![](https://global.discourse-cdn.com/meta/original/3X/d/f/df1631444ca9040bbef4cd5c9a34a82a37182500.png)

- Inside the Url you can also replace the theme style to make it light (`&theme=light`) or dark (`&theme=dark`).

- Change `"title": "Discord Chat"` as you prefer (e.g. `"title": "my wonderful chat"`)

**Add this script under `/admin/customize/themes` inside ` Desktop/Body` tab** to reload and update the iframe every 1.5 mins (made by @Yuun, see [here](https://meta.discourse.org/t/how-to-display-discord-widget-in-a-dropdown-button/73719/14)).  
Remember to change `https://discordapp.com/widget?id=your-widget-ID&theme=light` with your Url (e.g. `https://discordapp.com/widget?id=1234567890123&theme=light`)

```javascript
<script>
    function reloadIFrame() {
        var disc = document.getElementById("chatwidget");
        if (disc) {
            disc.src="https://discordapp.com/widget?id=your-widget-ID&theme=light";
        }
    }
    window.setInterval("reloadIFrame();", 90000);
</script>

```

## Display the button only to logged in users

```javascript
<script type="text/discourse-plugin" version="0.8">
const { h } = require('virtual-dom');
const { iconNode } = require("discourse-common/lib/icon-library");
const user = require('discourse/models/user').default;
   if (user !== null) {

api.createWidget('discord-chat-menu', {
  tagName: 'div.discord-panel',

  html() {
    return this.attach('menu-panel', {
      contents: () => h('iframe', {
                        "src": 'https://discordapp.com/widget?id=your-widget-ID&theme=light',
                        "width": "350",
                        "height": "500",
                        "allowtransparency": "true",
                        "frameborder": "0",
                        "id": "chatwidget",
                        "name": "chatwidget",}
                    )

    });
  },

  clickOutside() {
    this.sendWidgetAction('toggleDiscordChat');
  }
});

    
api.decorateWidget('header-icons:before', function(helper) {
  const headerState = helper.widget.parentWidget.state;
  return helper.attach('header-dropdown', {
      title: 'Discord Chat',
      icon: 'fab-discord',
      active: headerState.discordChatVisible,
      action: 'toggleDiscordChat',
    });
});

api.decorateWidget('header-icons:after', function(helper) {
  const headerState = helper.widget.parentWidget.state;
    if (headerState.discordChatVisible) {
        return [helper.attach('discord-chat-menu')];
    }
});

api.attachWidgetAction('header', 'toggleDiscordChat', function() {
  this.state.discordChatVisible = !this.state.discordChatVisible;
})};

</script>

```

## Display the button only for users who belong to a certain trust level (and higher or lower - optional)

Change the script in this way:

```javascript
<script type="text/discourse-plugin" version="0.8">
const { h } = require('virtual-dom');
const { iconNode } = require("discourse-common/lib/icon-library");
   var level = User.currentProp("trust_level");
   if (level >=2) { //Change the trust level here

api.createWidget('discord-chat-menu', {
  tagName: 'div.discord-panel',

  html() {
    return this.attach('menu-panel', {
      contents: () => h('iframe', {
                        "src": 'https://discordapp.com/widget?id=your-widget-ID&theme=light',
                        "width": "350",
                        "height": "500",
                        "allowtransparency": "true",
                        "frameborder": "0",
                        "id": "chatwidget",
                        "name": "chatwidget",}
                    )

    });
  },

  clickOutside() {
    this.sendWidgetAction('toggleDiscordChat');
  }
});

    
api.decorateWidget('header-icons:before', function(helper) {
  const headerState = helper.widget.parentWidget.state;
  return helper.attach('header-dropdown', {
      title: 'Discord Chat',
      icon: 'fab-discord',
      active: headerState.discordChatVisible,
      action: 'toggleDiscordChat',
    });
});

api.decorateWidget('header-icons:after', function(helper) {
  const headerState = helper.widget.parentWidget.state;
    if (headerState.discordChatVisible) {
        return [helper.attach('discord-chat-menu')];
    }
});

api.attachWidgetAction('header', 'toggleDiscordChat', function() {
  this.state.discordChatVisible = !this.state.discordChatVisible;
})};

</script>

```

In this case, the button is displayed to all users that belong to trust level 2 or higher (`>=2`). Use only `=2` to display it only for users at trust level 2 (no higher), or (`<=2`) for users that belong to trust level 2 or lower. You can change the trust level (from 0 to 4) as needed. For more information about trust levels read [Understanding Discourse Trust Levels](https://blog.discourse.org/2018/06/understanding-discourse-trust-levels/)

## Display the button only for users who belong to staff (admins + mods) [@Neuferkar]

```javascript
<script type="text/discourse-plugin" version="0.8">
const { h } = require('virtual-dom');
const { iconNode } = require("discourse-common/lib/icon-library");
   const user = User.currentProp(); 
    if (user !== null && user.staff) { 

api.createWidget('discord-chat-menu', {
  tagName: 'div.discord-panel',

  html() {
    return this.attach('menu-panel', {
      contents: () => h('iframe', {
                        "src": 'https://discordapp.com/widget?id=your-widget-ID&theme=light',
                        "width": "350",
                        "height": "500",
                        "allowtransparency": "true",
                        "frameborder": "0",
                        "id": "chatwidget",
                        "name": "chatwidget",}
                    )

    });
  },

  clickOutside() {
    this.sendWidgetAction('toggleDiscordChat');
  }
});

    
api.decorateWidget('header-icons:before', function(helper) {
  const headerState = helper.widget.parentWidget.state;
  return helper.attach('header-dropdown', {
      title: 'Discord Chat',
      icon: 'fab-discord',
      active: headerState.discordChatVisible,
      action: 'toggleDiscordChat',
    });
});

api.decorateWidget('header-icons:after', function(helper) {
  const headerState = helper.widget.parentWidget.state;
    if (headerState.discordChatVisible) {
        return [helper.attach('discord-chat-menu')];
    }
});

api.attachWidgetAction('header', 'toggleDiscordChat', function() {
  this.state.discordChatVisible = !this.state.discordChatVisible;
})};

</script>

```

Change this line `if (user !== null && user.staff)` as you wish to display the button only to admins or only to mods:

- `if (user !== null && user.administrator)`
- `if (user !== null && user.moderator)`

## Display the button only to members of a primary group (e.g. “footeam”) [@Neuferkar and @cpradio]

Be sure to target the `primary_group_name` correctly (see [here](https://meta.discourse.org/t/how-to-display-discord-widget-in-a-dropdown-button/73719/16))

```javascript
<script type="text/discourse-plugin" version="0.8">
const { h } = require('virtual-dom');
const { iconNode } = require("discourse-common/lib/icon-library");
const user = User.currentProp(); 
if (user !== null && user.primary_group_name === "footeam") { 

api.createWidget('discord-chat-menu', {
  tagName: 'div.discord-panel',

  html() {
    return this.attach('menu-panel', {
      contents: () => h('iframe', {
                        "src": 'https://discordapp.com/widget?id=your-widget-ID&theme=light',
                        "width": "350",
                        "height": "500",
                        "allowtransparency": "true",
                        "frameborder": "0",
                        "id": "chatwidget",
                        "name": "chatwidget",}
                    )

    });
  },

  clickOutside() {
    this.sendWidgetAction('toggleDiscordChat');
  }
});

    
api.decorateWidget('header-icons:before', function(helper) {
  const headerState = helper.widget.parentWidget.state;
  return helper.attach('header-dropdown', {
      title: 'Discord Chat',
      icon: 'fab-discord',
      active: headerState.discordChatVisible,
      action: 'toggleDiscordChat',
    });
});

api.decorateWidget('header-icons:after', function(helper) {
  const headerState = helper.widget.parentWidget.state;
    if (headerState.discordChatVisible) {
        return [helper.attach('discord-chat-menu')];
    }
});

api.attachWidgetAction('header', 'toggleDiscordChat', function() {
  this.state.discordChatVisible = !this.state.discordChatVisible;
})};

</script>

```

* * *

# Mobile View

For mobile I use an icon with an invite Url to my server since on phones there is a cool Discord App to install.

Just add to your site the [Custom Header Links (icons)](https://meta.discourse.org/t/iconified-header-links/86307) theme component and enter in the theme settings:

- _Header links_: `Mobile-only link,fab-discord,https://discord.gg/INVITE_ID,vmo,blank`
- _Svg icons_: `fab-discord`

Remember to generate an invite of infinite duration, so it will always be valid and you will not have to change it again and make sure to update the Url from `https://discord.gg/INVITE_ID` to your real invite ID:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/0/00e6db523e2af6a3b0cd6b06d6e8acdc201023ca.png) ![image](https://global.discourse-cdn.com/meta/original/3X/2/c/2c3e27ea9de6ce0acbf941e57f002598089ccc64.png)

---

<div class="post-metadata">

### Author: ![gcharang](https://avatars.discourse-cdn.com/v4/letter/g/ac91a4/32.png) [@gcharang](https://meta.discourse.org/u/gcharang)
#### Post date: [November 2, 2020, 10:03am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/57 "2020-11-02T10:03:34Z")

</div>

In

```plaintext
helper.attach('header-dropdown', {
      title: 'Discord Chat',
      icon: 'discord',
      active: headerState.discordChatVisible,
      action: 'toggleDiscordChat',
    });

```

, `icon: 'discord'` should be changed to `icon: 'fab-discord'`

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [November 2, 2020, 8:57pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/58 "2020-11-02T20:57:41Z")

</div>

Done.

The guide is a wiki, feel free to edit and improve it!

---

<div class="post-metadata">

### Author: ![darkstorm](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/darkstorm/32/225335_2.png) [@darkstorm](https://meta.discourse.org/u/darkstorm)
#### Post date: [July 9, 2021, 12:02am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/63 "2021-07-09T00:02:05Z")

</div>

Updated initial post to fix broken widget

`"sandbox": "allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts",`

---

<div class="post-metadata">

### Author: ![AquaL1te](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/aqual1te/32/201966_2.png) [@AquaL1te](https://meta.discourse.org/u/AquaL1te)
#### Post date: [August 24, 2021, 3:37am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/64 "2021-08-24T03:37:23Z")

</div>

Are there plans to make this into an official plugin? It will be easier to maintain it that way. Thanks for sharing this!

---

<div class="post-metadata">

### Author: ![Zup](https://avatars.discourse-cdn.com/v4/letter/z/c37758/32.png) [@Zup](https://meta.discourse.org/u/Zup)
#### Post date: [August 24, 2021, 9:00am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/65 "2021-08-24T09:00:23Z")

</div>

It could be a TC I reckon.

---

<div class="post-metadata">

### Author: ![brentoshiro](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/brentoshiro/32/212771_2.png) [@brentoshiro](https://meta.discourse.org/u/brentoshiro)
#### Post date: [March 30, 2022, 12:23am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/70 "2022-03-30T00:23:14Z")

</div>

Hi, thanks for developing this widget! I just added to our forum following your instructions and while the widget shows up properly, it doesn’t seem connect (endlessly tries to load… see screenshot below). I triple-checked that the copied code was 100% accurate but it still seems to not load properly. I also added the Discord server ID properly in all referenced sections.

Any help would be greatly appreciated!

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/8/78a4a2192b30ae7d7c78028c7aaa040b3ccb6199.png)

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [March 30, 2022, 5:13pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/71 "2022-03-30T17:13:06Z")

</div>

Copying and pasting all this code is arguably a bit messy and prone to error? Someone with enough time & self-interest should consider publishing this as a Theme Component and apply fixes as appropriate (and post a Topic for it in #Customization > Theme)

---

<div class="post-metadata">

### Author: ![XXPX1](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/xxpx1/32/255237_2.png) [@XXPX1](https://meta.discourse.org/u/XXPX1)
#### Post date: [April 1, 2022, 3:52am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/72 "2022-04-01T03:52:54Z")

</div>

Make sure that you enabled “Server Widget” in Discord under Server Settings \> Widget

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/c/ac419393f66bf2a8f2c1767b74e0d3f21fbb3326.png)

---

<div class="post-metadata">

### Author: ![keegan](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/keegan/32/383395_2.png) [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [May 27, 2022, 7:42pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/73 "2022-05-27T19:42:38Z")

</div>

Hey guys, I’ve taken this awesome guide and packaged it into an easily installable theme component:

> [@Discourse Discord Widget](https://meta.discourse.org/t/discourse-discord-widget/228270):
>
> clap This component is based on the work of Daniela (@dax)'s post [here](https://meta.discourse.org/t/how-to-display-discord-widget-in-a-dropdown-button/73719) and packages the information into an easily installable theme component. mag Overview This theme component allows you to add a Discord widget to your Discourse forum. gear Configuration & Setup For details on how to setup this theme component read [here](https://github.com/paviliondev/discourse-discord-widget#%EF%B8%8F-configuration--setup). octopus Code Repo [https://github.com/paviliondev/discourse-discord-widget](https://github.com/paviliondev/discourse-discord-widget) Install Theme Component

---

<div class="post-metadata">

### Author: ![ReenigneArcher](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reenignearcher/32/278266_2.png) [@ReenigneArcher](https://meta.discourse.org/u/ReenigneArcher)
#### Post date: [October 25, 2022, 11:10pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/74 "2022-10-25T23:10:50Z")

</div>

Thanks for this guide. I ended up modifying it slightly and embedding [WidgetBot](https://widgetbot.io/). I was hoping to use the WidgetBot crate instead of an iframe, had issues loading external javascript though, so this will do for now.

I also noticed a few issues. The only logged in user method didn’t work and the icon was showing even when logged out. So I used the trust level method with `>= 1`. The other issue is the width doesn’t seem to go larger than 350 (I don’t think it’s a cache issue since I tried in private mode and different browsers). Also, the height does seem to be adjusting properly.

```html
<script type="text/discourse-plugin" version="0.8">
const { h } = require("virtual-dom");
const { iconNode } = require("discourse-common/lib/icon-library");
var level = Discourse.User.currentProp("trust_level");

// ensure user is logged in and of trust level 1 or higher
if (level >= 1) {

    api.createWidget("discord-chat-menu", {
        tagName: "div.discord-panel",

        html() {
            return this.attach("menu-panel", {
                contents: () =>
                    h("iframe", {
                        src: "https://e.widgetbot.io/channels/<server_id>/<channel_id>",
                        sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts",
                        width: "400",
                        height: "500",
                        allowtransparency: "false",
                        frameborder: "0",
                        id: "widgetbot",
                        name: "widgetbot",
                    }),
            });
        },

        clickOutside() {
            this.sendWidgetAction("toggleDiscordChat");
        },
    });

    api.decorateWidget("header-icons:before", function (helper) {
        const headerState = helper.widget.parentWidget.state;
        return helper.attach("header-dropdown", {
            title: "Discord Chat",
            icon: "fab-discord",
            active: headerState.discordChatVisible,
            action: "toggleDiscordChat",
        });
    });

    api.decorateWidget("header-icons:after", function (helper) {
        const headerState = helper.widget.parentWidget.state;
        if (headerState.discordChatVisible) {
            return [helper.attach("discord-chat-menu")];
        }
    });

    api.attachWidgetAction("header", "toggleDiscordChat", function () {
        this.state.discordChatVisible = !this.state.discordChatVisible;
    });
}
</script>

```

 ![image](https://global.discourse-cdn.com/meta/original/4X/a/1/7/a17af4e8084e0673763df924af3ffbdcac301032.png)

---

<div class="post-metadata">

### Author: ![dax](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dax/32/244677_2.png) [@dax](https://meta.discourse.org/u/dax)
#### Post date: [October 26, 2022, 4:50pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/75 "2022-10-26T16:50:21Z")

</div>

> [@ReenigneArcher](#):
>
> ```plaintext
> Discourse.User.currentProp
> 
> ```

This is deprecated in favor of

`User.currentProp`

> [@ReenigneArcher](#):
>
> The only logged in user method didn’t work and the icon was showing even when logged out. So I used the trust level method with `>= 1`

Then you should be able to use `>=0` since also trust level 0 users are registered users.

> [@ReenigneArcher](#):
>
> The other issue is the width doesn’t seem to go larger than 350

If I remember correctly 350 was hardcoded in the Discord iframe code? 🤔

---

<div class="post-metadata">

### Author: ![ReenigneArcher](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/reenignearcher/32/278266_2.png) [@ReenigneArcher](https://meta.discourse.org/u/ReenigneArcher)
#### Post date: [October 26, 2022, 5:46pm UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/76 "2022-10-26T17:46:11Z")

</div>

> [@dax](#):
>
> Then you should be able to use `>=0` since also trust level 0 users are registered users.

Good call. I’m still new to Discourse and in “bootstrap” mode where everyone is level 1. I will adjust it.

> [@dax](#):
>
> If I remember correctly 350 was hardcoded in the Discord iframe code?

Right, but I changed it…

```javascript
                    "iframe", {
                        src: "https://e.widgetbot.io/channels/<server_id>/<channel_id>",
                        sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts",
                        width: "400",
                        height: "500",
                        allowtransparency: "false",
                        frameborder: "0",
                        id: "widgetbot",
                        name: "widgetbot",
                    }

```

WidgetBot certainly has no limit on iframe size… image from my website.

 ![image](https://global.discourse-cdn.com/meta/original/4X/3/9/2/3923bcd1ef0b3264a91e2ede8685f4d1abfe54ff.png)

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [May 25, 2024, 10:16am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/77 "2024-05-25T10:16:31Z")

</div>



---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [May 25, 2024, 10:16am UTC](https://meta.discourse.org/t/deprecated-display-a-discord-widget-in-a-dropdown-button/73719/78 "2024-05-25T10:16:34Z")

</div>