Skip to content
Vuukle Docs

Install Vuukle on AMP pages

Vuukle works on Google AMP pages through <amp-iframe> for the comment / emote / share widgets and <amp-ad> for the in-widget monetization slot.

Before you start

Comments + monetization slot

<!-- Add to <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>


<!-- Where the comment thread should appear -->
<amp-ad width="336" height="280" type="doubleclick"
        data-slot="/213794966/amp/{HOST}"
        data-enable-refresh="30"
        data-multi-size="1x1,200x200,312x260,250x250,320x100,320x50,300x250,336x280"
        rtc-config='{"urls":["https://pb.vuukle.com/openrtb2/amp?tag_id={HOST}&w=ATTR(width)&h=ATTR(height)&ow=ATTR(data-override-width)&oh=ATTR(data-override-height)&ms=ATTR(data-multi-size)&slot=ATTR(data-slot)&targeting=TGT&curl=CANONICAL_URL&timeout=TIMEOUT&adcid=ADCID&purl=HREF"]}'>
</amp-ad>


<amp-iframe width="1" height="1" sandbox="allow-scripts" frameborder="0"
            src="https://pb.vuukle.com/load-cookie.html?max_sync_count=5">
  <amp-img layout="fill" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" placeholder></amp-img>
</amp-iframe>


<amp-iframe width="740" height="350" layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms allow-top-navigation"
            resizable frameborder="0"
            src="https://cdn.vuukle.com/amp.html?url={CANONICAL_URL}&host={HOST}&id={ARTICLE_ID}&apiKey={APIKEY}&title={ARTICLE_TITLE}&img={ARTICLE_IMAGE_URL}&tags={ARTICLE_CATEGORY}">
  <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>

Replace the bolded placeholders dynamically (from your CMS templating):

PlaceholderValue
{HOST}Your domain — no www. or https://. E.g. example.com
{CANONICAL_URL}The canonical URL of the article
{ARTICLE_ID}Unique article ID (alphanumeric)
{APIKEY}Your public API key
{ARTICLE_IMAGE_URL}Article hero image
{ARTICLE_TITLE}Article title
{ARTICLE_CATEGORY}Article section / category

Reactions (emotes) on AMP

<amp-iframe width="600" height="146" layout="responsive"
            sandbox="allow-scripts allow-same-origin allow-popups"
            resizable frameborder="0"
            src="https://cdn.vuukle.com/widgets/emotes.html?amp=true&apiKey={APIKEY}&host={HOST}&articleId={ARTICLE_ID}&img={ARTICLE_IMAGE_URL}&tags={ARTICLE_CATEGORY}&title={ARTICLE_TITLE}&url={CANONICAL_URL}&emotes=true&iconsSize=80&first=Happy&second=Unmoved&third=Amused&fourth=Excited&fifth=Angry&sixth=Sad">
</amp-iframe>

ShareBar on AMP

<amp-iframe width="600" height="350" layout="responsive"
            data-block-on-consent
            sandbox="allow-scripts allow-top-navigation allow-same-origin allow-modals allow-popups allow-forms"
            resizable frameborder="0"
            src="https://cdn.vuukle.com/amp-sharebar.html?url={CANONICAL_URL}&host={HOST}&id={ARTICLE_ID}&apiKey={APIKEY}&title={ARTICLE_TITLE}&img={ARTICLE_IMAGE}&tags={ARTICLE_CATEGORY}&openInSameTab=true&items={SHARE_ITEMS}&customUrl=https://{SHAREBAR_URLS}">
</amp-iframe>
Was this page helpful?
Help us improve — drop a note or open the dashboard.
Email support Open dashboard ↗ Suggest an edit ↗