{"id":414,"date":"2024-10-02T11:09:07","date_gmt":"2024-10-02T09:09:07","guid":{"rendered":"https:\/\/help.pushloop.io\/how-to-install-pushloop-for-amp\/"},"modified":"2024-10-16T12:42:31","modified_gmt":"2024-10-16T10:42:31","slug":"how-to-install-pushloop-for-amp","status":"publish","type":"post","link":"https:\/\/help.pushloop.io\/en\/how-to-install-pushloop-for-amp\/","title":{"rendered":"How to Install Pushloop for AMP"},"content":{"rendered":"\n

What is AMP?<\/strong> AMP (Accelerated Mobile Pages) is a framework created by Google to make websites faster and lighter on mobile devices. It is optimized for performance by limiting the use of custom JavaScript and promoting a simplified site structure. If your site is created entirely with AMP, Pushloop integration requires a specific configuration, different from the standard one. <\/p>\n\n

Here are the steps to install Pushloop on your AMP site.<\/p>\n\n

1. Registration and Site Creation<\/h2>\n\n

Follow the official guide here<\/a> to create an account and set up your site on Pushloop.<\/p>\n\n

2. Access to the AMP Integration Section.<\/h2>\n\n

After creating the site, instead of using the classic code shown in the “Manual Integration” guide, you must follow a specific path for AMP:<\/p>\n\n

    \n
  • Go to “Manage Site<\/strong>.”<\/li>\n\n\n\n
  • Click on the “Install”<\/strong> button corresponding to your site;<\/li>\n\n\n\n
  • On the new page, select “AMP Integration.”<\/strong><\/li>\n<\/ul>\n\n

    AMP integration is divided into three basic steps:<\/p>\n\n

    Step 1: Adding the Code in the Head<\/strong><\/h3>\n\n
    \"\"<\/figure>\n\n
    <\/div>\n\n

    At this stage, paste the provided script into the <head><\/code> section of your AMP site. This code is essential to connect your site to Pushloop and enable notification management. <\/p>\n\n

    Step 2: Configure the AMP Web Push Extension<\/strong><\/h3>\n\n
    \"\"<\/figure>\n\n
    <\/div>\n\n
      \n
    1. Download the three items needed via the yellow buttons provided in the panel:\n
        \n
      • AMP Script<\/strong>: This file handles push notifications in the AMP context.<\/li>\n\n\n\n
      • Notification consent page<\/strong>: It will help you manage users’ consent to receive notifications.<\/li>\n\n\n\n
      • Service Worker<\/strong>: This is needed to enable push notifications in the browser.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
      • Once downloaded, upload these files to the root of your site.<\/li>\n\n\n\n
      • After completing these steps, paste the code provided into the <body><\/code> tag on your site. This code will cause the notification system to start working. <\/li>\n<\/ol>\n\n
        \n

        Note<\/strong>: To accept notifications, since AMP does not allow pop-ups, you must have a non-AMP page open. This requires step 3 <\/p>\n<\/blockquote>\n\n

        Step 3: Add the Enrollment Widget<\/strong><\/h3>\n\n
        \"\"<\/figure>\n\n
        <\/div>\n\n

        Now you need to add subscribe and unsubscribe buttons, which allow users to subscribe to notifications by opening a non-AMP page:<\/p>\n\n

          \n
        1. Button style:<\/strong> you can customize the appearance of buttons that will otherwise have a standard AMP format. To do this, insert the customization code provided by Pushloop into the <head><\/code> tag on your site. <\/li>\n<\/ol>\n\n
          \n
          \n
          \"\"
          Standard AMP button<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
          \n
          \"\"
          Custom Button<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n\n
          <\/div>\n<\/div>\n\n
            \n
          1. Subscription button<\/strong>: Visible when the user is not subscribed. Clicking on this button will open a special non-AMP page to allow the user to accept notifications. <\/li>\n\n\n\n
          2. Unsubscribe button<\/strong>: Visible when the user is already subscribed, and is used to turn off notifications.<\/li>\n<\/ol>\n\n

            The code for the two subscribe and unsubscribe buttons should be inserted at the end of the tag <body><\/code>, so that they appear at the bottom left when you scroll down the page.<\/p>\n\n

            \n\n

            By following these steps, the Pushloop system for AMP will be properly installed and functioning, allowing your users to sign up and receive push notifications on your AMP site.<\/p>\n\n

            <\/p>\n","protected":false},"excerpt":{"rendered":"

            What is AMP? AMP (Accelerated Mobile Pages) is a framework created by Google to make websites faster and lighter on mobile devices. It is optimized for performance by limiting the use of custom JavaScript and promoting a simplified site structure. If your site is created entirely with AMP, Pushloop integration requires a specific configuration, different […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"footnotes":""},"categories":[20],"tags":[],"class_list":["post-414","post","type-post","status-publish","format-standard","hentry","category-settings-and-customizations"],"_links":{"self":[{"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/posts\/414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/comments?post=414"}],"version-history":[{"count":2,"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/posts\/414\/revisions"}],"predecessor-version":[{"id":422,"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/posts\/414\/revisions\/422"}],"wp:attachment":[{"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/media?parent=414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/categories?post=414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/help.pushloop.io\/en\/wp-json\/wp\/v2\/tags?post=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}