Styling

Integration partners are invited to re-skin the widget to match their brand/styling. In order to achieve this one only needs to host a CSS file that overrides the base widget styling.

Then, all you need to do is pass it in via the style.cssUrl parameter.

Note that there is also an option to quickly hide the widget’s header bar– showHeader.

PIO.open({
    recipeId:"6cfb4f30-34c7-4cf6-9490-f51925650811",
    // the live url
    url:"https://widget.print.io/widget/",

    // all optional
    style: {
        // shortcut to whether or not to show the headerbar w/ logo
        showHeader: true,

        // use a custom CSS file
        cssUrl:''
    }
});

Embed the Widget in a DOM element

If you do not want the widget to be in a popup, and would rather have it embedded in a DOM element in the page, this is easily achievable via the embedInElement property:

var el = document.getElementById('container');
PIO.open({
  recipeId:"6cfb4f30-34c7-4cf6-9490-f51925650811",
  url:"https://widget.print.io/widget/",
  embedInElement:el,
  style:{
     showHeader:false
  }
});

Customizing the Widget iFrame

As we noted above, one can easily customize the actual widget via passing in a cssUrl. However, if you are looking to customize the actual iFrame’s style, that can be done via setting style values in the iframeStyles object literal.

PIO.open({
    recipeId:"6cfb4f30-34c7-4cf6-9490-f51925650811",
    // the live url
    url:"https://widget.print.io/widget/",

    // all optional
    iframeStyles:{
        width:"500px"
    }
});

You can think of the iframeStyles object literal as a “mixin” of css properties to the iFrame/HTMLElement style object.

If you decide to use the widget in its popup form, but do not want the “background fade” effect when it is openned, set fadeBackground:false.

PIO.open({
  recipeId:"6cfb4f30-34c7-4cf6-9490-f51925650811",
  url:"https://widget.print.io/widget/",
  fadeBackground:false
});