1. Home
  2. /Developer
  3. /SDK Integrations
  4. /Web
  5. /Plugins
  6. /HTML Prompt for the Web SDK

HTML Prompt for the Web SDK

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

 Note

Web ScenesA mobile app or web experience of one or more screens displayed with fully native UI components in real time, providing immediate, contextual responses to user behaviors. Scenes can be presented in full-screen, modal, or embedded format using the default swipe/click mode or as a Story. They 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
HTML Prompt for the Web SDK
Bell A small bell that stays fixed on the page
HTML Prompt for the Web SDK

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())
});