(Obsolète) Afficher un "Widget Discord" dans un bouton déroulant

dax · Novembre 8, 2017, 8:34

May 2022
This has has now been converted into a theme component by @keegan

Discourse Discord Widget

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.

Desktop View

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

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

<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',

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).
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)

<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

<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:

<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

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

<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)

<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) 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:

gcharang · Novembre 2, 2020, 10:03

In

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

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

dax · Novembre 2, 2020, 8:57

Done.

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

darkstorm · Juillet 9, 2021, 12:02

Updated initial post to fix broken widget

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

AquaL1te · Août 24, 2021, 3:37

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

Zup · Août 24, 2021, 9:00

It could be a TC I reckon.

brentoshiro · Mars 30, 2022, 12:23

Bonjour, merci d’avoir développé ce widget ! Je viens de l’ajouter à notre forum en suivant vos instructions et bien que le widget s’affiche correctement, il ne semble pas se connecter (essaie de charger indéfiniment… voir la capture d’écran ci-dessous). J’ai vérifié trois fois que le code copié était 100% exact, mais il semble toujours ne pas se charger correctement. J’ai également ajouté correctement l’ID du serveur Discord dans toutes les sections référencées.

Toute aide serait grandement appréciée !

merefield · Mars 30, 2022, 5:13

Copier et coller tout ce code est sans doute un peu désordonné et sujet aux erreurs ? Quelqu’un avec suffisamment de temps et d’intérêt personnel devrait envisager de publier cela sous forme de composant de thème et d’appliquer les corrections appropriées (et de publier un sujet à ce sujet dans Theme)

XXPX1 · Avril 1, 2022, 3:52

Assurez-vous d’avoir activé le « Widget serveur » dans Discord sous Paramètres du serveur > Widget.

keegan · Mai 27, 2022, 7:42

Salut tout le monde, j’ai pris ce guide génial et je l’ai empaqueté dans un composant de thème facile à installer :

ReenigneArcher · Octobre 25, 2022, 11:10

Merci pour ce guide. Je l’ai légèrement modifié et intégré WidgetBot. J’espérais utiliser le crate WidgetBot au lieu d’un iframe, mais j’ai eu des problèmes pour charger du javascript externe, donc cela fera l’affaire pour le moment.

J’ai également remarqué quelques problèmes. La méthode pour le seul utilisateur connecté n’a pas fonctionné et l’icône s’affichait même lorsque l’utilisateur était déconnecté. J’ai donc utilisé la méthode du niveau de confiance avec >= 1. L’autre problème est que la largeur ne semble pas dépasser 350 (je ne pense pas que ce soit un problème de cache car j’ai essayé en mode privé et avec différents navigateurs). De plus, la hauteur semble s’ajuster correctement.

<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>

dax · Octobre 26, 2022, 4:50

Ceci est déprécié au profit de

User.currentProp

Alors vous devriez pouvoir utiliser >=0 puisque les utilisateurs avec un niveau de confiance 0 sont également des utilisateurs enregistrés.

Si je me souviens bien, 350 était codé en dur dans le code de l’iframe Discord ?

ReenigneArcher · Octobre 26, 2022, 5:46

Bonne idée. Je suis encore nouveau sur Discourse et en mode « bootstrap » où tout le monde est au niveau 1. Je vais l’ajuster.

C’est exact, mais je l’ai changé…

                    "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 n’a certainement aucune limite sur la taille de l’iframe… image de mon site web.

Sujet		Réponses	Vues
Request widgetbot.io Feature	2	1119	Octobre 12, 2021
Can anyone help me to add chat option of discord on forum? Support	12	1634	Août 25, 2022
Discourse Trust Levels for Discord Dev	61	9937	Novembre 29, 2019
Discord Bot Construction Kit :robot: Plugin pavilion	139	20211	Juin 13, 2024
Several settings not matching docs and UI bugs Support	10	769	Octobre 26, 2022