AMP
  • websites

User Consent Modal UI

Introduction

Sometimes publishers want to display more disclosures in the initial consent prompt iframe. This sample demonstrates how you can use amp-consent together with a third-party iframe and style it to appear like a modal.

Setup

We need to import the amp-consent component.

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

We define a basic consent flow using the promptUISrc to load our custom consent iframe.

<amp-consent id="myUserConsent" layout="nodisplay">
  <script type="application/json">{
    "consentInstanceId": "myConsent",
    "consentRequired": true,
    "promptUISrc": "/static/samples/files/diy-consent.html",
    "postPromptUI": "post-consent-ui"
  }</script>
  <div id="post-consent-ui">
    <button on="tap:myUserConsent.prompt()">Update Consent</button>
  </div>
</amp-consent>

When the consent dialog iframe is ready, it can send the amp-consent component a postMessage with the style information.

window.parent.postMessage({
  type: 'consent-ui',
  action: 'ready',
  initialHeight: '80vh',
  enableBorder: true
}, '*');

Here, the initialHeight is a string that represents the viewport height that the iframe should take. A viewport height between 30 and 60, inclusive, will tell amp-consent to style the iframe in a bottom sheet. A viewport height greater than 60 and less than or equal to 80 will tell amp-consent to style the iframe as a centered modal.

Use data-block-on-consent attribute to block AMP components until consent is given. Individual AMP components can override blocking behavior and implement blocking logic themselves.

Here is an image which is blocked until consent is given:

<amp-img data-block-on-consent src="/static/samples/img/landscape_lake_300x201.jpg" width="300" height="201">
</amp-img>
هل تحتاج إلى مزيد من التوضيح؟

إذا لم تكن الإيضاحات الموجودة في هذه الصفحة تُجيب على جميع أسئلتك، فلا تتردد في التواصل مع مستخدمي AMP الآخرين لمناقشة حالة الاستخدام المحددة لديك بالضبط.

الذهاب إلى Stack Overflow
هل هي ميزة غير موضحة؟

يشجع مشروع AMP مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub