Widgets
Poltio Web SDK Javascript API
If you are planning to use Poltio Widgets on your site, you can add additional features by using our Javascript SDK. By default, widget.js will find poltio div in your html markup and converts it to an iframe code. By using our SDK, you can have our widget.js update the height of the iframe based on the content or you can load content based on the page url dynamically.
Overview
There are 2 components you need to add your page.
You need to include our widget.js in your page. (Optional if you want your content to be automatically loaded, resized. )
<script async src="https://platform.poltio.com/widget.js"></script>
And you need to add our widget area:
<div class="poltio-widget" data-content="XXXX"></div>
Or you can include our Iframe directly:
<iframe
id="poltio-embed-XXXX"
class="poltio-embed"
src="https://www.poltio.com/widget/XXXX"
width="100%"
height="800"
frameborder="0"
allowfullscreen="allowfullscreen"
scrolling="yes"
title="Embed"
allow="clipboard-write"
>
</iframe>
Multiple Embeds in a single page
If you are planning to embed Poltio Widgets more than one page/time to your web application, you should include this script in your template file:
<script>
window.poltio = (function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0],
t = window.poltio || {};
if (d.getElementById(id)) return t;
js = d.createElement(s);
js.id = id;
js.src = "https://platform.poltio.com/widget.js";
fjs.parentNode.insertBefore(js, fjs);
t._e = [];
t.ready = function(f) {
t._e.push(f);
};
return t;
}(document, "script", "poltio-sdk"));
</script>
With this code, you will prevent network requests to the same resources multiple times.
Options
By default you only need your content id for a simple callout.
<div
class="poltio-widget"
data-content="XXX"
></div>
Width & Height
By default, the widget will have a 100% width of its container and have a 500px height. You can customize these params via data-width="XX" and data-height="YY"
<div
class="poltio-widget"
data-width="400"
data-height="600"
data-content="XXX"
></div>
Alignment
By default, Poltio widgets align themselves in the middle of the area thats given to them. You can change this with data-align="left"
<div
class="poltio-widget"
data-align="left"
data-content="XXX"
></div>
Auto Resize
By default, our sdk will adjust the height property based on the content frame and disable scrolling. You can disable this behavior by adding data-resize="false"
<div
class="poltio-widget"
data-resize="false"
data-height="300"
data-content="XXX"
></div>
Share & Notify
You can add follow up share & notify options after voting. These are turned off by default.
<div
class="poltio-widget"
data-share="on"
data-notify="on"
data-content="XXX"
></div>
Language
Poltio widgets supports English, Turkish, German, French, Spanish, Italian, Romanian,Portuguese, Thai, Hebrew and Arabic. By default, we select the locale based on browser locale. But you can adjust this manually by data-lang="tr" Also Poltio widget for rtl languages does rtl itself.
Supported Languages
- en
- tr
- de
- fr
- es
- it
- ro
- th
- pt
- he
- ar
<div
class="poltio-widget"
data-lang="tr"
data-content="XXX"
></div>
Disclaimer
If you already notifying your visitors about cookie consent, you can disable cookie consent in the Poltio Widgets by: data-disclaimer="off"
<div
class="poltio-widget"
data-disclaimer="off"
data-content="XXX"
></div>
Content
You can set the content for the widget by data-content="id". Or you can have one dynamically loaded widget per page by adding data-pid="XXX" instead of data-content. You can then customize what this widget will load from your Poltio panel based on page url or other parameters.
<div
class="poltio-widget"
data-pid="XX"
></div>
Cookie
By default, Poltio widget leaves cookies. If you don't want this, you can use the data-cookie="off" parameter that follows.
<div class="poltio-widget"
data-cookie="off"
data-content="XXX"
></div>
Open Links
By default, the poltio widget opens the links you add to the result in a new tab. If you want to open these links in the same tab, do not add the data-openlinks="samepage" parameter.
<div class="poltio-widget" data-openlinks="samepage" data-content="XXX"></div>
Result Fit
By default, poltio widget smart crops the images on the result screens. You can use data-resultfit="vf", data-resultfit="fit"* and data-resultfit="off"* parameters according to the size of the images you use in the results.
<div class="poltio-widget" data-resultfit="off" data-content="XXX"></div>
Default (data-resultfit="default" or omittted.)
Vertical Fit (data-resultfit="vf" )
Fit (data-resultfit="fit" )
Off (data-resultfit="off" )
UUID
If you want to match poltio voters with your own users in a safe way, you can include our widget with a uuid param which we store and send it back to you in webhooks or reports.
<div class="poltio-widget"
data-uuid="XX"
data-content="XXX"
></div>
UTM Parameters
By default if your page has utm parameters (eg: utm_source, utm_medium, utm_campaign, utm_content or utm_term) we will copy these utm params in our widget url so all pixel code events that you fire inside our widgets will also use these params by default.
If you want to customize utm parameters for the widget, you can use data-utm_XXX="xxx"
<div class="poltio-widget"
data-utm_source="MySource"
data-content="XXX"
></div>