AMP floater example implementation

1. Paste this code in the <head> section of the AMP page:

Important: This code should only be added once. Ensure these elements are not already present before adding. In AMP, each library can only be included once, and duplicating the inclusion will result in an error, causing your AMP page to become invalid.

<script async src="https://cdn.ampproject.org/v0/amp-list-0.1.js" custom-element="amp-list"></script>
<script async src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" custom-element="amp-bind"></script>
<script async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" custom-element="amp-iframe"></script>
<script async src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js" custom-template="amp-mustache"></script>

2. Insert the following CSS styles in your tag <style amp-custom> on the AMP page:

.cl_amp_floater{--scaleFactor:0.33;position:fixed;bottom:20px;right:20px;width:300px;height:calc(600px + 25px / var(--scaleFactor));margin:15px 15px 15px 15px;transform:scale(var(--scaleFactor));transform-origin:bottom right;z-index:2147483645}.cl_amp_floater *{box-sizing:border-box}#clickio-floater-list{width:1px;height:1px;overflow:visible}@media screen and (max-width:430px){.cl_amp_floater{right:10px;bottom:10px}}

3. Add this code to the <body> of your AMP page:

<amp-state id="floatervisibilityState">
<script type="application/json">
    {
      "clhidefloater": false
    }
</script>
</amp-state>
<amp-list id="clickio-floater-list" class="clickio-floater-list" layout="fill" data-block-on-consent src="https://cns.clickiocdn.com/amp_360?source_url=SOURCE_URL&canonical_url=CANONICAL_URL&counter=COUNTER&document_referrer=DOCUMENT_REFERRER&viewer=VIEWER&scr_w=300&scr_h=676&scale=0.33&sid=XXXXXX&said=XXXXXX&btype=amp_floater">
<template type="amp-mustache">
<div class="cl_amp_floater">
	<amp-iframe data-block-on-consent resizable
		width="{{scr_w}}"
		height="{{scr_h}}"
		layout="responsive"
		id="clickio-floater-creative"
		frameborder="0"
		sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation"
		src="{{_frame_src}}"
		on="message:AMP.setState({floatervisibilityState: {clhidefloater: true}})">
		<div placeholder></div>
		<div overflow></div>
	</amp-iframe>
</div>
</template>
</amp-list>