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.newsinvests.com/?pkg=appbrain-app-package
when opened in the AppBrain example app, would result in the WebView loading:
https://www.newsinvests.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.newsinvests.com">Ok</a>
</div>
</div>
</div>
</div>
</body>
</html>
