> ## Documentation Index
> Fetch the complete documentation index at: https://moengage-sdk-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Configure and Integrate AMP Web Push

<Info>
  **AMP Web Push Integration Prerequisites**

  1. Ensure that AMP analytics is integrated before integrating AMP Web Push.
  2. Ensure that AMP analytics is integrated before integrating AMP Web Push.
  3. MoEngage AMP Web Push Integration does not, by default, track the MoEngage default user attributes and events.
</Info>

## AMP Web Push

Web Push Notification does not work by using the MoEngage Web SDK and serviceworker.js.\
Google has recently published a separate plugin to support the integration that enables News Publishers, Bloggers, or anyone who uses AMP to deliver their webpages quickly by encouraging users to subscribe using Push Notification.

<Info>
  Only Android devices are supported.
</Info>

Follow these steps to integrate AMP Web Push:

## Add AMP Web Push script

Add this line in the `<head>` section of your .amp file where you want to use Web Push.

<CodeGroup>
  ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}}
  <script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>
  ```
</CodeGroup>

## Add Helper files

Download the files corresponding to the dashboard you are using and ensure the files are available in the root directory of your website. Right-click and click **Save Link as...** to save the files:

| Dashboard host            | Files                                                                                                                                                                                                                                                                            |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| dashboard-01.moengage.com | 1. [amp-helper-frame.html](https://cdn.moengage.com/release/dc_1/amp-helper-frame.html)2. [amp-permission-dialog.html](https://cdn.moengage.com/release/dc_1/amp-permission-dialog.html)3. [serviceworker\_amp.js](https://cdn.moengage.com/release/dc_1/serviceworker_amp.js)   |
| dashboard-02.moengage.com | 1. [amp-helper-frame.html](https://cdn.moengage.com/release/dc_2/amp-helper-frame.html) 2. [amp-permission-dialog.html](https://cdn.moengage.com/release/dc_3/amp-permission-dialog.html) 3. [serviceworker\_amp.js](https://cdn.moengage.com/release/dc_3/serviceworker_amp.js) |
| dashboard-03.moengage.com | 1. [amp-helper-frame.html](https://cdn.moengage.com/release/dc_3/amp-helper-frame.html) 2. [amp-permission-dialog.html](https://cdn.moengage.com/release/dc_3/amp-permission-dialog.html) 3. [serviceworker\_amp.js](https://cdn.moengage.com/release/dc_3/serviceworker_amp.js) |
| dashboard-04.moengage.com | 1. [amp-helper-frame.html](https://cdn.moengage.com/release/dc_4/amp-helper-frame.html) 2. [amp-permission-dialog.html](https://cdn.moengage.com/release/dc_4/amp-permission-dialog.html) 3. [serviceworker\_amp.js](https://cdn.moengage.com/release/dc_4/serviceworker_amp.js) |

## Add Code

Add the following code inside `<body>` tag:

<CodeGroup>
  ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}}
  <amp-web-push
  id="amp-web-push"
  layout="nodisplay"
  helper-iframe-url="https://DOMAIN.COM/amp-helper-frame.html"
  permission-dialog-url="https://DOMAIN.COM/amp-permission-dialog.html"
  service-worker-url="https://DOMAIN.COM/serviceworker_amp.js?app_id=WORKSPACE_ID"
  ></amp-web-push>
  ```
</CodeGroup>

Replace the following:

* DOMAIN.COM with your actual domain.
* WORKSPACE\_ID with your Workspace ID available at MoEngage Dashboard > Settings > General.

<Info>
  Ensure all files are available at the same source path and suffixed with HTTPS.
</Info>

## Add the Subscribe or Unsubscribe Buttons

Subscribe / Unsubscribe buttons or Amp Web Push Widgets are needed to subscribe or unsubscribe the user from AMP Web Push Notifications.

The following code adds the subscribe or unsubscribe buttons:

<CodeGroup>
  ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}}
  <div class="web-push">
  {/*  A subscription widget  */}
  <amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="45">
  <button class="subscribe" 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="45">
  <button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
  </amp-web-push-widget>
  </div>
  ```
</CodeGroup>

Use `<button>` or `<a>` with `on="tap:amp-web-push.subscribe"` for the button to work. You can:

* Modify the exact call to action of the button.
* Use your own text or leave it as it is.

## Style the Widgets using the code in CSS

Subscribe or Unsubscribe widget layout is fixed. However, you can design the button and layout by modifying the CSS. The default CSS is:

<CodeGroup>
  ```HTML HTML lines wrap theme={"theme":{"light":"github-light","dark":"github-dark"}}
  <style amp-custom>
  amp-web-push-widget button.subscribe {
  display: inline-flex;
  align-items: center;
  border-radius: 2px;
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 10px 15px;
  cursor: pointer;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  background: #4A90E2;
  color: white;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }
  amp-web-push-widget button.subscribe:active {
  transform: scale(0.9);
  }
  amp-web-push-widget button.unsubscribe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  border: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  background: transparent;
  color: #B1B1B1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  background-color: #eee;
  border-radius: 2px;
  }
  amp-web-push-widget button.unsubscribe:active {
  transform: scale(0.9);
  }
  </style>
  ```
</CodeGroup>
