This section is not necessary to integrate unless you’re trying to integrate Braze on an AMP page.
As a result, the Braze SDK cannot be loaded onto an AMP page. However, the AMP project does provide a component that supports Web push. The following instructions detail how to set up that component and reference the following documentation on the
Step 1: Include AMP web push script
Add the following async script tag to your head:
1 <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
Step 2: Add a subscription and unsubscription widget
You’ll need to add a widget that allows users to subscribe and unsubscribe from push. This should live inside the body of your HTML and can be styled however you see fit.
1 2 3 4 5 6 7 8 9 <!-- A subscription widget --> <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80"> <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button> </amp-web-push-widget> <!-- An unsubscription widget --> <amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80"> <button on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button> </amp-web-push-widget>
Step 3: Download helper iFrame and permission dialog
The AMP Web Push component works by creating a popup that handles the push subscription. As a result, you’ll need to include a couple of helper files in your project. Download the helper-iframe.html file and permission-dialog.html file and store them on your site.
Step 4: Create a service worker file
service-worker.js file with the following content, and place it in the root directory of your website:
Step 5: Configure the AMP web push HTML element
You’ll now need to add the
amp-web-push HTML element to your page. Drop the following HTML code into the body of your document:
1 2 3 4 5 6 7 <amp-web-push layout="nodisplay" id="amp-web-push" helper-iframe-url="FILE_PATH_TO_YOUR_HELPER_IFRAME" permission-dialog-url="FILE_PATH_TO_YOUR_PERMISSION_DIALOG" service-worker-url="FILE_PATH_TO_YOUR_SERVICE_WORKER?apiKey=YOUR_API_KEY&baseUrl=YOUR_BASE_URL" >
In particular, the
service-worker-URL requires appending your
baseUrl (https://dev.appboy.com/api/v3) as query parameters.
You should now be configured for push subscription and unsubscription on your AMP page.