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.
It works for Desktop (for mobile device I use only the icon with a link to the chat)
For ALL users:
Add this script under /admin/customize/themes
inside Desktop/Head
tab
<script>Discourse._registerPluginCode('0.8.9', function (api) {
api.decorateWidget('header-icons:before', function (helper) {
return helper.h('li.dropdown#chat', [helper.h('button.dropdown-toggle#chat-button.icon', {
'attributes': {
"type": "button",
"data-toggle": "dropdown"
} }, helper.h('i.fa.fa-comments-o.chat-button-icon.d-icon')), helper.h('ul.dropdown-menu#chat', [helper.h('li', [helper.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"
})])])]);
});
});</script>
Under Desktop/CSS
#chat.dropdown-menu {
top: 40px; /*because I use a custom header probably you need to change a bit this value*/
left: -185px;
width: 350px;
}
#chatwidget {
border: 1px solid #e9e9e9;
box-shadow: 0 2px 2px rgba(0,0,0,0.25);
}
#chat-button.icon {
background-color: transparent;
border-bottom: 1px solid transparent;
}
#chat-button.icon:hover {
color: #222;
background-color: #e9e9e9;
}
#chat.dropdown.open {
color: #7b7b7b;
background-color: #fff;
border-top: 1px solid #e9e9e9;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
}
Make sure to change the Url here:
-
"src": 'https://discordapp.com/widget?id=your-widget-ID&theme=light',
with your widget URL that you can find on Discord (Server Setting > Widget > Premade Widget). All the other value (widht, height etc…except “id” and “name” that are useful to target with CSS) are displayed inside the script, so you can delete them from the Url.
Display the button only for users who belong to a certain trust level (and higher - optional)
Change the script in this way:
<script>Discourse._registerPluginCode('0.8.9', function (api) {
var level = Discourse.User.currentProp("trust_level");
if (level >=2) { //Change the trust level here
api.decorateWidget('header-icons:before', function (helper) {
return helper.h('li.dropdown#chat', [helper.h('button.dropdown-toggle#chat-button.icon', {
'attributes': {
"type": "button",
"data-toggle": "dropdown"
} }, helper.h('i.fa.fa-comments-o.chat-button-icon.d-icon')), helper.h('ul.dropdown-menu#chat', [helper.h('li', [helper.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"
})])])]);
});
}
});</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). You can change the trust level as needed.
Do not use the script below on a site in production. It works only partially and have some problems that must be fixed
With the script to display the button only for a primary group I have problems instead.
Here the code I’m trying to use:
<script>Discourse._registerPluginCode('0.8.9', function (api) {
var user = Discourse.User.current();
if(user.primary_group_name.toLowerCase() === "footeam") {
api.decorateWidget('header-icons:before', function (helper) {
return helper.h('li.dropdown#chat', [helper.h('button.dropdown-toggle#chat-button.icon', {
'attributes': {
"type": "button",
"data-toggle": "dropdown"
} }, helper.h('i.fa.fa-comments-o.chat-button-icon.d-icon')), helper.h('ul.dropdown-menu#chat', [helper.h('li', [helper.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"
})])])]);
});
}
});</script
It correctly display the button only for the footeam group members, but if I try to log out and reopen the site it does not load anymore and looking in the browser console I can see the “user is null” error.
Probably I miss a variable?
Any help to fix the error is welcome because my knowledge of javascript is still very basic. I have assembled those scripts by digging between the various topics here on Meta and testing them on my site.