User Guides Developer Guides API Reference Changelog
⌘ K

AMP Web Push Setup

Complete guide to setting up web push notifications for AMP pages using HoodEngage
developer

AMP Web Push Setup

This guide will walk you through setting up web push notifications for AMP (Accelerated Mobile Pages) using HoodEngage. AMP web push allows you to engage users with notifications even after they’ve left your AMP pages.

Overview

AMP web push notifications work by:

  1. Allowing users to subscribe to notifications from AMP pages
  2. Storing subscription data on Ocamba server
  3. Sending notifications through Ocamba platform
  4. Displaying notifications on users’ devices

Prerequisites

  • HoodEngage account with API access
  • HTTPS-enabled website
  • AMP pages already implemented

Step 1: Include AMP Web Push Component

Add the amp-web-push script to your AMP page’s <head> section:

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

Step 2: Download Required Files from HoodEngage

HoodEngage provides all the necessary files for AMP web push. Download these files from your HoodEngage dashboard:

  1. helper-frame.html - Helper iframe for communication
  2. permission-dialog.html - Permission dialog interface
  3. service-worker.js - Service worker for handling push events

Upload these files to your server’s root directory or a dedicated folder (e.g., /amp-webpush/).

Step 3: Configure AMP Web Push Element

Add the amp-web-push element to your AMP page body:

<amp-web-push
  layout="nodisplay"
  helper-iframe-url="https://yourdomain.com/helper-frame.html"
  permission-dialog-url="https://yourdomain.com/permission-dialog.html"
  service-worker-url="https://yourdomain.com/service-worker.js"
></amp-web-push>

Note: Replace https://yourdomain.com with your actual domain where you’ve uploaded the HoodEngage files.

Step 4: Add Subscription Widgets

Add subscription and unsubscription widgets to your AMP pages:

<!-- Subscription Widget (shown when user is not subscribed) -->
<amp-web-push-widget
  visibility="unsubscribed"
  layout="fixed"
  width="250"
  height="60"
  data-amp-bind-hidden="subscribed"
>
  <button on="tap:amp-web-push.subscribe" class="subscribe-btn">
    🔔 Subscribe to Updates
  </button>
</amp-web-push-widget>

<!-- Unsubscription Widget (shown when user is subscribed) -->
<amp-web-push-widget
  visibility="subscribed"
  layout="fixed"
  width="250"
  height="60"
  data-amp-bind-hidden="!subscribed"
>
  <button on="tap:amp-web-push.unsubscribe" class="unsubscribe-btn">
    🔕 Unsubscribe
  </button>
</amp-web-push-widget>

Custom Styling

Add custom CSS for your widgets:

<style amp-custom>
  .subscribe-btn, .unsubscribe-btn {
    background: #007bff;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s;
  }
  
  .subscribe-btn:hover {
    background: #0056b3;
  }
  
  .unsubscribe-btn {
    background: #6c757d;
  }
  
  .unsubscribe-btn:hover {
    background: #545b62;
  }
</style>

Step 5: HoodEngage Configuration

Dashboard Setup

  1. Log into your HoodEngage dashboard
  2. Navigate to AMP Web Push settings
  3. Configure your domain where the files are hosted
  4. Set up notification templates for different content types
  5. Configure targeting rules for your audience

API Integration

HoodEngage handles all server-side processing automatically. The provided service worker and helper files are pre-configured to work with HoodEngage’s infrastructure.

Step 6: Testing

Test Subscription Flow

  1. Load your AMP page in a supported browser
  2. Click the subscribe button - you should see the permission dialog
  3. Allow notifications when prompted by the browser
  4. Verify subscription is stored in your database
  5. Test unsubscription by clicking the unsubscribe button

Test Notifications

  1. Send a test notification from your HoodEngage dashboard
  2. Verify notification appears on the user’s device
  3. Test notification click to ensure it opens the correct URL
  4. Test notification dismissal and tracking

Verify HoodEngage Integration

  1. Check subscription data is being stored in HoodEngage
  2. Verify notification delivery through HoodEngage analytics
  3. Test different notification types (text, rich media, etc.)
  4. Monitor performance metrics in the dashboard

Troubleshooting

Common Issues

Notifications not appearing:

  • Verify HTTPS is enabled
  • Check service worker registration
  • Ensure notification permissions are granted
  • Verify HoodEngage files are properly uploaded and accessible

Subscription not working:

  • Check browser console for errors
  • Verify helper iframe and permission dialog URLs are accessible
  • Ensure HoodEngage files are correctly configured
  • Check HoodEngage dashboard for subscription data

AMP validation errors:

  • Ensure all required attributes are present
  • Verify script sources are from CDN
  • Check for custom CSS compliance
  • Validate HTML structure

Debug Mode

The HoodEngage service worker includes built-in debug logging. Enable it by setting the debug flag in your HoodEngage dashboard settings.

Best Practices

User Experience

  • Don’t prompt immediately - wait for user engagement
  • Provide clear value proposition - explain why they should subscribe
  • Make unsubscribing easy - always provide an unsubscribe option
  • Respect user preferences - don’t spam with notifications

Technical

  • Use HTTPS - required for web push
  • Handle errors gracefully - provide fallbacks for unsupported browsers
  • Test across devices - ensure compatibility
  • Monitor performance - use HoodEngage analytics to track subscription rates and engagement

Content Strategy

  • Personalize notifications - use HoodEngage targeting features for relevant content
  • Time notifications appropriately - use HoodEngage scheduling features
  • A/B test messaging - use HoodEngage’s built-in A/B testing tools
  • Track engagement metrics - monitor click-through rates in HoodEngage dashboard

Security Considerations

  • HoodEngage handles security - all subscription data is validated and secured
  • Use HTTPS everywhere - required for web push functionality
  • Trust HoodEngage infrastructure - all server-side processing is handled securely
  • Monitor dashboard access - ensure only authorized users can send notifications

Browser Support

AMP web push is supported in:

  • Chrome 42+
  • Firefox 44+
  • Safari 16+
  • Edge 17+

Note: Some features may have limited support in older browsers.

Next Steps

After completing the setup:

  1. Configure notification campaigns in HoodEngage dashboard
  2. Set up analytics tracking for notification performance
  3. Create notification templates for different content types
  4. Implement A/B testing for notification content using HoodEngage tools
  5. Monitor and optimize based on user engagement data from HoodEngage analytics

For more advanced features and customization options, refer to the HoodEngage API documentation and AMP web push documentation.

HoodEngage Benefits

  • No server-side coding required - HoodEngage handles all backend processing
  • Pre-configured files - Download and deploy ready-to-use components
  • Built-in analytics - Track performance and engagement metrics
  • Advanced targeting - Use HoodEngage’s sophisticated audience segmentation
  • A/B testing tools - Optimize notification content and timing
  • Scalable infrastructure - Handle millions of notifications reliably