AMP Web Push Setup

This guide shows how to implement AMP (Accelerated Mobile Pages) web push notifications using the Hood Web SDK.

Overview

AMP web push enables:

subscription directly from AMP pages,
communication with the Service Worker via the AMP channel,
sending subscriptions and events to Ocamba/HoodEngage backend,
delivering notifications to the user’s browser.

Requirements

Ocamba account
Configuration Key
Push API Key (VAPID public key)
HTTPS domain (required for Service Worker and Push)
AMP pages

Tip

Where to find these values in the Ocamba dashboard:

Configuration Key: Configurations → select configuration → Instructions tab (or “Copy Configuration Key” button at the top)
Push API Key: Configurations → select configuration → Push tab → “Push API Key” button

Tip

Pass your Push API Key (VAPID public key) via the data-push_key attribute on <script src="https://sdk.ocmcore.com/sdk/ht-latest.js"> inside helper-frame.html and permission-dialog.html.

Setup

Step 1: Include the AMP Web Push component

In the AMP page <head> add:

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

Step 2: Host the integration files

Host the following two HTML files on the same or allowed domain (e.g. under /amp/):

helper-frame.html
permission-dialog.html

In both files, include our SDK with AMP mode, your Configuration Key and Push API Key:

<script src="https://sdk.ocmcore.com/sdk/ht-latest.js" data-amp="1" data-tag="YOUR_CONFIGURATION_KEY" data-push_key="YOUR_PUBLIC_VAPID_KEY" crossorigin="anonymous"></script>

File naming and paths

You can name and place the files as you like. What matters are the URLs you pass to amp-web-push:

helper-iframe-url: URL to your helper frame HTML
permission-dialog-url: URL to your permission dialog HTML
service-worker-url: URL to your service worker script

Default example:

/amp/helper-frame.html
/amp/permission-dialog.html
/sw.js

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

Custom example (renamed and moved):

/push/amp-helper.html
/push/amp-dialog.html
/pwa/push-sw.js

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

Tip

If you change file names or locations, only update the three URLs above. Inside helper-frame.html and permission-dialog.html, make sure the SDK script points to the CDN (<script data-amp="1" src="https://sdk.ocmcore.com/sdk/ht-latest.js">) or to your self-hosted path.

Info

Service Worker scope depends on its path. If you need site-wide scope, serve the SW at the root (e.g. /sw.js). Placing it under a subpath limits scope to that path unless you register with a broader scope.

`amp-web-push` attributes

Attribute	Required	Description
`layout="nodisplay"`	Yes	AMP requires the component to be hidden.
`helper-iframe-url`	Yes	URL of your helper frame HTML.
`permission-dialog-url`	Yes	URL of your permission dialog HTML.
`service-worker-url`	Yes	URL of your service worker script.
`id`	Optional	Assign an element ID if you reference it elsewhere.

Step 3: Add the `amp-web-push` element to the AMP page

In the AMP page <body>:

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

Tip

All three URLs must be served over HTTPS and be allowed under the same origin policy as your AMP page.

Step 4: Add AMP subscribe/unsubscribe widgets

Place these widgets in your AMP page (inside the page <body>), on the same page where you added the amp-web-push component in Step 3. Do not place them in helper-frame.html or permission-dialog.html.

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

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

Minimal styles:

<style amp-custom>
  .subscribe-btn, .unsubscribe-btn {
    background:#007bff;color:#fff;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,.1);
    transition:background-color .2s;
  }
  .subscribe-btn:hover { background:#0056b3; }
  .unsubscribe-btn { background:#6c757d; }
  .unsubscribe-btn:hover { background:#545b62; }
</style>

Step 5: Service Worker

A Service Worker is required for AMP web push. Use our provided Service Worker and follow the setup steps here:

Service Worker guide

Info

In amp-web-push, set service-worker-url to the path where you serve your Service Worker (e.g. /sw.js). Ensure the scope matches your needs (site-wide vs. subpath).

Step 6: Include the SDK in AMP pages

In helper-frame.html and permission-dialog.html include the SDK:

<script src="https://sdk.ocmcore.com/sdk/ht-latest.js" data-amp="1" data-tag="YOUR_CONFIGURATION_KEY" data-push_key="YOUR_PUBLIC_VAPID_KEY" crossorigin="anonymous"></script>

data-amp="1" enables AMP mode (push.amp) in the SDK;
data-tag is your Configuration Key;
data-push_key is your Push API Key (VAPID public key) forwarded to the SW during subscription.

Tip

If you already use Auto‑Config (tag JSON), the SDK will fetch it and apply configuration. data-push_key can still be provided as a direct, fast way for AMP.

Permission dialog without auto‑config

If you disable auto‑config in permission-dialog.html (set data-disable-autoconf="1" on the SDK script), you must explicitly trigger the native prompt:

Option A (call after script loads):

<script>
  window.HoodEngage = [];
  function Hood() { HoodEngage.push(arguments) }
  Hood('pushrequestpermission');
</script>
<script src="https://sdk.ocmcore.com/sdk/ht-latest.js"
        data-amp="1"
        data-tag="YOUR_CONFIGURATION_KEY"
        data-push_key="YOUR_PUBLIC_VAPID_KEY"
        data-disable-autoconf="1"
        onload="myPrompt()"
        crossorigin="anonymous"></script>

Option B (use script onload):

<script>
  function myPrompt() {
    Hood('pushrequestpermission');
  }
  </script>
<script src="https://sdk.ocmcore.com/sdk/ht-latest.js"
        data-amp="1"
        data-tag="YOUR_CONFIGURATION_KEY"
        data-push_key="YOUR_PUBLIC_VAPID_KEY"
        data-disable-autoconf="1"
        onload="myPrompt()"
        crossorigin="anonymous"></script>

Info

These snippets are intended for permission-dialog.html only. Do not add them to your AMP page or helper-frame.html.

Testing

Example AMP page. Replace URLs with your domain and open it in the browser:

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

Test steps:

Load the AMP page (HTTPS).
Click “Enable Notifications” (widget) and allow notifications.
Verify the subscription (Ocamba dashboard / network traffic).
Send a test message and verify delivery and click.

Troubleshooting

No permission prompt: check HTTPS, sw.js URL, and that Notification.permission is still “prompt/closed”.
Subscription not returned: ensure data-push_key is present and sw.js handles amp-web-push-subscribe and posts a message back.
AMP validation: use the official amp-web-push script and keep CSS within AMP constraints.

Browser support

Browser	Minimum version
Chrome	42+
Firefox	44+
Safari	16+
Edge	17+

Note

Some capabilities may have limited support in older browser versions.

Next steps

Create campaigns and templates in Ocamba.
Enable tracking and segmentation aligned to your goals.
Test, measure, iterate.

For more details see the Hood API and the official AMP Web Push documentation.

LinkedIn Facebook Instagram

AMP Web Push Setup

AMP Web Push Setup

Overview

Requirements

Setup

Step 1: Include the AMP Web Push component

Step 2: Host the integration files

File naming and paths

amp-web-push attributes

Step 3: Add the amp-web-push element to the AMP page

Step 4: Add AMP subscribe/unsubscribe widgets

Step 5: Service Worker

Step 6: Include the SDK in AMP pages

Permission dialog without auto‑config

Testing

Troubleshooting

Browser support

Next steps

`amp-web-push` attributes

Step 3: Add the `amp-web-push` element to the AMP page