JourneysUsersSDKIntegrations
Log InSign Up

HTTP PopUp Prompt

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

Suggest Edits

❗️

Deprecation Notice

OneSignal stopped supporting new apps from using Blogger, Bubble, Squarespace, Webflow, Weebly, Wix, HTTP sites, and website builders that don't support uploading Service Workers to a server (which are required for web push).

We used to provide a workaround subdomain like https://LABEL_HERE.os.tc so we would host the Service Worker files for you, but this isn't going to be supported anymore for several reasons, the most important being:

  • This doesn't work for iOS Web Push
  • It provides a bad User Experience for your users
  • Chrome is making a change detailed in their storage partitioning plans / CHIPS which when enabled prevents our SDK from checking unsubscribe stats when using the https://LABEL_HERE.os.tc/unsubscribe page.

If you currently use the the os.tc subdomain, you can continue to use it but will no longer be able to prompt for push notifications. Your existing subscriptions will continue to receive notifications. Starting September 8th, Chrome's change will prevent users from being able to unsubscribe when they visit the https://LABEL_HERE.os.tc/unsubscribe page. They will need to unsubscribe from the browser notification settings.

Sorry for the inconvenience. We know a lot of people want this. Especially for blogger, hopefully the Google Team will support this someday: Is it possible that I can build progressive web app for my Blogger blog

If you use one of these types of site builders, you may be able to work around this by following our Typical Website setup and put a CDN in front of your domain to host the OneSignalSDKWorker.js Service Worker file. But this is quite technical and we don't have any guidance on how to setup the CDN.

📘

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.

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 3 months ago