Push configuration examples

Real-world examples for push notification configuration with VAPID keys, Service Worker setup, and advanced features.
developer

Overview

This page contains comprehensive examples for push notification configuration using push_config with various setup patterns and real-world scenarios.

Basic push examples

Simple push setup

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/'
  }
});

Custom Service Worker path

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/js/service-worker.js',
    serviceWorkerScope: '/js/'
  }
});

CDN Service Worker

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: 'https://cdn.example.com/sw.js',
    serviceWorkerScope: '/'
  }
});

Advanced push examples

Subdomain subscription setup

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    push_enable_subdomain_subscription: true
  }
});

Limited scope Service Worker

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/dashboard/sw.js',
    serviceWorkerScope: '/dashboard/'
  }
});

Multiple Service Worker paths

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',        // Primary path
    customsw: '/custom-sw.js',           // Fallback 1
    pushserviceworker: '/alt-sw.js',     // Fallback 2
    service_worker_path: '/backup-sw.js', // Fallback 3
    serviceWorkerScope: '/'
  }
});

Push with modal prompts

Basic modal prompt

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    prompts: [
      {
        id: 'welcome-push-modal',
        template: 'welcome-push-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.new_user}}', o: 'eq', m: 'true' }
        ],
        options: {
          theme: 'auto',
          animation: 'fade-in'
        }
      }
    ]
  }
});

Multiple prompt strategies

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    prompts: [
      {
        id: 'new-user-prompt',
        template: 'new-user-push-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.user_type}}', o: 'eq', m: 'new' }
        ],
        options: {
          theme: 'light',
          animation: 'slide-up'
        }
      },
      {
        id: 'returning-user-prompt',
        template: 'returning-user-push-template',
        triggers: [{ type: 'scroll', config: { threshold: 0.5 } }],
        filters: [
          { c: '{{data.user_type}}', o: 'eq', m: 'returning' }
        ],
        options: {
          theme: 'dark',
          animation: 'zoom-in'
        }
      }
    ]
  }
});

Exit intent push prompt

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    prompts: [
      {
        id: 'exit-intent-push-modal',
        template: 'exit-intent-push-template',
        triggers: [{ type: 'beforeunload' }],
        filters: [
          { c: '{{data.push_permission}}', o: 'eq', m: 'prompt' },
          { c: '{{data.time_on_page}}', o: 'gt', m: '30' }
        ],
        options: {
          theme: 'auto',
          animation: 'slide-up',
          limit_type: 'session',
          limit_count: 1
        }
      }
    ]
  }
});

E-commerce push examples

Cart abandonment push setup

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    prompts: [
      {
        id: 'cart-abandonment-prompt',
        template: 'cart-abandonment-template',
        triggers: [{ type: 'beforeunload' }],
        filters: [
          { c: '{{data.cart_items}}', o: 'gt', m: '0' },
          { c: '{{data.push_permission}}', o: 'neq', 'm': 'granted' }
        ],
        options: {
          theme: 'light',
          animation: 'slide-up'
        }
      }
    ]
  }
});

Product recommendation push

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    prompts: [
      {
        id: 'product-recommendation-prompt',
        template: 'product-recommendation-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.product_viewed}}', o: 'eq', m: 'true' },
          { c: '{{data.user_segment}}', o: 'eq', m: 'high_value' }
        ],
        options: {
          theme: 'auto',
          animation: 'fade-in',
          limit_type: 'session',
          limit_count: 1
        }
      }
    ]
  }
});

Multi-brand push examples

Brand-specific push setup

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    push_enable_subdomain_subscription: true,
    prompts: [
      {
        id: 'brand-specific-prompt',
        template: 'brand-push-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.brand}}', o: 'eq', m: 'premium' },
          { c: '{{data.push_eligible}}', o: 'eq', m: 'true' }
        ],
        options: {
          theme: 'dark',
          animation: 'zoom-in'
        }
      }
    ]
  }
});

Multi-tenant push configuration

