AMP Usage Documentation

For the non-AMP documentation, click here

  1. Include the amp iframe script in the head section of your page
    <script type="text/javascript" async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js" ><script>
    				
  2. Add the amp-boilerplate CSS to the head section of your page
  3. Add the provided custom AMP CSS, available here, to the head section of your page.
  4. Include the desired widget on the page using the amp-iframe element. The widget type, placecode and ctaLink should be provided as query strings to the amp-iframe src attribute An example is provided below.
    						
    	<amp-iframe
    		class="widgetType4"
    		width="320"
    		height="145"
    		layout="responsive"
    		frameborder="0"
    		resizable
    		sandbox="allow-scripts"
    		src="https://pond-widgets.pelmorex.com/amp.html?widgetType=4&ctaLink=https://google.com&placecode=INDL0011&ctaLinkPos=left">
    		<amp-img
    			overflow
    			layout="fixed"
    			width="200"
    			height="65"
    			src="https://pond-widgets.pelmorex.com/images/twn_logo_dark.png"
    			placeholder>
    		</amp-img>
    	</amp-iframe>
    						
    					

Things to note:

  1. The highlighted sections in the snippet above should be changed depending on the type of widget you want to display
  2. The widgetType querystring should match the amp-iframe class. For example, to initialize widget type 6, set amp-iframe class to widgetType6 and widgetType querystring to 6
  3. Depending on the styles of other page elements surrounding the widgets, the widgets may appear to be cut off at the bottom. This is because of fixed heights set on the iframes at the various breakpoints. The CSS height values in the media queries linked above may need to change slightly. Just adjust the height values as needed.
  4. `ctaLinkPos` is optional and defaults to `right` if not specified


Widget 1

Widget 2

Widget 3

Widget 4

Widget 5

Widget 6

Widget 7