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.