Hood('init', 'TAG_ID', {
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    push_enable_subdomain_subscription: true,
    prompts: [
      {
        id: 'tenant-a-prompt',
        template: 'tenant-a-push-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.tenant}}', o: 'eq', m: 'tenant_a' },
          { c: '{{data.push_permission}}', o: 'eq', m: 'prompt' }
        ],
        options: {
          theme: 'light',
          animation: 'slide-up'
        }
      },
      {
        id: 'tenant-b-prompt',
        template: 'tenant-b-push-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.tenant}}', o: 'eq', m: 'tenant_b' },
          { c: '{{data.push_permission}}', o: 'eq', m: 'prompt' }
        ],
        options: {
          theme: 'dark',
          animation: 'fade-in'
        }
      }
    ]
  }
});

Complete configuration examples

Hood('init', 'TAG_ID', {
  // Core settings
  analytics: true,
  crashlytics: true,
  consent: { enabled: true },
  
  // Push configuration
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/sw.js',
    serviceWorkerScope: '/',
    push_enable_subdomain_subscription: true,
    prompts: [
      {
        id: 'welcome-push-modal',
        template: 'welcome-push-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.new_user}}', o: 'eq', m: 'true' },
          { c: '{{data.push_permission}}', o: 'eq', m: 'prompt' }
        ],
        options: {
          theme: 'auto',
          animation: 'fade-in',
          limit_type: 'session',
          limit_count: 1
        }
      },
      {
        id: 'cart-abandonment-prompt',
        template: 'cart-abandonment-template',
        triggers: [{ type: 'beforeunload' }],
        filters: [
          { c: '{{data.cart_items}}', o: 'gt', m: '0' },
          { c: '{{data.push_permission}}', o: 'neq', m: 'granted' }
        ],
        options: {
          theme: 'light',
          animation: 'slide-up'
        }
      }
    ]
  },
  
  // Modals configuration
  modals_config: {
    modals: [
      {
        id: 'welcome-modal',
        template: 'welcome-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.segment}}', o: 'eq', m: 'prospect' }
        ],
        options: {
          animation: 'fade-in',
          theme: 'light',
          limit_type: 'session',
          limit_count: 1
        }
      }
    ]
  },
  
  // Tags configuration
  tag_config: {
    tags: {
      'track-button': {
        triggers: [{ type: 'click', config: { selector: '.track-btn' } }],
        filters: [
          { c: '{{data.user_type}}', o: 'eq', m: 'premium' }
        ]
      }
    }
  }
});

Enterprise push setup

Hood('init', 'TAG_ID', {
  // Enterprise settings
  analytics: true,
  crashlytics: true,
  consent: { enabled: true },
  
  // Advanced push configuration
  push_config: {
    key: 'BExxx...VAPID...',
    push_serviceworker: '/enterprise-sw.js',
    serviceWorkerScope: '/app/',
    push_enable_subdomain_subscription: true,
    prompts: [
      {
        id: 'enterprise-welcome-prompt',
        template: 'enterprise-welcome-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.user_tier}}', o: 'eq', m: 'enterprise' },
          { c: '{{data.push_permission}}', o: 'eq', m: 'prompt' }
        ],
        options: {
          theme: 'dark',
          animation: 'zoom-in',
          limit_type: 'session',
          limit_count: 1
        }
      },
      {
        id: 'security-alert-prompt',
        template: 'security-alert-template',
        triggers: [{ type: 'pageView' }],
        filters: [
          { c: '{{data.security_alert}}', o: 'eq', m: 'true' },
          { c: '{{data.push_permission}}', o: 'neq', m: 'granted' }
        ],
        options: {
          theme: 'light',
          animation: 'slide-up'
        }
      }
    ]
  }
});

Best practices

Best practices

VAPID key security: Keep your VAPID private key secure on the server side

Service Worker optimization: Keep your Service Worker file lightweight and efficient

Permission timing: Request push permission at optimal moments (after user engagement)

Fallback strategies: Have alternative engagement methods for users who block notifications

Testing: Test push configuration in development before deploying to production