Enable Custom Prompt Link+ Upgrade Scripts to v16

Created on 9 March 2024, 8 months ago
Updated 23 March 2024, 8 months ago

Problem/Motivation

Instead of enabling the bell icon, I want to enable the Custom Link Prompt on one page.

Currently, this is not possible.

Also, for the `promptOptions.customlink` to work, we need to upgrade the SDK scripts to v16.

Proposed resolution

TBD.

Initial proposal:

  • Set `onesignal_json` to be a variable before `extra_js` to allow the configuration to be modified by the hook `onesignal_extra_js`.
  • Update SDK scripts (and init code) to v16.

User interface changes

N/A

API changes

Edits the pre-conditions and post-conditions of `hook_onesignal_extra_js`.

It should be backwards compatible though, as the variable name is uncommon.

Data model changes

N/A

💬 Support request
Status

Needs review

Version

3.0

Component

Code

Created by

🇨🇦Canada Nathan Tsai

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • Issue created by @Nathan Tsai
  • Status changed to Needs review 8 months ago
  • 🇨🇦Canada Nathan Tsai

    The proposed change is fairly simple:

    diff --git a/onesignal.module b/onesignal.module
    index b1063c7e3ef42044800dce580efebbad20c60470..d17f4eef031dfc308871fd58d886a4e0784de389 100644
    --- a/onesignal.module
    +++ b/onesignal.module
    @@ -140,8 +140,9 @@ function onesignal_page_attachments(&$attachments) {
         '#template' => "
             var OneSignal = window.OneSignal || [];
             OneSignal.push(function() {
    +          var ___OneSignalDrupalModuleConfig = {{ onesignal_json|raw }};
               {{ extra_js|raw }}
    -          OneSignal.init({{ onesignal_json|raw }});
    +          OneSignal.init(___OneSignalDrupalModuleConfig);
             });
           ",
         '#context' => [
    

    This allows `extra_js` to modify `___OneSignalDrupalModuleConfig`, e.g.

    // Source: https://documentation.onesignal.com/docs/custom-link-prompt#step-3-provide-configuration
    ___OneSignalDrupalModuleConfig ['promptOptions'] = {
      customlink: {
        enabled: true, /* Required to use the Custom Link */
        style: "button", /* Has value of 'button' or 'link' */
        size: "medium", /* One of 'small', 'medium', or 'large' */
        color: {
          button: '#E12D30', /* Color of the button background if style = "button" */
          text: '#FFFFFF', /* Color of the prompt's text */
        },
        text: {
          subscribe: "Subscribe to push notifications", /* Prompt's text when not subscribed */
          unsubscribe: "Unsubscribe from push notifications", /* Prompt's text when subscribed */
          explanation: "Get updates from all sorts of things that matter to you", /* Optional text appearing before the prompt button */
        },
        unsubscribeEnabled: true, /* Controls whether the prompt is visible after subscription */
      }
    }
    

  • 🇨🇦Canada Nathan Tsai

    Final code to enable a custom prompt + bell notification.

    Requires updating the script to v16.

    (Remember to enable permissions for the OneSignal scripts to load!)

    function MY_MODULE_onesignal_extra_js() {
    
      $current_path = \Drupal::service('path.current')->getPath();
      if ($current_path != '/node/777') {
        return;
      }
    
      $addCustomPrompt = "
        // Source: https://documentation.onesignal.com/docs/custom-link-prompt#step-3-provide-configuration
        var promptOptions = {
          promptOptions: {
            customlink: {
              enabled: true, /* Required to use the Custom Link */
              style: 'button', /* Has value of 'button' or 'link' */
              size: 'medium', /* One of 'small', 'medium', or 'large' */
              color: {
                button: '#E12D30', /* Color of the button background if style = 'button' */
                text: '#FFFFFF', /* Color of the prompt's text */
              },
              text: {
                subscribe: 'Subscribe to push notifications', /* Prompt's text when not subscribed */
                unsubscribe: 'Unsubscribe from push notifications', /* Prompt's text when subscribed */
                explanation: 'Get updates from all sorts of things that matter to you', /* Optional text appearing before the prompt button */
              },
              unsubscribeEnabled: true, /* Controls whether the prompt is visible after subscription */
            }
          }
        }
    
        var notifyButton = {
          notifyButton: {
              enable: true
          },
        };
    
        var serviceWorkerOptions = { 
          serviceWorkerParam: { scope: '/OneSignal/' },
          serviceWorkerPath: 'OneSignal/OneSignalSDKWorker.js',
        };
    
        Object.assign(___OneSignalDrupalModuleConfig, promptOptions, notifyButton, serviceWorkerOptions);
      ";
    
      return $addCustomPrompt;
    }
    
Production build 0.71.5 2024