HTML Prompt

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

Note

Web ScenesA single or multi-screen in-app experience cached on users’ devices and displayed when users meet certain conditions in your app or website, such as viewing a particular screen or when a Custom Event occurs. They can be presented in fullscreen, modal, or embedded format using the default swipe/click mode or as a Story. Scenes can also contain survey questions. can be used to collect push notification opt-ins. You may continue to use this plugin should you require its specific features, but the preferred method is to use a Scene to prompt for opting in.

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.

Two HTML prompt templates are available:

Template	Description	Example image
Alert	A basic alert, with configurable title, message, logo, and button fields
Bell	A small bell that stays fixed on the page

Loading the Plugin

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

Data center location	URL
North America	https://aswpsdkus.com/notify/v2/ua-html-prompt.min.js
EU	https://aswpsdkeu.com/notify/v2/ua-html-prompt.min.js

Loading the HTML Prompt Plugin (US Data Center)

UA.then(sdk => {
  sdk.plugins.load(
    // globally unique plugin identifier; we always use `html-prompt`
    'html-prompt',
    // URL to the html-prompt script; this example is for the US data center
    'https://aswpsdkus.com/notify/v2/ua-html-prompt.min.js',
    // options passed to the plugin
    {type: 'alert'}
  )
})

See below for the full list of options you may use when loading the plugin.

Options

Options for the alert and bell templates:

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

Options for the alert template only:

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

Option for the bell template only:

Key	Type	Description	Default value
position	string	The position of the alert on the webpage, one of `top-left`, `top-right`, `bottom-left`, or `bottom-right`	bottom-left

Methods

Use .prompt(options = {}) to 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/v2/ua-html-prompt.min.js',
    {
      stylesheet: 'https://my.domain/path/to/some.css',
      askAgainDelay: 3600
    }
  )
    .then(plugin => plugin.prompt())
});

Feedback

Was this page helpful?