Overview
Poltio Flying Widget helps you go online with Poltio Widgets faster by eliminating the task for you to design a place where Poltio Widgets appear in your web page.
You can add a simple code snippet on your page and we will add a slideover widget in all the pages you added the code snippet to.
You can select to put a specific content or you can use the same dynamic widget snippet in all your pages and then decide which content will be displayed on which page based on page url from Poltio Platform.
How to use flying widgets in your page
You can add flying widget to your web page in 2 ways, one for a specific content which will always open that specific content and dynamic widget which you can control which content should be loaded based on the page url from poltio platform.
So you can use the same snippet to load different widgets based on url.
Specific Content
- If you want to use a specific content, you can use it as in the example. Here you need to add the public id of your content to the data-poltio-widget-content parameter.
Example Specific Content Flying Widget
<script defer src="https://platform.poltio.com/poltio.js"></script>
<div
class="poltio-widget-flying"
data-poltio-widget-content="your-content-public-id"
></div>
Dynamic Content (based on url)
-
Dynamic Widgets allows you to display different content without changing the SDK/iFrame code in your page depending on the URL of the page.
-
Here you need to add the your pid to the data-poltio-widget-pid parameter.
-
You can create dynamic widget from the Platform dynamic widgets page.
Example Dynamic Content Flying Widget
<script defer src="https://platform.poltio.com/poltio.js"></script>
<div class="poltio-widget-flying" data-poltio-widget-pid="your-pid"></div>
Customization
Parameters
- Name
data-poltio-widget-bgcolor
- Description
Background color of the sidebar that will open.
bash data-poltio-widget-bgcolor="rgba(255, 255, 255, 1)"
- Name
data-poltio-floating-bgcolor
- Description
The background color of the button that will appear on the page.
bash data-poltio-floating-bgcolor="rgba(0, 158, 235, 1)"
- Name
data-poltio-floating-textcolor
- Description
The text color of the button that will appear on the page.
bash data-poltio-floating-textcolor="rgba(0, 0, 0, 1)"
- Name
data-poltio-floating-title
- Description
The title that will appear on the page.
data-poltio-floating-title="Your Title"
- Name
data-poltio-floating-desc
- Description
The description that will appear on the page.
data-poltio-floating-desc="Your Description"
- Name
data-poltio-floating-buttontext
- Description
The text of the button that will appear on the page.
data-poltio-floating-button-text="Your Button Text"
- Name
data-poltio-floating-zindex
- Description
The zIndex of the floating button.
data-poltio-floating-zindex="100"
- Name
data-poltio-floating-hide-button
- Description
With this parameter you can hide the button that appears on the page.
data-poltio-floating-hide-button="true"
- Name
data-poltio-floating-position
- Description
With this parameter you can change the floating button position. Possible positions are: 'bottom-right'(default), 'bottom-left', 'center-right', 'center-left', 'top-right' and 'top-left'.
data-poltio-floating-position="bottom-right"
- Name
data-poltio-floating-initial-position
- Description
With this parameter you can set initial position of widget. There are 3 options.
- data-poltio-floating-initial-position="collapsed"(default)
- data-poltio-floating-initial-position="active"
- data-poltio-floating-initial-position="expanded"
- Name
data-poltio-floating-icon-color
- Description
With this paramater you can change the icons (arrow and X) color on the floating button.
data-poltio-floating-icon-color="#1E3D54"
- Name
data-poltio-floating-widget-icon-color
- Description
With this parameter you can change the X icon color on the sidebar.
data-poltio-floating-widget-icon-color='#1E3D54'
How to use paramaters
<script defer src="https://platform.poltio.com/poltio.js"></script>
<div
class="poltio-widget-flying"
data-poltio-widget-content="your-content-public-id"
data-poltio-widget-puid="XXX"
data-poltio-widget-loc="en"
data-poltio-widget-disclaimer="off"
data-poltio-widget-resultfit="vf"
data-poltio-widget-bgcolor="white"
data-poltio-floating-bgcolor="#009eec"
data-poltio-floating-textcolor="white"
data-poltio-floating-title="Let's choose together"
data-poltio-floating-desc="Not sure yet? Don’t worry! With a few simple questions we will guide you through the selection"
data-poltio-floating-buttontext="Start Now"
data-poltio-floating-zindex="100"
data-poltio-floating-hide-button="true"
data-poltio-floating-position="bottom-right"
data-poltio-floating-initial-position="collapsed"
data-poltio-floating-icon-color="#1E3D54"
data-poltio-floating-widget-icon-color="#1E3D54"
></div>
Toggle Slideover Widget from your custom button
You can also open the slideover with an anchor or button on your page. What you need to use for this is window.poltio.toggleFlyingWidget().
Example for using an anchor tag (<a> </a>)
<a href="javascript:window.poltio.toggleFlyingWidget()"></a>
Example for using button and onclick
<button onclick="window.poltio.toggleFlyingWidget()"></button>
Add via Google Tag Manager
You can also add this to your page with Google Tag Manager.
For this, you can follow the steps in the documentation: Google Docs