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 Customise Size & Colour
  • Admin Tags Added
  • Auto Refresh Added
  • Only Lists Occupied Channels
  • Flexible - Automatically Resizes to your iframe dimensions
  • Nine Different Themes
  • Optional Background Images
  • Easy To Edit


Our custom Discord viewer for websites is a flexible alternative to the official Discord widget, it's not 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 use this LINK.

We'd like to thank everyone who has downloaded this for their support and we are pleased to announce version two (v1.0.2) is now available. There are many improvements, it also has a larger size range, cleaner code and is even easier to edit.



Our Discord Viewer

Discord Viewer
Custom Discord Viewer

Any Size, Any Colour

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 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 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, Dark or Light

Our Discord viewer is fully customisable and no coding knowledge 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).

Built using PHP, HTML5 and styled using Pure CSS3 with SVG icons - Means no downloading of those images or third party scripts, giving it a very fast load time




Discord Viewer Themes and Prices

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

GRADIENT £1.99

COORDINATE £1.99

COLOUR £1.99

DARK £1.99

LIGHT £1.99

Mini £1.99

Download The Complete Collection!

This Mini version is the one that we actually use on our homepage, you can see it live there, if you view that page you'll see that the page based on the metro theme which breaks down into a series of small boxes without much of room in each section. There wasn't a viewer capable of fitting such a small section so we wrote our own and then we needed a larger version for another section, so that's how our viewer was born!

Since then we have designed a number of themes to suit the users needs, each of which can easily be adapted to suit any website's colour scheme and we have put all these into one collection which you can download for just £4.99 for a limited time.

ALL Themes Only £4.99

Discord Viewer widgets
Save £12.92 Buy The Complete Collection for only £4.99



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 then resize your browser and refresh the page (F5) and you'll see that the content will adjust according to the browser's size. Try that with the official Discord widget viewer!!!

Click your browser's back button to return here.

Click me!


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 668px, 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/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. You can view one by clicking HERE And see that we have everything easily covered for you.


×

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.

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

Flexible Discord Viewer

×

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.

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

JSON 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.

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

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!

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

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.

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

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. We have also included a range of different coloured versions of each icon, so that they will complement your chosen colours.

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

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.

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

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.

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

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 website which has a metro windows theme. Now you can understand why we had to create our own Discord viewer as there is no room for Discord's standard widget to fit anywhere on the page! And when you hover over you get a pop up (as you can see with Ark) which if you click, will take you to our 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 nine themes, for only £4.99p. That's a massive saving of £12.92 when compared to buying them individually.

External Discord Viewers