OneSignal Help & Documentation

Welcome to the OneSignal New IA developer hub. You'll find comprehensive guides and documentation to help you start working with OneSignal New IA as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Discussions

HTTP PopUp Prompt

OneSignal HTTP Pop-Up Prompt Details: Customizations, Triggering, and FAQ

🚧

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:

<img src="https://i.imgur.com/KuQcvEV.png"/ width="500">

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 by uploading an image or entering a link to an icon file that is at least 80x80 pixels (Recommended size is 192x192). The file must be .png or .jpg.

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 the 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

This section shows you how to trigger or show the HTTP Pop-Up Prompt. For visual customizations, jump down.

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

You may create your own button or link that calls registerForPushNotifications() to trigger the HTTP Pop-Up Prompt.


HTTP Pop-Up Prompt FAQ

How do I show the prompt in different languages?

This will require the Custom Code Setup. When you detect the browser language with your own setup code, you can initialize OneSignal with the language you want to show.

Updated about a year ago


HTTP PopUp Prompt


OneSignal HTTP Pop-Up Prompt Details: Customizations, Triggering, and FAQ

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.