XenForo Tutorials

[Free] External chat with Discord + Titan

Submitted by Rockhopper, , Thread ID: 96354

Thread Closed
Rockhopper
Novice
Level:
0
Reputation:
0
Posts:
21
Likes:
2
Credits:
1
23-07-2018, 08:39 AM
This post was last modified: 23-07-2018, 09:22 AM by Rockhopper
#1
For the tl;dr, time ago I need to implement a free chat but without installing any addon and searching this solution came to me. This is the How to...

First of all, you need a Discord Server. Then, go to the Titan Embed page and click on login.

[Image: VNG35O1.png]

Authorize the aplication and then choose your server

[Image: IDtyKqv.png]

The Titan Bot will need your permission on the chat, next the bot will land on your server

[Image: MntAI2K.png]

Once the bot is on the server, you can go to the "Modify" button to get the embed code. The iframe is the one we will need next.

[Image: sYHS9Rs.png]

Let's go to our xF Admin Panel. We are going to create two new templates: Chat_Discord and Chat_Discord.css (example names)

For Chat_Discord the code:

Code:
<xen:require css="chat_discord.css" />

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
  $("#element").hide();
});
$("#show").click(function(){
  $("#element").show();
});
});
</script>

<div style="width: 400px;" id="div_for_chat"><a id="show"><img src="ROUTE OF A IMAGE FOR OUR FLOATING WINDOW"></a>

<div class="embed-container" id="element" style="display: none;">
<div id="close"><a id="hide"><img src="ROUTE OF A IMAGE FOR A CLOSE MENU (X)""></a></div>
<iframe src="HERE YOU PUT THE IFRAME CODE OR YOUR DISCORD CHAT?defaultchannel=THE ID OF YOUR CHANNERL (GENERAL)&amp;theme=DiscordDark" height="500" width="450" frameborder="0"></iframe>
</div>

</div>


And for the CSS

Code:
#div_for_chat {
position: fixed;
z-index: 999;
bottom: 0;
left: 0;
width: 100%;
}



Now, edit your PAGE_CONTAINER template and include

Code:
<xen:include template="chat_discord" />

In the bottom of the HTML tag.

The final result would see something like:

[Image: seSDdPi.png]

[Image: QNgq0Hu.png]

The main advantage (in addition to be free and higly customizable) is that Titan is a bot that allows to sign up to a discord server WITHOUT A DISCORD OR A FORUMACCOUNT. So, this could be a nice sustitute for a support chat.

That's are the basics, you can edit and optimize the code but the idea is this. Hoping this can benefit someone else Smile

Users browsing this thread: 1 Guest(s)