[Free] External chat with Discord + Titan

Rockhopper · 23-07-2018, 08:39 AM

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]

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

[Free] External chat with Discord + Titan

Submitted by Rockhopper, 23-07-2018, 08:39 AM, Thread ID: 96354