Discord Viewer in PHP for Discord widget JSON API channels / discord-server-viewer

A Custom Discord Viewer for your Website.

This is a flexible alternative to the official Discord widget, it's not quite free, we are asking for a small donation of £1.99 to download it. This money goes towards the cost of our servers and helps us continue development and supply full support for this app. If you are looking for the free official widget then please use this LINK.

We'd like to thank everyone who has downloaded this for their support and based on your feedback we are pleased to announce version three (v1.0.3) is now available. Written in PHP (needs version 5.4 or above) with W3c Fully Validated HTML5 and CSS level 3 Code. There are many improvements: Now with Font Awesome V6 Icons. Added an option to display a logo in some themes. Added two new themes. Icons now added to channel names. Added an option to list all channels instead of just occupied ones. Added animated Clyde sleeping when channels are empty. Fixed "Undefined property Notices" being generated out to error logs.

Our Discord Viewer

Discord Channel Viewer

Discord is fantastic! We absolutely love using it and would never go back to using Mumble or TeamSpeak again, it's FREE and has so many good features... What a pity that we can't say the same about the official Discord widget. It's colour scheme and layout would look out of place on the majority of websites that it's intended for. So, we developed our own for use on our website, and we now offer this to other clans and communities for their own use, for less than the price of a cup of coffee.

Who would buy this!

It's intended for people with little or no programming knowledge, it can be used as it is, or very easily modified by using the included extensive ReadMe files. But as Flexi Viewer is the only fully working alternative to the official widget out there, it could equally be of use to others, saving many hours of work that would go into making their own.

Discord Viewer

Main differences from the Official Discord JSON API widget:

It's Flexible - Text and icons automatically resize to your iframe dimensions. Admin tags added - Viewers can easily see if an admin is on the server. More information at a glance. Custom Background images available with some themes. Auto refresh added, every five minutes - Same rate as the JSON file refresh. Only lists the occupied channels - Empty channels do not get printed out, leaving less clutter on screen. Drop down list of other users that are online - See if friends are online even if they are not in the server (channel users not repeated). Games listed in channel - Converted to 1st capital and lower-case and limited in size to stop overflow. Custom Themes - a range of ready to go customised themes, Gaming, Light, Dark, Colour, Coordinated, Gradient, Mini and for that time of year, a Halloween theme and a Christmas one too! (with a choice of backgrounds). We have now added two new themes and are working on others.

Built using PHP, HTML5 and CSS 3 and now using Font Awesome V6 (Beta) icons - Gives it a very fast load time

Discord Viewer Themes and Prices (Working Demos)

Clicking on the "Download" button will take you to a secure PayPal server (no account needed) where you can make the payment and then once the payment has been completed you will then be automatically redirected by PayPal to your download link.

Save £16.90 Buy The Complete Collection for only £4.99

That's ALL 11 Themes in one complete package for only £4.99p.

Sizes!

Are there any size limits?

No, not really. There are of course reasonable limits, too small and you can't read it, too large and it's useless! We said that it's flexible, to see how truly flexible it is, click the button below, this will open a pop up window containing a viewer, grab the sides of the window and resize it, you'll see that the content will adjust according to the window size. Try that with the official Discord widget viewer!!!

Width & Height using iframes

Width 220px wide, 900px high, the sweet spot!!!

As you can see here with the two examples to the left, limits come into effect at the lower end of the scale. The viewer's various elements such as icons, length of text and borders can get distorted when reduced to very small sizes such as the 140px width set here, however if we remove the borders, it's just about readable. Full instructions on how to do this can be found in the ReadMe.txt file that comes with the download, it's a simple case of altering one line in the code.

Height

It is important to get the right height for your needs, the example to the right has been set at a much shorter height (300px) then the contents (668px), in such cases you will need to use the scroll bar to access the lower contents.

All our previous examples have been set to a height of around 450px, that's because for demonstration purposes all examples on this page are using a previously saved JSON file so that all our examples are static, therefore, we knew in advance how much room would be needed. In the real world we don't, so be sure to set the height large enough to accommodate the number of expected visitors. It's also important to remember that whatever height you set then the content that follows the iframe will be pushed down by that figure too, as you can see has happened with the blue banner above. Ideally you would locate the viewer into a side panel on your site and allow it a generous figure.

