Push configuration examples
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
Full-featured push setup
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