Introduction
Discord est une plateforme de conversation en ligne utilisée par des millions de personnes dans le monde entier. Avec cet outil, vous pouvez créer votre propre serveur de discussion privé ou public, où vous pouvez discuter avec vos amis, votre famille, vos collègues ou toute autre personne partageant les mêmes intérêts. L’un des avantages de Discord est que vous pouvez facilement intégrer votre serveur à votre site web, votre blog ou votre forum, en créant un embed Discord.
Dans cet article, nous allons vous guider à travers les étapes pour créer un embed Discord en quelques étapes simples. Nous allons vous montrer comment créer un serveur Discord, comment intégrer votre serveur à un site web, comment personnaliser votre embed et comment résoudre les problèmes courants.
Étape 1 : Créer un serveur Discord
La première étape pour créer un embed Discord est de créer un serveur Discord. Si vous n’avez pas encore de serveur Discord, vous pouvez en créer un gratuitement en suivant ces étapes :
- Connectez-vous à Discord.com avec votre compte Discord ou créez un compte si vous n’en avez pas encore.
- Cliquez sur l’icône "+" en haut de la barre latérale gauche.
- Sélectionnez "Créer un serveur".
- Donnez un nom à votre serveur et choisissez une région de serveur (cette option détermine l’emplacement des serveurs Discord utilisés pour héberger votre serveur).
- Cliquez sur "Créer".
Votre serveur Discord est maintenant créé. Vous pouvez personnaliser votre serveur en ajoutant des canaux de discussion, des rôles, des emojis et plus encore.
Étape 2 : Obtenir l’ID du serveur
La prochaine étape consiste à obtenir l’ID de votre serveur Discord. L’ID est un numéro unique qui identifie votre serveur. Pour obtenir l’ID de votre serveur, suivez ces étapes :
- Cliquez avec le bouton droit de la souris sur le nom de votre serveur dans la barre latérale gauche.
- Sélectionnez "Paramètres du serveur".
- Cliquez sur "Widgets" dans la barre latérale gauche.
- Cochez la case "Activer les widgets".
- Copiez l’ID du serveur.
Gardez cet ID en mémoire ou copiez-le quelque part, nous en aurons besoin plus tard.
Étape 3 : Configurer les paramètres du widget
La prochaine étape consiste à configurer les paramètres du widget pour votre serveur Discord. Le widget est un code HTML que vous pouvez insérer sur votre site web pour afficher votre serveur Discord.
- Allez dans les paramètres du serveur Discord (voir étape 2).
- Cliquez sur "Widgets" dans la barre latérale gauche.
- Dans la section "Widget du serveur", personnalisez votre widget en choisissant les options suivantes :
- Type de widget : Sélectionnez "Image et lien".
- Largeur : Sélectionnez la largeur de l’embed Discord (par exemple, 300 pixels).
- Hauteur : Sélectionnez la hauteur de l’embed Discord (par exemple, 400 pixels).
- Thème : Sélectionnez le thème de l’embed Discord (clair ou foncé).
- Afficher les membres en ligne : Cochez cette case si vous souhaitez afficher les membres en ligne de votre serveur Discord.
- Cliquez sur "Enregistrer".
Étape 4 : Copier le code HTML
La prochaine étape consiste à copier le code HTML pour votre embed Discord.
- Allez dans les paramètres du serveur Discord (voir étape 2).
- Cliquez sur "Widgets" dans la barre latérale gauche.
- Cliquez sur "Copier" à côté du code HTML.
- Collez le code HTML quelque part où vous pourrez y accéder plus tard.
Étape 5 : Insérer le code HTML sur votre site web
La dernière étape consiste à insérer le code HTML sur votre site web ou votre blog. Vous pouvez insérer le code HTML dans n’importe quelle page de votre site web, mais il est recommandé de l’insérer dans un widget ou un module personnalisé pour une meilleure intégration.
- Ouvrez l’éditeur de texte ou le panneau d’administration de votre site web.
- Collez le code HTML que vous avez copié à l’étape précédente.
- Enregistrez les modifications.
Personnalisation de votre embed Discord
Maintenant que vous avez créé votre embed Discord, vous pouvez le personnaliser en ajoutant des fonctionnalités supplémentaires.
Afficher les membres en ligne
Si vous avez coché la case "Afficher les membres en ligne" dans les paramètres du widget, votre embed Discord affichera automatiquement les membres en ligne de votre serveur Discord. Si vous ne souhaitez pas afficher les membres en ligne, vous pouvez décocher cette case.
Personnaliser le style
Vous pouvez personnaliser le style de votre embed Discord en modifiant le code CSS. Pour cela, vous devez ajouter une balise à votre code HTML et y ajouter les propriétés CSS que vous souhaitez modifier. Voici un exemple de code CSS que vous pouvez utiliser pour personnaliser votre embed Discord :
.discord-widget {
background-color: #36393f;
color: #fff;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.discord-widget h2 {
font-size: 18px;
font-weight: bold;
margin: 0;
padding: 10px;
background-color: #7289da;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.discord-widget .discord-chat {
height: 300px;
overflow-y: scroll;
padding: 10px;
}
.discord-widget .discord-users {
overflow: auto;
padding: 10px;
}
.discord-widget .discord-user {
margin-bottom: 10px;
padding: 10px;
background-color: #7289da;
border-radius: 5px;
display: flex;
align-items: center;
}
.discord-widget .discord-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.discord-widget .discord-name {
font-weight: bold;
margin-right: 10px;
}Ce code CSS modifie le style de l’embed Discord en changeant la couleur de fond, la couleur du texte, la taille de la police, la hauteur du widget, la taille de l’avatar et plus encore. Vous pouvez modifier ces propriétés pour adapter l’embed Discord à votre site web.
Résolution des problèmes courants
Si vous rencontrez des problèmes lors de la création de votre embed Discord, voici quelques solutions courantes :
Le widget ne s’affiche pas
Si votre widget Discord ne s’affiche pas sur votre site web, vérifiez les éléments suivants :
- Vérifiez si l’ID du serveur Discord est correct.
- Vérifiez si les paramètres du widget sont corrects.
- Assurez-vous que le code HTML est correctement inséré sur votre site web.
- Vérifiez si le widget n’est pas bloqué par votre navigateur ou votre pare-feu.
Le widget est mal formaté
Si votre widget Discord est mal formaté (par exemple, s’il est trop grand ou trop petit), vérifiez les éléments suivants :
- Vérifiez si les paramètres du widget sont corrects.
- Assurez-vous que le code HTML est correctement inséré sur votre site web.
- Vérifiez si le CSS est correctement défini.
Les membres en ligne ne s’affichent pas
Si les membres en ligne de votre serveur Discord ne s’affichent pas sur l’embed Discord, vérifiez les éléments suivants :
- Vérifiez si la case "Afficher les membres en ligne" est cochée dans les paramètres du widget.
- Assurez-vous que le widget est correctement configuré et qu’il peut accéder à votre serveur Discord.
- Vérifiez si le CSS est correctement défini.
Conclusion
Créer un embed Discord pour votre site web est un excellent moyen de promouvoir votre serveur Discord et d’augmenter votre communauté en ligne. Les étapes pour créer un embed Discord sont simples et ne prennent que quelques minutes. En personnalisant votre embed Discord, vous pouvez améliorer l’apparence et la fonctionnalité de votre widget pour mieux répondre aux besoins de votre site web. En suivant les instructions de cet article, vous pourrez créer un embed Discord en un rien de temps.
Note : Cet article n'est pas mis à jour régulièrement et peut contenir des informations obsolètes ainsi que des erreurs.
