Need help with Vuukle?🤔

This is the place you are looking for!

How to embed Vuukle on AMP pages

Updated over a month ago

Before you start

How to install

  1. Add the following code to the page

    <amp-iframe width="600" height="350" layout="responsive" sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms" resizable frameborder="0" src="ARTICLE-URL-HERE">
    <div overflow tabindex="0" role="button" aria-label="Show comments" style="display: block;text-align: center;background: #1f87e5;color: #fff;border-radius: 4px;">Show comments</div>
    </amp-iframe>
  2. Populate src url with parameters:

    url - Article URL

    host - Site Host

    id - article id

    apiKey - your api key

    title - article title

  3. Add AD code to the page

<amp-ad width=300 height=250
   type="doubleclick"
   data-slot="/213794966/amp/{host}"> //host should not contain http, https or www.
 <div placeholder></div>
 <div fallback></div>
</amp-ad>
  1. Refer to the amp-iframe documentation and amp-ad documentation add the required amp-iframe and amp-ad script to your document’s <head>. :
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

You can check working samples here

​