HTML Prompt

Allow users to express their interest in notifications prior to registration.

Installation

The Airship Web SDK provides plugins that extend its functionality to help with user acquisition and onboarding.

Use the load() method to load your plugin along with the plugin name and the url for the Airship-hosted CDN (Either North America or EU depending on your location), and any additional options.

UA.then(sdk => {
   sdk.plugins.load('my-plugin', 'https://my.plugin.url', {my_option: 'my_value'})
     .then(plugin => plugin.myMethod())
})

URL and options values are provided in the specific plugin sections.

See our Plugins class reference for more details.

HTML Prompt

This plugin provides a utility that allows users to express their interest in receiving notifications prior to registering their channel.

It is a best practice to explain the value of your notifications before prompting the opt-in flow. Using a soft prompt also gives users the chance to politely decline for now, without setting the browser permission to denied, giving you the chance to request again at a later time.

Currently two HTML prompt templates are available:

alert — a basic alert, with configurable title, message, logo, and button fields:

bell — a small bell that stays fixed on the page:

This plugin can be used in conjunction with the Registration Page plugin, if you are integrating on any non-HTTPS (HTTP) domains.

URL, Options and Methods

When loading the plugin, you will provide the url for the CDN-hosted plugin along with an options object. URL values and available options and methods are described below.

URL

The URL will differ depending on whether you are using our North America or EU data center.

North America: https://aswpsdkus.com/notify/v1/ua-html-prompt.min.js
EU: https://aswpsdkeu.com/notify/v1/ua-html-prompt.min.js

Options

These options apply to either the alert or bell templates. Optional.

Key	Type	Default	Description
`UA`	string	`UA`	UA global variable used in your SDK snippet.
`appearDelay`	number	0	Delay, in milliseconds, before displaying the prompt. Useful when `auto` is set to `true`.
`disappearDelay`	number	0	Delay, in milliseconds, before the prompt to automatically. disappears.
`askAgainDelay`	number	1209600 (2 weeks)	Delay, in seconds, before prompting user again after dismissing or ignoring the prompt.
`stylesheet`	string	null	CSS Stylesheet url to customize the prompt appearance.
`auto`	boolean	false	Whether to automatically display the prompt on page load.
`type`	string	`alert`	Template to use. One of `alert` or `bell`.

Alert Template Options

Specific options to the alert template. All are optional.

Key	Type	Default	Description
`position`	string	`top`	The position of the alert on the webpage, `top` or `bottom`.
`i18n.{lang}.title`	string	‘Subscribe to our notifications’	Alert title.
`i18n.{lang}.message`	string	en: ‘Stay tuned and get our best offers by subscribing to our push notifications.’	Alert message.
`i18n.{lang}.accept`	string	en: ‘Yes, Subscribe me!’	‘Accept’ button label.
`i18n.{lang}.deny`	string	en: ‘No thanks’	‘Deny’ button label.
`logo`	string	null	Logo URL to be displayed in the alert.

Bell Template Options

Key	Type	Default	Description
`position`	string	`bottom-left`	The position of the bell on the webpage. One of `top-left`, `top-right`, `bottom-left`, or `bottom-right`.

Methods

.prompt(options = {}): Trigger the display of the HTML prompt. More options can be passed into this method to override the ones passed when loading the plugin.

UA.then(sdk => {
    sdk.plugins.load('html-prompt', 'https://aswpsdkus.com/notify/v1/ua-html-prompt.min.js', {
            stylesheet: 'https://my.domain/path/to/some.css',
            askAgainDelay: 3600
        })
        .then(plugin => plugin.prompt())
});

Feedback

Was this page helpful?