Discord Viewer

The Discord widget you asked for!








Paypal

FEATURES:

Fully Customise Size & Colour
Admin Tags Added
Auto Refresh Added
Only Lists Occupied Channels
Flexible - Automatically Resizes to your iframe dimensions

Discord Viewer

official Discord Viewer
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, we made our own and we offer it to you for free, although a small donation to help support us would be most appreciated.


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.

Flexi Viewer

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

Themes

GAMING 220px wide

DARK 220px wide

LIGHT 220px wide

COLOUR 220px wide

 

 

Special Themes

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

Mini 140px                 

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.

Click me!

Sizes, Width & Height using iframes

Discord widget json Viewer

Width 220px wide, 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 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:-


CSS

.viewer iframe {
width:220px;
height:300px;
background:#FFF;
border:none;
}

HTML

<div class="viewer">
<iframe src="https://www.yourwebsite.com/pathtoviewerfile/nameofviewer.php"></iframe>
<p>Your browser does not support iframes.</p>
</div>

In our case the path was

"http://raw-recruits.com/discord/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/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.




Downloads

Gamer

Discord Channel Viewer Gamer Theme

Light

Discord Viewer Light Theme

Dark

Discord widget.json Viewer Dark Theme

Colour

Discord json API Viewer Colour Theme

Xmas

Discord Server Viewer Christmas Theme

Mini

Discord Widget Viewer Mini Theme

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

DOWNLOAD

Help Support Us

FlexiViewer can be used for both personal and commercial projects – completely free!


However, if you find this programme useful and you wish to help support it, you can donate via PayPal.

Donations are welcomed

Paypal