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>