HTML widgets

The SDK widget shield

Example:

The code for this widget:

<a href="https://www.halobodyart.com/stats/libraries/details/appbrain/appbrain-sdk">
    <img src="https://www.halobodyart.com/stats/libraries/shield/appbrain.svg">
</a>

Or in markdown:

[![AppBrain SDK](https://www.halobodyart.com/stats/libraries/shield/appbrain.svg)](https://www.halobodyart.com/stats/libraries/details/appbrain/appbrain-sdk)

Note: You can find the code for the widget also on each library’s detail page (click the preview widget link on the corresponding page).

The small SDK widget

Example:

The code for this widget:

<div class="appbrain_sdkwidget" data-format="small">
    <a href="https://www.halobodyart.com/stats/libraries/details/appbrain/appbrain-sdk"
            style="font-size: 11px; color: #555; font-family: Arial, sans-serif;">
        Top apps using AppBrain SDK
    </a>
</div>
<script src="//www.halobodyart.com/api/api.nocache.js"></script>

The large SDK widget

Example:

The code for this widget:

<div class="appbrain_sdkwidget" data-format="large" data-counts="true">
    <a href="https://www.halobodyart.com/stats/libraries/details/appbrain/appbrain-sdk"
            style="font-size: 11px; color: #555; font-family: Arial, sans-serif;">
        Top apps using AppBrain SDK
    </a>
</div>
<script src="//www.halobodyart.com/api/api.nocache.js"></script>

SDK widget configuration

The SDK widgets can be configured using the following attributes (to be placed in the div with class appbrain_sdkwidget):

• data-format: Use this to choose between the small (data-format="small") or large (data-format="large") widget format.

• data-title: Use this to set a custom library title (e.g. data-title="AppBrain SDK")

• data-logo (for the large widget only): Use this to hide the logo (data-logo="false").

• data-counts (for the large widget only): If data-counts="true" the widget shows the (rough) number of apps that use this library. Default is false.

Additionally, the target attribute of the link element (<a...) can be set to control the behavior of all the links within the widget. The link acts as a placeholder that is shown if the widget cannot be displayed, such as when JavaScript is disabled in the viewer’s browser.

Finally, you can style the widget by adding the following css-classes to your stylesheet:

• sdkwidget-wrapper: The style of the widget’s main div. Use this to change the widget’s font, background-color, border, etc.

• sdkwidget-title: Can be used to style the title.

• sdkwidget-more: The style of the ‘more-information’ link can be controlled using this class.

• sdkwidget-footer: The style of the footer area.

Notes:

• You can find the code for the widget also on each library’s detail page (click the preview widget link on the corresponding page).

• The <script> tag in the last line of the snippet should be included only once per page, even if you include multiple widgets.

• For fastest loading time move the <script> tag at the bottom of your page, right before </body>.