Flowcards activation on AMP pages

Q: How do I integrate Flowcards with AMP Consent for GDPR compliance?

Add the attribute data-block-on-consent with value _till_responded to both the amp-script and amp-iframe elements. This delays Flowcard loading until the user responds to the consent prompt.

Q: How do I update the Flowcards AMP version?

Get the latest hash from the csp-hash.txt endpoint, then replace the script-sha value in all four locations: the amp-script-src meta tag, the amp-script src, the amp-iframe src and dynamic src, and the amp-state src version parameter.

Flowcard experiences can run on AMP pages by inserting a small set of HTML elements into your AMP page source. This guide walks through each required component: AMP extensions, CSS rules, the security hash, and the Flowcard HTML block.

Prerequisites

A Marfeel account with Experiences enabled
AMP pages with access to modify the HTML source
Your Marfeel Account ID (same as your Compass account ID)

Add AMP extensions

Three AMP extensions are required in your page <head>:

Add Flowcard CSS

Append these CSS rules to your AMP custom styles (<style amp-custom>):

.mrf-flowcards-position-fixed {
    position: fixed;
    z-index: 2147483647;
}
#mrf-flowcards-wrapper {
    top: 0;
    transform: translate3d(0, var(--transform, 100%), 0);
    transition: var(--transition);
}
amp-img.mrf-hero-element-contain img {
    object-fit: cover;
}

Add the script hash

AMP requires a content security hash to allow script execution. Add a meta tag inside the document <head>:

<meta name="amp-script-src" content="${script-sha}">

To get the current hash:

Open https://flowcards.mrf.io/statics/experience-amp/latest/csp-hash.txt
Copy the hash string.
Replace ${script-sha} in the meta tag with the copied value.

The hash corresponds to the latest Flowcards build and changes when Marfeel publishes an update.

Add the Flowcard HTML

Place the following HTML before your page content, at the beginning of the <body> tag. Position matters: placing it first ensures the fastest load.

<amp-script
    layout="fixed-height"
    src="https://flowcards.mrf.io/statics/experience-amp/${script-sha}/card-transitioner.es2015.js"
    height="1px"
    style="opacity: 1;"
    media="screen and (max-width:800px)"
>
    <amp-state id="flowcardsState"
        src="https://flowcards.mrf.io/json/active?page_technology=1&site_id=${ACCOUNT-ID}&client_id=CLIENT_ID(compass_uid)&canonical_url=CANONICAL_URL&hostname=CANONICAL_HOSTNAME&location=CANONICAL_URL&referrer=EXTERNAL_REFERRER&page_view_id_64=PAGE_VIEW_ID_64&scroll_height=SCROLL_HEIGHT&geo=__INJECT_GEO__&cid=_ga:CLIENT_ID(AMP_ECID_GOOGLE,,_ga),comScore:CLIENT_ID(comScore),compass_uid:CLIENT_ID(compass_uid)&version=${script-sha}">
    </amp-state>
    <div id="mrf-flowcards-wrapper" class="mrf-flowcards-position-fixed">
        <div id="mrf-flowcards-content-wrapper">
            <amp-iframe
                layout="fill"
                frameborder="0"
                sandbox="allow-scripts allow-top-navigation-by-user-activation allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox"
                [src]="flowcardsState.iframeUrl || 'https://flowcards.mrf.io/statics/experience-amp/${script-sha}/flowcards-content.html'"
                src="https://flowcards.mrf.io/statics/experience-amp/${script-sha}/flowcards-content.html"
            >
                <div placeholder>
                    <div class="mrf-flowcards-loader"></div>
                </div>
            </amp-iframe>
        </div>
    </div>
</amp-script>

Important: Replace ${ACCOUNT-ID} with your Marfeel Account ID. Replace ${script-sha} in all three locations with the hash from the previous step.

About the code:

The <amp-state> element links to your Flowcards configuration. It must be included for the card to function.
Both src and [src] attributes are required on the <amp-iframe>. The dynamic [src] updates the card URL; the static src provides a fallback.
Customize the placeholder content (<div class="mrf-flowcards-loader">) with a loading message in your site's language.

Verify the installation

After adding the code, open your AMP page on a mobile device or in Chrome DevTools with mobile emulation enabled. Scroll down and confirm the Flowcard appears at the bottom of the viewport. It will only display if a Flowcard experience is active and published for that page.

If the Flowcard does not appear, check:

The ${script-sha} hash matches in all three locations (meta tag, amp-script src, amp-iframe src).
The ${ACCOUNT-ID} matches your Marfeel Account ID.
At least one Flowcard experience is published and targeting the current page.
The page is viewed at 800px width or below (the media attribute restricts display to mobile viewports).

For additional debugging steps, see Testing and Troubleshooting.

If you use <amp-consent> for GDPR or privacy compliance, add data-block-on-consent="_till_responded" to both the <amp-script> and <amp-iframe> elements:

<amp-script data-block-on-consent="_till_responded">
    <!-- Flowcards code -->
    <amp-iframe data-block-on-consent="_till_responded">
        <!-- iframe content -->
    </amp-iframe>
</amp-script>

This delays Flowcard loading until the user responds to the consent prompt, ensuring consent is properly propagated inside the Flowcard.

AMP Next Page integration

If you use <amp-next-page> for infinite scroll, add the next-page-hide attribute to the <amp-script> element. This prevents the Flowcard from loading multiple times as new pages append to the DOM:

<amp-script
    layout="fixed-height"
    src="https://flowcards.mrf.io/statics/experience-amp/${script-sha}/card-transitioner.es2015.js"
    height="1px"
    style="opacity: 1;"
    media="only screen and (max-width:800px)"
    next-page-hide
>

Important: Only add next-page-hide if you are using <amp-next-page>. Adding it without that component may invalidate your AMP page.

Hide Flowcards on element intersection

Some pages have bottom-of-article modules (related content, footer widgets) that visually conflict with a Flowcard at the same position. You can force the Flowcard to hide when a specific element enters the viewport.

Intersection Observer triggers are not available in AMP. Use AMP Animation and Position Observer instead:

Add two extensions to your <head>:

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

Add the animation and observer next to your <amp-script>:

<amp-animation id="mrfHideFlowcardsAnimation" layout="nodisplay">
    <script type="application/json">
    {
        "duration": "2s",
        "fill": "forwards",
        "animations": [
            {
                "selector": "#mrf-flowcards-wrapper",
                "keyframes": [{"transform": "translate3d(0, 200vh, 0)"}]
            },
            {
                "selector": "#mrf-flowcards-foreground",
                "keyframes": [
                    {"offset": 0.9, "transform": "scale(1)", "opacity": 0},
                    {"offset": 1, "transform": "scale(0)", "opacity": 0}
                ]
            }
        ]
    }
    </script>
</amp-animation>
<amp-position-observer
    id="mrfHideFlowcardsPositionObserver"
    target="{observable-element-id}"
    intersection-ratios="0"
    on="enter:mrfHideFlowcardsAnimation.start"
    layout="nodisplay"
>
</amp-position-observer>

Replace {observable-element-id} with the id of the element whose appearance should trigger the Flowcard to hide. For more on how AMP transformations work with Flowcards, see the dedicated reference.

Update the Flowcards version

Marfeel periodically updates the Flowcards AMP build. When an update is available:

Get the latest hash from https://flowcards.mrf.io/statics/experience-amp/latest/csp-hash.txt
Replace ${script-sha} in all four locations:
- <meta name="amp-script-src"> content
- <amp-script> src
- <amp-iframe> src and [src]
- <amp-state> src (version parameter)

Going deeper

Experience Manager Overview: The four-tab editor walkthrough.
Delivery & Scheduling
Triggers
Targeting
A/B Testing
Blueprints
Inline: DOM injection, CSS selector placement, and visual element selector.
Popups: Modal vs contextual modes, position, triggers, and orchestration.
Flowcards: Isolated AMP rendering, snap points, card icons, and browser history integration.
Tag Experiences: SDK configuration for tracking, integrations, and third-party tools.
Recommender: Configure recommendation engines and layouts.
Page Transformations
Testing and Troubleshooting: Preview, live test, and debug your experiences.
Web Activation: How the SDK delivers experiences on your site.
AMP Activation: Run Flowcards on AMP pages.

What AMP extensions are required for Flowcards?

Flowcards on AMP require three extensions: AMP-script, AMP-iframe, and AMP-bind. All three must be included in the page <head> element.

How do I integrate Flowcards with AMP Consent for GDPR compliance?

Add data-block-on-consent="_till_responded" to both the <amp-script> and <amp-iframe> elements. This delays Flowcard loading until the user responds to the consent prompt.

How do I update the Flowcards AMP version?

Get the latest hash from the csp-hash.txt endpoint, then replace the ${script-sha} value in all four locations: the amp-script-src meta tag, the <amp-script> src, the <amp-iframe> src and dynamic [src], and the <amp-state> src version parameter.