Embedding iframes

Once you have decided on the right width and height for your needs, then it's time to set up your viewer for display on your website by embedding it within an iframe. There are other ways and means which you can Google but for now we will stick with iframes and we will just cover this briefly in two ways.

The right hand iframe above with the scroll bar is set at 220px wide x 300px high, this is only for example purposes, in most cases you would want to set a longer length. The correct way to style your iframe is by using CSS. For example:-

CSS


                .viewer iframe  { 

                width:220px; 

                height:300px;

                background:#FFF;

                border:none;

                }

HTML


                <div class="viewer">

                <iframe src="https://www.yourwebsite.com/pathtoviewerfile/nameofviewer.php"> 

                <p>Your browser does not support iframes.</p></iframe>

                </div>

In our case the path was


                "http://raw-recruits.com/discord-v3-new/themes/dark/dark.php"

You can however style the iframe directly within the page as we have done here:

INLINE


                <iframe src="http://raw-recruits.com/discord-v3-new/themes/dark/dark.php" width="220" height="300"></iframe>

A fully documented ReadMe.html file is included in the zip file to help you customise the theme. You can view one by clicking HERE And see that we have everything easily covered for you.

Frequently Asked Questions

|Q: "I tried to install your viewer on my website, but I have the following issue: Parse error: syntax error, unexpected T_FUNCTION in /home/discord/mini.php on line 40. I tried with the dark theme and the error is at line 46. In each *.php I've only changed the json address and the invite link."
|A: "You are getting the unexpected T_FUNCTION because you are using an older version of PHP, most likely version 5.2 or older. You will need at least version 5.3 or higher. Most cPanel based hosting providers will allow you to update PHP version from your cPanel. Search PHP Version Manager or PHP Configuration option and click on it. Select PHP version 5.6+ or 7 and save. If not, ask your host to update the PHP version of your hosting. Most likely, they will do it for free and it’s the easiest way to update.."

|Q: "None of the channels with users in them are being listed in the viewer!"
|A: "We had exactly the same problem with our own server. On checking, it turned out that one of our admins had set all the channels to "Private" and information regarding a private channel is not written to the JSON file, therefore no viewer including the official Discord widget can extract any information for that channel.."

SOLUTION:- Right click on the channel name, click on permissions and make sure that the option to set the channel as private is not set.

|Q: "I'm trying to find the instructions/method to remove the border. I've read thought the instructions and I just cannot see the options, any assistance you could offer would be appreciated."
|A: "Exactly where the information is depends which theme you want to use, the information is in the ReadMe.html file. For example using the dark theme, scroll down to dark.css file section and you will see:- Line 11 #808080 /* viewers border Which reads: border:6px solid #808080; /* viewers border */."

"Simply change that to 0px or remove the line altogether. It is much the same for the other themes except that is may appear on a different line number but the ReadMe file for that theme will tell you which line it is on."

|Q: "I'd like to ask if it is possible to show also the unoccupied channels? Also, I'm getting a lot of php-errors in my log. What can I do about it?"
PHP Warning: Undefined property: stdClass::$channel_id in /homepages/42/d119927545/htdocs/assets/php/discord.php on line 61 PHP Warning: Undefined property: stdClass::$channel_id in /homepages/42/d119927545/htdocs/assets/php/discord.php on line 150 PHP Warning: Undefined property: stdClass::$self_mute in /homepages/42/d119927545/htdocs/assets/php/discord.php on line 162
|A: "The answer to both questions is that you are using an older version of our viewer, either V1 or V2, We have now addressed both issues in version 3."

|Q: "One thing I've noticed is that it is quite slow to update - I know the code sets a refresh every 5 minutes but even if I manually set that at 30 seconds, or 1 minute it doesn't seem to take effect.. I think this is discord itself though, since I even manually tested against the default discord pluggin and it takes a few minutes to update - do you know any way around this?"
|A: "No, there is no way around this. Discord only updates the JSON data every five minutes, which is why we set the reader to refresh at the same 5 minute rate."

Well, we think we have covered it all but we also thought that with versions 1 & 2 too, so if you have any feedback, good or bad, we would love to hear it as that is what helps us to continue to make improvements. Details on how to do that below:-