Widget
⚡ 4 min readCustomize the installation UI using a floating button, or your own custom component. You can trigger the installation prompt by matching a custom element ID with the component ID
Floating Install Button
A pre-built floating button that appears on your website for easy PWA installation
| Field | Description | Example |
|---|---|---|
| Enable Floating Button | Display a floating install button on your website for easy PWA installation | Checkbox |
| Position | Choose where the floating button appears on your website | Bottom Right |
| Display On | Choose which devices should show the floating button | Desktop Only, Mobile Only, Both |
| Button Size | Enter the desired size (px) of the floating button | 48 |
| Background Color | Choose the background color for the floating button | Hex color (e.g. #000000) |
| Icon (SVG) | Upload an SVG icon for the floating button. File size should be less than 100KB | Upload SVG Icon |
Position Options
- Bottom Right
- Bottom Left
- Top Right
- Top Left
Custom Install Button
Use your own HTML element to trigger the PWA installation prompt
| Field | Description | Example |
|---|---|---|
| Enable Custom Button | Enable a custom install button that you can trigger with your own JavaScript code | Checkbox |
| Button ID | Enter the HTML element ID that will trigger the PWA installation when clicked | install-button |
Usage
- Enable Custom Button
- Set the Button ID (e.g.
install-button) - Add an element with that ID in your HTML:
<button id="install-button">Install App</button>When the user clicks the element, the PWA installation prompt will appear
The Button ID must match the id attribute of your HTML element. The SDK
listens for clicks on that element and triggers the install prompt
Next Steps
- Configuration - App name, theme, shortcuts
- App Icons - Configure app icons
- Installation Guide - Initial setup
Last updated on