WebView cloud alerts

This is a version of our cloud alert that gives you complete control over the content. Design your alert in HTML/CSS, upload it somewhere and enter the URL pointing to it in the developer dashboard. The WebView which will load your alert URL has a translucent background, so you can even design your alert to look like a dialog.

Closing the alert

To close the alert you can either:

Add a link to close:// in your HTML.
Call the Javascript function appbrain.close().

Android Javascript interface

The complete list of Javascript functions that are available from the WebView:

appbrain.close(): close the alert.
appbrain.sendMail(address, subject, content): open an Android e-mail intent.

Query parameters

When you add our special query parameter values to your URL, they will be replaced with certain data from the app. For example, the URL:

https://www.appbrain.com/?pkg=appbrain-app-package

when opened in the AppBrain example app, would result in the WebView loading:

https://www.appbrain.com/?pkg=com.appbrain.example

Here is the complete list of possible values:

appbrain-app-package: the app’s package name.
appbrain-app-version: the app’s version code.
appbrain-os-version: the device’s Android version.
appbrain-os-language: the device’s language.
appbrain-screen-density: the screen’s density.
appbrain-screen-size: the minimum screen dimension in dip.

Example HTML template

If you want to use the WebView to show a dialog style alert, you can use the HTML below to get started.

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            html, body {
                margin: 0;
                height: 100%
            }
            p {
                margin: 0 0 16px;
            }
            .background {
                position: fixed;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
            }
            .container-table {
                display: table;
                width: 100%;
                min-height: 100%;
            }
            .container-cell {
                display: table-cell;
                vertical-align: middle;
            }
            .content {
                position: relative;
                width: 80%;
                margin: 32px auto 64px;
                padding: 16px;
                border-radius: 4px;
                background-color: white;
                border-bottom: 2px solid #9b9b9b;
            }
            .buttons {
                display: table;
                width: 100%;
            }
            .button {
                display: table-cell;
                width: 50%;
                color: white;
                text-decoration: none;
                text-align: center;
                background-color: #9b9b9b;
                border-bottom: 2px solid #757575;
                padding: 8px;
                border-radius: 2px;
            }
            .button:active {
                background-color: #757575;
            }
            .button-ok {
                background-color: #46a705;
                border-bottom: 2px solid #337904;
            }
            .button-ok:active {
                background-color: #337904;
            }
            .button-space {
                width: 16px;
            }
        </style>
    </head>
    <body>
        <a class="background" href="close://"></a>
        <div class="container-table">
            <div class="container-cell">
                <div class="content">
                    <p>Example message.</p>
                    <div class="buttons">
                        <a class="button" href="close://">Cancel</a>
                        <div class="button-space"></div>
                        <a class="button button-ok"
                            href="https://www.appbrain.com">Ok</a>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>