Fully Customise Size & Colour
Admin Tags Added
Auto Refresh Added
Only Lists Occupied Channels
Flexible - Automatically Resizes to your iframe dimensions
One Size, Dark or Light
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 Big, it's fat and would look out of place on the majority of websites that it's intended for. So, like a lot of communities, we made our own and we offer it to you for free.
No coding knowledge needed to customise. 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.
Any Size, Any Colour
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 lowercase and limited in size to stop overflow. Custom Themes - a range of ready to go ready customised themes, Gamer, Light, Dark, Colour, Mini and for that time of year, a Christmas theme too!
Built using PHP, HTML5 and styled using Pure CSS3 with SVG icons - Means no downloading of images or third party scripts, giving it a very fast load time
GAMING 220px wide
DARK 220px wide
LIGHT 220px wide
COLOUR 220px wide
There is only one Christmas theme but it comes with the three backgrounds that you see here. The Mini version we actually use on our homepage, you can see it live there, if you view that page you'll see that it's based on the metro theme and we haven't got a lot of room in each section, so that's how our viewer was born!
Xmas 220px wide
Xmas2 220px wide
Xmas3 220px wide
Are there 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 so, click the button below and then drag and resize the browser. Click your browser's back button to return here.
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.
It is important to get the right height for your needs, the example to the immediate left has been set at a much shorter height then the contents, in such cases you will need the scroll bar to access the lower contents. All our previous examples have been set to a height of 900px. 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.
For demonstration purposes we are using a previously saved json file so that all our examples are static.
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:-