HTML widgets

AppBrain HTML widgets allows users and website owners to easily integrate their site with AppBrain.

App widget

You can configure your app widget on the app widget configuration page.

SDK widget

For all the libraries and SDKs listed in our Android Library Statistics section we provide widgets that show some relevant data for the corresponding library.

The widget comes in two basic formats:

  • A compact, horizontally shaped widget containing the library’s title and logo, as well as the 4 most popular apps using the library.

  • A larger widget containing the library’s title, logo (optional), the 8 most popular apps using the library, and the number of apps using library (optional).

The SDK widget shield

Example:

The code for this widget:

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

Or in markdown:

[![AppBrain SDK](https://www.appbrain.com/stats/libraries/shield/appbrain.svg)](https://www.appbrain.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:

Top apps using AppBrain SDK

The code for this widget:

<div class="appbrain_sdkwidget" data-format="small">
    <a href="https://www.appbrain.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.appbrain.com/api/api.nocache.js"></script>

The large SDK widget

Example:

Top apps using AppBrain SDK

The code for this widget:

<div class="appbrain_sdkwidget" data-format="large" data-counts="true">
    <a href="https://www.appbrain.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.appbrain.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>.