Need help with Vuukle?🤔

This is the place you are looking for!

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

How to embed Vuukle Widgets and Ads on AMP pages

HOW-TOINSTALLAMP

Updated over a month ago

Before you start

How To Install Vuukle Comments

<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" title="User Sync" 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>
</center>
<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>

  1. Dynamically pass the following parameters in the code above:

    {HOST} : domain name without www. or https:// e.g. example.com.

    {CANONICAL_URL}: The canonical URL of the page.

    {ARTICLE_ID}: Unique ID of the article page which can be alphanumeric.

    {APIKEY}: Your Vuukle APIKEY can be found in your Vuukle Dashboard.

    {ARTICLEIMAGEURL}: - Article image link.

    {ARTICLE_TITLE}: - Title of the article.

    {ARTICLE_CATEGORY}: - Article section name.

    ONLY The strings marked in BOLD must be passed dynamically.

  2. 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>

How To Install Vuukle Reactions (Emotes)

<iframe 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"
name="emotes-iframe"
height="0"
id="emotes-iframe"
frameborder="0"
scrolling="no"
style="widht: 100%; min-widht: 100%; height: 146px;"
>

How To Install Vuukle Social Share Bar

<amp-iframe
width="600"
height="350" 
data-block-on-consent layout="responsive"
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=YOUR_APIKEY;title=ARTICLE_TITLE&img=ARTICLE_IMAGE&tags=ARTICLE_CATEGORY&openInSameTab=true&items=SHARE_ITEMS&customUrl=https://SHAREBAR_URLS">

You can check working samples here

​