Need help with Vuukle?🤔

This is the place you are looking for!

  1. Home
  2. Install Vuukle
  3. How to embed Vuukle on AMP pages

How to embed Vuukle on AMP pages

how toinstallamp

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 allow-top-navigation"
  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>
  1. Populate src url with parameters: url - Article URL host - Site Host id - article id apiKey - your api key title - article title
  2. 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

​