Enable Custom Prompt Link

Created on 9 March 2024, about 1 year ago
Updated 19 March 2024, about 1 year ago

Problem/Motivation

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

Proposed resolution

Either:

  • Either altering `onesignal_json` using `hook_page_attachments`.
  • Create a new hook or form allowing you to add the promptOptions.

User interface changes

TBD

API changes

TBD

Data model changes

TBD

💬 Support request
Status

Active

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 about 1 year 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;
    }
    
  • Status changed to RTBC 7 days ago
  • 🇪🇸Spain aleix

    I need this approach too, maybe it could be rearranged to something like:

    onesignal.module line 135:

    // Grab any extra js to be included.
    $extra_js = \Drupal::service('module_handler')->invokeAll('onesignal_extra_js');
    + \Drupal::service('module_handler')->alter('onesignal_config', $config);
    

    to cover simply the declarations that not imply new functions. So then simply with a

    function mymodule_onesignal_config_alter(&$config) {
      $config['notifyButton']['size'] = 'small';
    }
    

    One can theme easily.

Production build 0.71.5 2024