HTTP PopUp Prompt

🚧
Requirement
The HTTP Pop-Up Prompt is required for HTTP sites.

HTTP ONLY - The HTTP Pop-Up Prompt comes up after a user clicks on another prompt like our Subscription Bell, Slide Prompt, or Custom Link.

This shows an example notification in the middle to help give users the understanding they are about to subscribe to push notifications.

The HTTP Pop-Up Prompt is presented in a separate pop-up window:

Customizing the HTTP Pop-Up Prompt

You can customize most text on the HTTP Pop-Up Prompt except the URL on the notification image (yourlabel.os.tc). You may enter text in your own language, but please note all fields are limited in length (usually to one line of text). Any fields you do not define will use their defaults.

Currently you cannot customize the color, size, or font.

You edit the icon in Step 2 Default Icon URL.

If you do not have a Default Notification Icon URL set, OneSignal will show a generic icon.

Typical Setup HTTP Pop-Up Customizations

Text customizations happen within Settings > All Browsers Configuration > Step 3 Permission Prompt Setup. Select the HTTP Pop-Up and toggle the Customize HTTP Pop-Up Prompt text to begin editing the message and button text.

When finished, press Save and Save again on the next page to see this go into effect.

WordPress HTTP Pop-Up Customizations

The OneSignal WordPress Plugin handles all available visual customizations through the plugin.

Custom Code Setup HTTP Pop-Up Customizations

The Custom Code Setup is for integrating OneSignal with your own custom Javascript. It is recommended to use the Typical Setup.

You may customize the text in the HTTP Pop-Up Prompt by using the promptOptions parameter in your init() options.

// Your other init options here
promptOptions: {
    /* Change bold title, limited to 30 characters */
    siteName: 'OneSignal Documentation',
    /* Subtitle, limited to 90 characters */
    actionMessage: "We'd like to show you notifications for the latest news and updates.",
    /* Example notification title */
    exampleNotificationTitle: 'Example notification',
    /* Example notification message */
    exampleNotificationMessage: 'This is an example notification',
    /* Text below example notification, limited to 50 characters */
    exampleNotificationCaption: 'You can unsubscribe anytime',
    /* Accept button text, limited to 15 characters */
    acceptButtonText: "ALLOW",
    /* Cancel button text, limited to 15 characters */
    cancelButtonText: "NO THANKS",
    autoAcceptTitle: 'Click Allow'
}

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "YOUR_APP_ID",
      subdomainName: "your_label", /* The label for your site that you added in Site Setup mylabel.os.tc */
      promptOptions: {
        /* Change bold title, limited to 30 characters */
        siteName: 'OneSignal Documentation',
        /* Subtitle, limited to 90 characters */
        actionMessage: "We'd like to show you notifications for the latest news and updates.",
        /* Example notification title */
        exampleNotificationTitle: 'Example notification',
        /* Example notification message */
        exampleNotificationMessage: 'This is an example notification',
        /* Text below example notification, limited to 50 characters */
        exampleNotificationCaption: 'You can unsubscribe anytime',
        /* Accept button text, limited to 15 characters */
        acceptButtonText: "ALLOW",
        /* Cancel button text, limited to 15 characters */
        cancelButtonText: "NO THANKS",
        autoAcceptTitle: 'Click Allow'
    }
    });
    OneSignal.showHttpPrompt();
  });
</script>

Triggering the HTTP Pop-Up Prompt

You can trigger the HTTP Pop-Up Prompt programmatically within the init code or use the OneSignal.showHttpPrompt(); to show at your leisure. Example below checks if user is subscribed first, then triggers the prompt.

OneSignal.push(function() {
  OneSignal.isPushNotificationsEnabled(function(isEnabled) {
    if (isEnabled)
      console.log("Push notifications are already enabled!");
    else
      console.log("Push notifications are not enabled yet.");
      OneSignal.showHttpPrompt();
  });
});

The HTTP Pop-Up Prompt gets triggered immediately after a user clicks the OneSignal Slide Prompt, Bell Prompt, or Custom Link Prompt.