Skip to main content

Accelerated Mobile Pages

AMP is a light-weight, stripped down HTML page that aims to improve reader experience. Coral comes with AMP support.

Enable AMP Support#

Go to Advanced Section in Configure and enable Accelerated Mobile Pages.

Note: With AMP enabled, the embed won't be protected by the frame-ancestors (MDN) header and relies on X-Frame-Options (MDN) instead.

How to integrate#

Put the following code into your AMP page and replace {{Ā CORAL_DOMAIN_NAMEĀ }} and {{Ā CORAL_STORY_URLĀ }} with the corresponding values. You can also pass storyID instead of storyURL by using ?storyID={{Ā CORAL_STORY_IDĀ }}.

<amp-iframeĀ  width=600 height=360Ā  layout="responsive"Ā  sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"Ā  resizableĀ  src="https://{{Ā CORAL_DOMAIN_NAMEĀ }}/embed/stream/amp?storyURL={{Ā CORAL_STORY_URLĀ }}">Ā  <div placeholder></div>Ā  <div overflow tabindex=0 role=button aria-label="Read more">Read more</div></amp-iframe>

Advanced Integration#

If you want to pass additional configuration to createStreamEmbed, then you have to create and host an html page ā€“ let's call it amp.html ā€“ with the following output and replace {{Ā CORAL_DOMAIN_NAMEĀ }} with the appropriate values.

This page is then used in src of <amp-iframe> above. It must be accessed over https and live on a different domain than the amp page. For example: src="https://{{ MY_AMP_PAGE }}?storyURL={{ CORAL_STORY_URL }}".

<!DOCTYPE html><html>  <head>    <title>Coral ā€“ AMP Embed Stream</title>    <meta charset="utf-8" />    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />    <meta name="viewport" content="width=device-width" />    <style>      body {        margin: 0;      }    </style>  </head>  <body>    <div id="coralStreamEmbed"></div>    <script src="https://{{Ā CORAL_DOMAIN_NAMEĀ }}/assets/js/embed.js"></script>    <script>      Coral.createStreamEmbed({        id: "coralStreamEmbed",        rootURL: "https://{{Ā CORAL_DOMAIN_NAMEĀ }}",        autoRender: true,        amp: true,      });    </script>  </body></html>

Single Sign On#

In the page created by following the Advanced Integration section, you'll need to inject your SSO auth scripts to get the {{ SSO_TOKEN }} for the current user. Integrating with amp-access is recommended which opens a 1st-party popup to not have browsers block your cookies.

Then you just pass accessToken: {{ SSO_TOKEN }} to the createStreamEmbed method.