The eye does not see everything that matters đ
Every one of our tools contains functions that are obvious and can be operated through a simple, clearly structured UX.
But not everything that is useful and has a positive effect on creating and using our elements is visible in the user interface.
Important: The following embed codes apply to Pinpoll v1. To use them with Pinpoll v2, add data-attribut="v2".
Preventing manipulation
One of these hidden functions is, for example, shuffling questions and answers in quizzes and polls with several questions and answers.
All it takes is a small addition to the element's embed code:
Quiz:
<div data-pinpoll-id="xxxxxx" data-mode="quiz" random-questions="true" random-answers="true"></div>
Poll (with more than 1 question and more than 2 answers):
<div data-pinpoll-id= "xxxxxx" random-questions="true" random-answers="true"></div>
The benefit behind this is easy to explain: bots are usually trained to carry out the same command repeatedly. If the questions and answers are shuffled again on every call, it becomes harder to manipulate specific answer options â at least for click bots and for people who want to vote manually over and over again.
+ high protection against click bots
~ medium protection against manipulation by humans
â low protection against API bots
And it also keeps things interesting for users who want to play through the quiz or the poll again, for example to improve their result.
Data attributes: more control over your Pinpoll placeholder
Data attributes let you control the behaviour and design of your Pinpoll elements directly in the code of your integration. They give you more flexibility to customise presentation, loading behaviour and functionality. We have put together an overview of the options for you here:
Using your own CSS classes with data-css-class
The data-css-class attribute lets you assign additional CSS classes to your poll (<body> tag). This gives you full flexibility to control your custom design stylesheet precisely and to implement different design variants.
What is this useful for?
Implementing design variations: use your own classes to adapt individual polls visually to a particular topic or layout â without having to create a completely new stylesheet.
Marking topics and campaigns: give your polls a consistent look for particular events, channels or specials.
Examples
Marking a "Sport" topic special:
data-css-class="sport"
Combining several classes:
data-css-class="sport highlight"
How does it work?
All classes defined here are then available to you in the CSS code of your custom designs. There you can tailor the styles you want precisely to these classes â for example different colours, fonts or backgrounds.
Overriding the design with data-design
The data-design="{custom-design-id}" attribute lets you override the design originally selected by the editor and load a different design defined by you instead.
When is this useful?
When you want to enforce a consistent design for particular campaigns or topics.
When a special layout (e.g. dark mode or corporate design) should be shown regardless of the editor's selection.
When you want to try out different design variants without changing the standard configuration.
Example
<div data-pinpoll-id="xxxxxx" data-design="45"></div>
In this example the design chosen by the editor is ignored and the design with ID 45 is applied instead.
Setting the loading mode with data-loading
The "data-loading" attribute lets you control when and how a Pinpoll element is loaded. This allows you to optimise your page's performance while also influencing how quickly content becomes visible to users.
Options at a glance:
lazy (standard): the element is loaded only shortly before it enters the visible area of the page. â Recommended for the best possible performance.
eager: the element is loaded immediately â even if it is not yet in the visible area. â Useful when content should be available as soon as the page is called up.
preload: the element is preloaded, but without carrying out any counting or ad requests. â Please note: this setting requires explicit initialisation via the Pinpoll Embed SDK.
Example
<div data-pinpoll-id="xxxxxx" data-loading="lazy"></div>
Which parameter makes sense when?
lazy: for most standard integrations, as it optimises loading time.
eager: when polls or quizzes should be visible and usable immediately on page load.
preload: for more complex setups in which content is deliberately prepared in the background before it becomes visible.
Loading further elements automatically with "data-autoplay"
The "data-autoplay" attribute lets you have further matching elements displayed automatically after a vote. This keeps users in the flow for longer and makes them interact more with your content.
How it works
This parameter loads further matching elements after the vote:
of the same type (poll/quiz/PT) and
created by users who belong to the same organisation.
Preference is given to elements that:
were created in the last 5 days,
have been voted on frequently ("are popular"),
come from the same category,
have not yet been voted on by the current visitor,
have a suitable height (requires data-height to be set) and
if available: polls from the same path in the case of AI polls (URL matching).
Example
<div data-pinpoll-id="xxxxxx" data-autoplay="3"></div>
In this example, up to 3 further matching elements are loaded automatically after the vote.
Additional parameter: data-mute-voted
"data-mute-voted" lets you additionally control whether elements that have already been voted on are excluded in autoplay mode.
true / 1 â elements that have already been answered are not loaded again.
false / 0 â elements that have already been answered can appear again.
Example
<div data-pinpoll-id="xxxxxx" data-autoplay="3" data-mute-voted="true"></div>
In this example, up to 3 new matching elements are loaded automatically after the vote, while those that have already been answered remain excluded.