Widgets

All-new widgets to embed your dsc.gg link along with its stats directlyon your website page!

There are 2 methods to using the dsc.gg widget on your site. You can use whichever you prefer, although we recommend using the Javascript widget to collect analytics, keep everything automatically updated and to utilize a cleaner implementation.

Method 1: Using the Javascript Widget (Recommended)

The first thing you should do when using the JS widget is include the required script on any pages you want to use the widget on. Be sure to include the "defer" in the script tag to ensure the script only loads when the page is ready.

<script src="https://api.dsc.gg/widget.js" defer></script>

Once you have added that, you will be able to implement the simple HTML tag as shown below to display your widget:

<dscgg-widget link="link_ending" type="widget_size"></dscgg-widget>

You can do this as many times as you want, wherever you want your widget to show up. Be sure to replace link_ending with the ending of your link (i.e: if your link was dsc.gg/example, the ending would be "example"). Also, replace widget_size with the size you want. Currently, we offer the sizes "small" and "large". Once that is done, refresh your page and the widget should appear as shown below:

Method 2: Manually loading the SVG widget

This method is intended for locations where you can not load an external script, or do not want to do so.

Webpage Implementation

You should use this method if you are working with a webpage where you can load an <img> tag. Be sure to replace :link_ending in the img tag and link tag to your link ending (i.e: if your link was dsc.gg/example, the ending would be "example").

<a href="https://dsc.gg/:link_ending"><img src="https://api.dsc.gg/v2/widget/:link_ending" /></a>

Implementation for non-webpages

You should use this method if you are only looking to load the image url, and not use it as a page element. (i.e: in a Discord bot embed). Be sure to replace :link_ending in the img tag and link tag to your link ending (i.e: if your link was dsc.gg/example, the ending would be "example").

https://api.dsc.gg/v2/widget/:link_ending

Widget References

Type/Design choices

We offer 2 designs for how your widget will look, "small" and "large". You can get an idea of what they look like below:

Example of the small widget style

Example of the large widge style

Additional query parameters

You can include additional params to the link image query to hide certain elements. Currently, we support adding ?hide_creation=true to hide the "Created On" field. This only applies to the large widget type. For example, you would do the following:

https://api.dsc.gg/v2/widget/:link_ending?hide_creation=true

And thats it! The widget will now hide the "Created On" field.