- Joined
- Oct 22, 2019
- Messages
- 4
- Points
- 11
Disclaimer: This is a free addon provided by Widget Bot which provides a free widget solution with the option to upgrade to different plans for more premium offers. Please check : widgetbot.io for more details. I am in no way affiliated with Widget Bot and am simply putting together code for the end user to easily implement into their forum.
Hello everyone!
The way of the chat box is in some ways old school with competing solutions growing and becoming more popular. One such instance of a chat service is Discord which provides a free tool to communities to organize and communicate through chat rooms and voice chat. This code allows implementation of Discord's features into Xenforo using Widget Bot.
In this guide we will be adding a custom template, adding some extra css to the site, and adding an insertable tag onto the page we want to display the html box on.
Discord Setup:
- Read the install guide located here : docs.widgetbot.io/tutorial/
- Follow the link in the tutorial to invite the bot to your server.
- Give the bot all of the permissions required to function.
- In a text channel on your discord server type "/setup"
- Hit get started
- Tag the channel you would like to use to ensure proper permissions for the bot. Example could be "#general"
- Select continue
- Tag the channel for error logging. Example could be "#bot-commands"
- Choose to enable guests or continue without guests (recommended)
- In the text channel type "/html-embed" to get the HTML code we will use later. It should look like this
HTML:
<widgetbot server="1234567890123"
channel="12345678901234567"
width="800"
height="600"
></widgetbot>
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>NOTE: You may need to edit the channel id to the channel you would like to default to. To do this right click the channel you want and select "copy link" and extract the channel id from the last set of numbers
Code:
https://discord.com/channels/serverid/channelidmake sure this in not a private channel or else nobody will be able to see it.
Xenforo Template setup:
- Go to the template editor under Admin >> Appearance >> Templates >> Select your default template
- Select add template
- Name the template "discord.chatbox"
- Paste the following code into the template box
CSS:
<span class="nomobile"> <!-- Hides the chat box on mobile --> <widgetbot
server="PlaceYourServerIDHere"
channel="PlaceYourChannelIDHere"
width="980"
height="300"
></widgetbot>
<span class="chatbox"> <!-- style the box the chatbox sits in by default this is just a line break -->
<script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>
</span>
</span>- Edit the code with your server ID and channel ID as we generated in the discord steps above
- Edit the width and height to match your desired preferences
- Save the template
- Go back to the template list in step 1 but this time scroll down until you locate "extra.less" and click on it.
- Paste the following CSS code into extra.less
CSS:
@media (max-width: 900px) { .nomobile {
display: none;
}
}
.chatbox {
margin-bottom: 10px;
display:block;
}Save the template.
Go back to the template list in step 1 but this time locate "forum_list" and paste this code at the top
Code:
<xf:include template="discord.chatbox" />Load your forum list and you should see the new chatbox!
If you get permission errors double check the discord bot is in your server, that you have the correct server and channel ids in the main html code, and that the correct permissions are set up to allow regular discord users to see the chat.
[/DIVULGACHER]
Last edited:
