Discord Viewer

The Discord widget you asked for!

PayPal – The safer, easier way to pay online.

PayPal – The safer, easier way to pay online.

Features:

  • Fully Customisable
  • Admin Tags Added
  • Auto Refresh Added
  • Only Lists Occupied Channels
  • Flexible - Automatically Resizes to your iframe dimensions
  • Eleven Different Themes
  • Optional Background Images
  • Easy To Edit

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 Viewer
Custom Discord Viewer

Any Size, Any Colour, 11 themes.

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

Official Discord Viewer
Discord Widget

One Size, 2 themes Dark or Light!

Easy to install. You simply host the files on your own server and then just as you would with the Discord Widget you link an iframe to it on your main page . Our Discord viewer is fully customisable and no coding knowledge is needed to customise the theme. Using the fully documented text and CSS files, you can easily change colours, fonts etc. with just a few simple copy and paste commands. Background optional, depending on the theme you use. We also offer full help & support and have even been known to host the PHP files on our servers for those that don't have PHP support on their own servers. Just ask!


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.


GAMING £1.99

HALLOWEEN £1.99

CHRISTMAS £1.99

SMOKEY THEME £1.99

CORPORATION THEME £1.99

GRADIENT £1.99

COORDINATE THEME £1.99

COLOUR THEME £1.99

DARK THEME £1.99

LIGHT THEME £1.99

MINI THEME £1.99

ALL Themes Only £4.99

Discord Viewer widgets
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

Discord json Viewer widget
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:-



×

DISCORD VIEWER HALLOWEEN THEME

I Ain't Afraid of No Ghosts!... This Discord viewer Halloween theme featuring a scary looking Jack-o'-lantern that houses an animated candle giving off an eerie flickering glow of light and a plethora of spooky ghosts floating up to the sky is perfect for the occasion. Not much to change on this one, should be suitable for most sites.

JSON Discord Viewer

×

DISCORD VIEWER GAMING THEME

With this Discord viewer theme you can easily change the background picture (backdrop_gaming.jpg) by simply replacing it with one of your choice, perhaps one of your main games! It needs to be 400px wide and around 900-1200px high to accommodate the drop-down section. You can you can also change the opacity of the background image and the brushed metal effect by altering just two lines of code. Full instructions are in the ReadMe file.

(Images are from V2 but the information still applies to V3)

Flexible Discord Viewer

×

DISCORD VIEWER CHRISTMAS THEME

Let it Snow! Let It Snow! Let It Snow!.. Don't Bah, Humbug this theme when it 'tis the season to be jolly, get your site decorated and ready in time for Xmas. Comes with plenty of snow and a choice of three different backgrounds or add your own. Get it now, or are you one of those people that leaves the Christmas shopping until the last moment! Right now it's on special offer.

Discord PHP Viewer

×

DISCORD VIEWER GRADIENT THEME

This Discord viewer theme uses CSS3 gradients with transitions, and effects. CSS3 gradients seem to be all the rage these days, and rightly so. They were something that was previously only available through something like Photoshop and the embedding of images on your site. Now though, we can do it all through a bit of CSS3 wizardry. So we did!

Colours: We supply a permalink to an online gradient editor where you can change your colours in minutes, simply copy and paste the generated code, full details are contained in the ReadMe file that comes with this theme.

Discord Viewer Styled

×

DISCORD VIEWER COORDINATED THEME

A lot of websites are coordinated these days using complementary colours that combine well, often based on using a palette of around four colours. A good colour combination can make a nice impact. If your site is coordinated then this Discord viewer theme is for you. Simply follow the simple instructions in the ReadMe file and replace all the colours with those of your own choice.

Discord Widget Viewer

×

DISCORD VIEWER COLOUR THEME

Whatever your website's colour scheme is, you'll be sure to match it using this Discord viewer theme. Border, background, buttons and font can all be changed in a matter of minutes by just following the simple, well documented ReadMe file. Now uses Font awesome v6 icons, so that they will complement your chosen colours. (images are from version 1)

Discord Viewer Widget

×

DISCORD VIEWER DARK THEME

Good for sites that have a dark theme going on. You're not restricted to these colours, you can of course change them to suit your needs easily enough by following the detailed instructions in the ReadMe file that is included in the download.

Discord Viewer External

×

DISCORD VIEWER LIGHT THEME

Good for sites that have a light theme going on. You're not restricted to these colours, you can of course change them to suit your needs easily enough by following the detailed instructions in the ReadMe file that is included in the download.

Discord Viewer Themed

×

DISCORD VIEWER MINI THEME

When a lot of space is hard to come by, our Discord viewer mini theme comes into it's own! The larger image is an actual partial screenshot of our old website which had a metro windows theme. Now you can understand why we had to create our own Discord viewer as there was no room for Discord's standard widget to fit anywhere on the page! And when you hovered over you got a pop up (as you can see with Ark) which when clicked, took you to a normal size viewer. Most website have plenty of room for a normal viewer so this likely gets used mostly on forums or CMS based sites, which may explain why it has had over 500 downloads so far!

Size Restrictions: Not recommended for use with widths below 120px wide, it does not have a maximum width and will even work well at full screen.

Discord Viewer Mini

×

GET THE WHOLE COLLECTION FOR ONLY £4.99

Not sure which Discord viewer theme will suit your website? Then why not buy them ALL! We have an introductory special offer going at the moment and you can buy the complete collection, that's all eleven themes, for only £4.99p. That's a massive saving of £16.90 when compared to buying them individually.

External Discord Viewers

×

DISCORD VIEWER SMOKEY THEME

Our Smokey theme. This Discord viewer Smokey theme has a great smoke reveal effect for the server name and also has a smoke effect background, where you can have one, two or more smoke points bellowing smoke from any object within an image, such as crashed planes, cars or tanks. You can also apply colour effects to the smoke to reproduce other effects such as red flares etc. You can also adjust the density.

JSON Discord Viewer

×

DISCORD VIEWER CORPORATION THEME

Our Corporation theme. Whilst starting out mainly as a chat service for gamers Discord is now rapidly expanding into a more universal service. This Discord viewer corporation theme is for companies who want a viewer on their website, we have added a company logo section, which we have now added to some of our other themes for clans. Simply change your background and other colours to blend in with your company profile!

JSON Discord Viewer