{"componentChunkName":"component---src-templates-blog-post-js","path":"/how-to-enable-vuukle-powerbar-on-my-page/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"0088b748-8c6d-5303-80d7-574a40b79534","html":"<p>If you would like to put social activity in first plan, you can enable Vuukle PowerBar. There are two options available – vertical and horizontal.</p>\n<br>\n<h2>Enable Vuukle PowerBar – Horizontal</h2>\n<p>To enable horizontad PowerBar, insert this line of code on your page:</p>\n<p><code class=\"language-text\">&lt;div class=&quot;vuukle-powerbar&quot;&gt;&lt;/div&gt;</code></p>\n<p>This is how end horizontal bar should look like:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 461px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/a7b59078e3c7a0c92e42827315ff04aa/f816d/powerbar-widget.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 14.583333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAADCAYAAACTWi8uAAAACXBIWXMAAAsSAAALEgHS3X78AAAA6UlEQVQI1xXOT0vCYACAcb9TH6Njh4gOItGlLh3qGOGh6N6hJI/ZwEhsQYX9E4I6NLA/bLKJ4oa1TSuK17leXe+TPh/gx5NinPKaYNwhGyadd5/vr0/6CsTFDeztUw9iRr+SkeuSRAP6rxYylhj+kHgCOCZqJ89f2CXFR4DKLsPMFJ2FaU4rV5zpJXaPHlid20bfyJOuDqnq98RrK7TWN2nMZjgp3DJ/LSm1BHZuEXMpDVE0BpMEVTmG3BY/5QKPtSccu07T7aFdWjwL0NrQ9UIG2iGi9kKvWOatHXJgSzyhcIxzAt+avPIP34TMXes7f6UAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enable Vuukle PowerBar 1\"\n        title=\"Enable Vuukle PowerBar 1\"\n        src=\"/static/a7b59078e3c7a0c92e42827315ff04aa/f816d/powerbar-widget.png\"\n        srcset=\"/static/a7b59078e3c7a0c92e42827315ff04aa/8ff5a/powerbar-widget.png 240w,\n/static/a7b59078e3c7a0c92e42827315ff04aa/f816d/powerbar-widget.png 461w\"\n        sizes=\"(max-width: 461px) 100vw, 461px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<br>\n<br>\n<br>\n<h2>Enable Vuukle PowerBar – Vertical</h2>\n<p>To enable vertical PowerBar, insert this line of code on your page:</p>\n<p><code class=\"language-text\">&lt;div class=&quot;vuukle-powerbar-vertical&quot;&gt;&lt;/div&gt;</code></p>\n<p>This is how end vertical bar should look like:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto;  max-width: 267px;\"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/e076fe493fbe74affe230c3cbb4ea58c/19e8f/how-to-enable-vuukle-powerbar-on-my-page-img-2.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 122.08333333333334%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAA7DAAAOwwHHb6hkAAAEn0lEQVQ4y11VS28cRRjMz0D8hty4cYQLSAQuBCGI4BIQQhAOOBJSEELkwIGIGJEDAhEHRURCIgIORhGYh4IJdrze3XlPT897Z3ZmX4ohdmJCPEV1rwUejzTe6V5vdX1ffVVzZDweQ10N5lcTuWi+/RiYFCiGFdIkgu8HCOMYs9kMw+GQd4mqqlBXNWQQYkIMx3GQ5hmOtAAvLaJ56wSa4w8Cxq8YzrbQ7ayh0+3D8l0N5rkubNtBt2shjWI+2+ibFvxAwBfyEODC82jOn0Fz9nW9d2s2RShDJFHKO8IfN9Y1UFmUcDyf7AJkWc69HsqyQBTlhwCzEM3bJ9F8/YneU/8shEDAkj1+mpbFZ4HBYADX9SBYruf7CGSAoqyQ8LMF2GxcR3PuTTQvHwW6K4irKYTrI45TSJZXFAOEZCWl1GW7ZNnrGwjJPktzHma3AffeOI77Sx9ib+FpYHsL5bCG2TVhWzaE76GuR5qdbbuI1QHlAN2egYDsPdfRbP8D3FN/Vq4Cp44B3yzpva3ZBFKoEguWI8lAwicrPxSIwgCbhgHHpTj5gIIR3Bb/A6qrvLWLCxd/QVTd1uuUpaoeCgKFZJQmCWyCeAQNyKbf6+kDNjc7CKIQ/fUbbcBTZ7/Dk699iZfOXJ0fQGae56HfN9EnkK3Gg2OTpikMrtVzKCM4HJ2c5UfCawMufrGKZ15dwnsXVvS6Kodseh89i/3xHAwHJQZ5DoM9jckoDsmqbyMKJCRbsLa23ga8e+8+zv+QYrZ9T6/raoico5MlKUfGgMvhtcisIPOMwC6V9oQPyzYQZRGEJw8CNnj35i4eXd7F6d/v6h3VJ5eWisjEJktlwZQWFCJAp8O+sUSL+2oKptMZWzFoA77w4w5eXNnBU8tzUWIpWFKfAywgCRZ4yhkJhmWpvavsJgke8N6+/ReCMG4DVneA06s7iP6cR8VsMiErX/9wNKpYoqsZp2TsKD9TpK1bWzzQp9/XYVCkVg+v9AocPfcTFn+L9ntYE8SH57iQVNu2TFQMCNu2kA1SuOowfpdznAxOgtHptQEf/3wdTyxt4KGPruu1Ks0yHV12Z3MDJoEkw0J5N44jbbkkSqh8hoTCOTywBfi93MKxywa+sqfzOWQeGoYJQRDbc6mmC8O0MRhyPgkesnTJyIoUcJwwP8tDaZNvYHb5Fcr78zxtUpbS2SBwQXUj/jAhuwgeexqnGTbplBGDtqpGbAvdIw71cHLpJOr3H8bo0+f2e1hpe6kkjpKQgRoSNGa/HARMnZTMZCiRZhly+lmJ1QK8Yyxj8tkJbK9e3Fd5TFUtDBhbCdnGcagBJJ0hRMjepZxDm7FWaAd5B1Vu9vbfKtcYrguPAfYqsnoMg8YvmMYqJHyK4bj0bZbSipJAtKFhIWcWRmSvLNliuBtewc4HD+Dvdx6hxCFKjk33Zg9xEnNsXII5HJuKQ21py7km9zgFKg9HozFm47oN+M/Ewuzas9idrs3fKdOxVtPoGppJr2ciCelZMjW7XSrOcOXaczxtv4ItOFDyHg5fo3pIFwR6sC1GveMINj/X7xqdMAzdjEGhAtjhwXVd41+gb7GLGK5jRQAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"Enable Vuukle PowerBar 2\"\n        title=\"Enable Vuukle PowerBar 2\"\n        src=\"/static/e076fe493fbe74affe230c3cbb4ea58c/19e8f/how-to-enable-vuukle-powerbar-on-my-page-img-2.png\"\n        srcset=\"/static/e076fe493fbe74affe230c3cbb4ea58c/8ff5a/how-to-enable-vuukle-powerbar-on-my-page-img-2.png 240w,\n/static/e076fe493fbe74affe230c3cbb4ea58c/19e8f/how-to-enable-vuukle-powerbar-on-my-page-img-2.png 267w\"\n        sizes=\"(max-width: 267px) 100vw, 267px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>","frontmatter":{"title":"How to enable Vuukle PowerBar on my page?","date":"May 01, 2017","category":"FAQ","tags":["how to","enable","powerbar"],"shortDescription":"If you would like to put social activity in first plan, you can enable Vuukle PowerBar. There are two options available – vertical and horizontal."}}},"pageContext":{"id":"0088b748-8c6d-5303-80d7-574a40b79534"}}}