Custom styling

You can add different stylings to FigPii polls to make them feel at home on your website. 

Here are the 2 ways you can style your polls:

Using CSS

You can insert CSS on your site to modify FigPii polls, for example: 

<style id="adjust-figpii-poll">
          #figpii-poll-container {
            filter: drop-shadow(0 0 5rem black) !important;
          }
          #figpii-poll-container * {font-family: 'Avantt' !important}
          .figpii-poll-footer, .figpii-poll-header, .figpii-poll-body {background-color: #252427 !important}
          .figpii-poll-header {
            font-size: 20px !important;
            line-height: 21px !important;
          }
          #figpii-poll-button {
            border-radius: 50px !important;
            font-size: 16px !important;
            padding: 6px 23px !important;
            margin: 2px 0 !important;
          }
</style>

In this example we're adding a custom shadow to the poll, modifying the font and some added margin and padding.

Available CSS selectors:

#figpii-poll-container
.figpii-poll-header
.figpii-poll-body
  .figpii-poll-answer
.figpii-poll-footer
  #figpii-poll-button<br>

Using JavaScript

Similar to the example above you can adjust your polls with even more advanced options using JavaScript,

The code can be added to your Additional JS (located under domain settings):

(function() {
    function adjustPoll() {
        const color = "#252427"
        const pollContainer = document.querySelector("#figpii-poll-container")
        const widthCenter = (window.innerWidth - pollContainer.clientWidth) / 2
        const heightCenter = (window.innerHeight - pollContainer.clientHeight) / 2


        function insertStyles() {
            let styles = `<style id="adjust-figpii-poll">
          #figpii-poll-container {
            left: ${widthCenter}px !important;
            bottom: ${heightCenter}px !important;
            filter: drop-shadow(0 0 5rem black) !important;
          }
          #figpii-poll-container * {font-family: 'Avantt' !important}
          .figpii-poll-footer, .figpii-poll-header, .figpii-poll-body {background-color: ${color} !important}
          .figpii-poll-header {
            font-size: 20px !important;
            line-height: 21px !important;
          }
          #figpii-poll-button {
            border-radius: 50px !important;
            font-size: 16px !important;
            padding: 6px 23px !important;
            margin: 2px 0 !important;
          }
        </style>`


            document.querySelector("#adjust-figpii-poll") && document.querySelector("#adjust-figpii-poll").remove()
            document.body.insertAdjacentHTML("beforeend", styles)
        }
        insertStyles()


        const observer = new MutationObserver(function(mutations_list) {
            mutations_list.forEach(function(mutation) {
                mutation.addedNodes.forEach(function(added_node) {
                    if (added_node.id == 'figpii-poll-container') {
                        insertStyles()
                    }
                });
            });
        });


        observer.observe(document.querySelector("body"), {
            subtree: false,
            childList: true
        });
    }


    function pollConditions() {
        const pollContainer = document.querySelector("#figpii-poll-container")

        if (pollContainer) {
            return true;
        } else {
            return false;
        }
    }
    FIGPII.helpers.waitForCondition(pollConditions, adjustPoll, 30, 900000)
})()

In this example, we are modifying the stylings and moving the poll to be in the center of your users' screens to grab more attention.