# HTML Prompt for the Web SDK

Allow users to express their interest in notifications prior to registration.
> **Note:** Web [Scenes](https://www.airship.com/docs/reference/glossary/#scene) 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](https://www.airship.com/docs/images/plugin-alert_hu_38706957b4f0b890.webp) |
| **Bell** | A small bell that stays fixed on the page | ![HTML Prompt for the Web SDK](https://www.airship.com/docs/images/plugin-bell_hu_8b3c3bd1247b7036.webp) |

## Loading the Plugin

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

* **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)**


```js
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.

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