close this to read article
An Accelerated Mobile Page (or AMP, for short) is a project from Google and Twitter designed to make really fast mobile pages. In essence, it's a stripped-down form of HTML, that loads your website faster on mobile browsers.
Note: AMP Feature is enabled only for HTTPS Implementation of VWO Engage.
How to Set Up VWO Engage on your AMP?
- For all AMP pages on your site that you'd like to enable web push notifications, add the following script within your AMP page's <head> section to enable the components:
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script> - Configure the AMP Push Notifications extension by downloading the files below(right-click these files and select 'Save Link As...') and adding them to the root directory (/) of your website: i. amp-web-push-helper-frame.html
ii. amp-web-push-permission-dialog.html - Add the Code in your AMP site's <head> to initialize amp-web-push
<amp-web-push id="amp-web-push" layout="nodisplay"
NOTE: Replace ‘YOURDOMAIN’ with the domain where your users subscribe and ensure you enter the 'service-worker-url' path with the path of your service worker file(pushcrew-sw.js) placed in the root directory of your website
helper-iframe-url="https://yourdomain.com/amp-web-push-helper-frame.html"
permission-dialog-url="https://yourdomain.com/amp-web-push-permission-dialog.html"
service-worker-url="https://yourdomain.com/pushcrew-sw.js"></amp-web-push> - Then, add the below code in the <body> to show the Opt-in on your AMP Pages:
<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="48">
<button class="subscribe" on="tap:amp-web-push.subscribe">
<amp-img
class="subscribe-icon"
width="24"
height="24"
layout="fixed"
src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyMCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTkuNTI1MjUgMjRDNy45Njg3NyAyNCA2LjcwNjIxIDIyLjczODYgNi43MDYyMSAyMS4xODA5SDEyLjM0MzlDMTIuMzQ0MiAyMi43Mzg2IDExLjA4MTcgMjQgOS41MjUyNSAyNFpNMTkuMDUxMiAxOC4zNTQyQzE5LjA1MTIgMTkuMzk2NiAxOC4yMDU4IDE5LjQ2NTEgMTcuMTY0MSAxOS40NjUxSDEuODg2MTFDMC44NDQwMjQgMTkuNDY1MSAwIDE5LjM5NjUgMCAxOC4zNTQxVjE4LjE3NDVDMCAxNy40MjQ5IDAuNDQwMjI4IDE2Ljc4MyAxLjA3Mjc0IDE2LjQ3ODVMMS42NzE1NiAxMS4zMDk2QzEuNjcxNTYgNy41MjU1MSA0LjM0NzYzIDQuMzY3MTUgNy45MTAyMiAzLjYyMjAxVjEuNjE1MzNDNy45MTAyMiAwLjcyMzMwNCA4LjYzMzUyIDAgOS41MjU5OCAwQzEwLjQxOCAwIDExLjE0MTMgMC43MjMzMDQgMTEuMTQxMyAxLjYxNTMzVjMuNjIyMTZDMTQuNzAzOSA0LjM2NzE1IDE3LjM4IDcuNTI1MjIgMTcuMzggMTEuMzA5N0wxNy45Nzg4IDE2LjQ3OTRDMTguNjExMyAxNi43ODQzIDE5LjA1MTIgMTcuNDI1MSAxOS4wNTEyIDE4LjE3NDdWMTguMzU0MloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=">
</amp-img>
Subscribe to updates
</button>
</amp-web-push-widget>
<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="300" height="48">
<button class="unsubscribe" on="tap:amp-web-push.unsubscribe">Unsubscribe from updates</button>
</amp-web-push-widget> - Add the styling for your widget using the CSS below:
<style amp-custom>
amp-web-push-widget button.subscribe,
amp-web-push-widget button.unsubscribe {
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
border-radius: 4px;
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0 25px;
cursor: pointer;
outline: none;
font-size: 16px;
font-weight: 600;
background: #3D7CF5;
color: white;
height: 48px;
line-height: 48px;
}
amp-web-push-widget button.subscribe .subscribe-icon {
margin-right: 16px;
}
amp-web-push-widget button.unsubscribe {
background-color: #fff;
border: 1px solid #D9DDE1;
color: #788290;
padding: 0 40px;
}
</style>
After you have completed the above-mentioned steps, VWO Engage will be live on your AMP pages. Your visitors will be shown a Two-Step Opt-in to become a subscriber:
First Step:
In case of any further queries on setting this up, get in touch with support@vwo.com and help will be on its way :)