palette
UI Functions
Toast, vibration, clipboard, and status bar
Toast Messages
Show brief messages to user
shift2appjs.showToast(message)
Displays a native Android toast message at the bottom of the screen.
Parameters
message
String - The message to display
Returns
void
// Simple toast
shift2appjs.showToast("Settings saved!");
// After an action
function addToCart(item) {
cart.push(item);
shift2appjs.showToast(item.name + " added to cart");
}
Vibration
Haptic feedback
shift2appjs.vibrate(duration)
Vibrates the device for the specified duration.
Parameters
duration
Number - Duration in milliseconds
Returns
void
// Short vibration for feedback
shift2appjs.vibrate(50);
// Longer vibration for alerts
shift2appjs.vibrate(500);
// Pattern (multiple calls)
function vibratePattern() {
shift2appjs.vibrate(100);
setTimeout(() => shift2appjs.vibrate(100), 200);
setTimeout(() => shift2appjs.vibrate(100), 400);
}
Clipboard
Copy text to clipboard
shift2appjs.copyToClipboard(text)
Copies text to the device clipboard.
Parameters
text
String - Text to copy
Returns
void
// Copy referral code
function copyReferralCode() {
const code = "REF123ABC";
shift2appjs.copyToClipboard(code);
shift2appjs.showToast("Code copied!");
}
// Copy current URL
function sharePageLink() {
shift2appjs.copyToClipboard(window.location.href);
shift2appjs.showToast("Link copied to clipboard");
}
shift2appjs.getClipboard()
Gets text from the device clipboard.
Returns
String - Clipboard contents
// Paste from clipboard
function pasteCode() {
const text = shift2appjs.getClipboard();
document.getElementById("codeInput").value = text;
}
Status Bar
Customize status bar appearance
shift2appjs.setStatusBarColor(color)
Changes the status bar background color.
Parameters
color
String - Hex color code (e.g., "#FF5722")
Returns
void
// Match page theme
shift2appjs.setStatusBarColor("#1a1a2e");
// Change based on scroll
window.addEventListener("scroll", () => {
if (window.scrollY > 100) {
shift2appjs.setStatusBarColor("#ffffff");
} else {
shift2appjs.setStatusBarColor("#000000");
}
});