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"

  • Name
    data-poltio-floating-scroll-threshold
    Description

    With this parameter, you can set the scroll threshold that will automatically switch from the collapsed position to the active position. This value is pixels. In other words, it may seem like it works differently on a 4K screen and a 1080p screen, but in terms of pixels, they both work the same.
    data-poltio-floating-scroll-threshold="300"

  • Name
    data-poltio-floating-font-family
    Description

    By default, Poltio uses the font family in the body of your page, but in some cases this may not be possible. For these cases, you can use this parameter.
    data-poltio-floating-font-family="Averta"

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"
  data-poltio-floating-scroll-threshold="300"
></div>