Q: How can I scroll the iFrame to the top when the content changes?

When embedding PollUnit on your website , it may be useful to change the scroll position of your webpage when the content of PollUnit changes. For example, when switching from an overview to a detailed view in a photo contest and the height of the iFrame changes significantly. Unfortunately, PollUnit cannot remotely control your website and scroll to a different position. This needs to happen on your website. To make this work, you can listen for the load event of the iFrame using JavaScript and then trigger a function. In our example, we call the function »customScrollFunction«, and the iFrame is assigned the ID »pollUnitIframe«. The JavaScript that triggers the function could look like this: document.getElementById('pollUnitIframe').onload = function() { customScrollFunction(); }; The actual function that scrolls the iFrame could look like this: customScrollFunction = function() { const element = document.querySelector('#pollUnitIframe'); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }; Please note that we are selecting the iFrame again based on our example ID. In some cases, it may be necessary to scroll a parent element of the iFrame or consider an offset. This could be the case, for example, if your website has a fixed header. Then you would need to adjust our example code accordingly.

Question 1

How can I scroll the iFrame to the top when the content changes?

Accepted Answer

When embedding PollUnit on your website, it may be useful to change the scroll position of your webpage when the content of PollUnit changes. For example, when switching from an overview to a detailed view in a photo contest and the height of the iFrame changes significantly. Unfortunately, PollUnit cannot remotely control your website and scroll to a different position. This needs to happen on your website.

To make this work, you can listen for the load event of the iFrame using JavaScript and then trigger a function. In our example, we call the function »customScrollFunction«, and the iFrame is assigned the ID »pollUnitIframe«.

The JavaScript that triggers the function could look like this:

document.getElementById('pollUnitIframe').onload = function() {
  customScrollFunction();
};

The actual function that scrolls the iFrame could look like this:

customScrollFunction = function() {
 const element = document.querySelector('#pollUnitIframe');
 if (element) {
  element.scrollIntoView({ behavior: 'smooth', block: 'start' }); 
 }
};

Please note that we are selecting the iFrame again based on our example ID. In some cases, it may be necessary to scroll a parent element of the iFrame or consider an offset. This could be the case, for example, if your website has a fixed header. Then you would need to adjust our example code accordingly.

Question 2

Can I pass user data, such as name and email address, to my embedded PollUnit?

Accepted Answer

Yes, with the help of parameters that you append to the PollUnit URL, you can transfer any text data to PollUnit. These will then be saved with the participating persons and can be viewed in the evaluation and export.

To save URL parameters, you need to allow the desired parameters in the »Advanced« step. You can find out exactly how this works in our Help.

Question 3

What can I do if PollUnit is not shown on my website?

Accepted Answer

If the embedded variant of PollUnit on your website only delivers a grey page or shows a »Refused to display« error, it is because you have not whitelisted your host or domain in your PollUnit. You must explicitly allow your host in the context menu of the PollUnit. This is done for the security of your participants.

The following message should appear in the web console if this error occurs:

Refused to display 'https://pollunit.com/...'
in a frame because it set 'X-Frame-Options' to 'sameorigin'.

In rare cases or if you are using a web construction kit like WIX, it may be that not your domain has to be entered as host but a HTTP referrer generated internally by your site. Please contact your technician or service provider for this.

For further information how to embed a poll or photo competition visit our tutorial.

Question 4

I cannot scroll in the embedded PollUnit. What should I do?

Accepted Answer

If you use our iFrame Resizer script to embed PollUnit, check if there is a Javascript error on your website. Errors in scripts on your website can prevent our script from being executed correctly. Alternatively you can switch to the version without iFrame Resizer.

In general you should check if the PollUnit iFrame is changed by a script or CSS of your website. E.g. the iFrame should not have »scrolling="no"« attribute. If the delivered HTML code looks different than the one we provide, then the probability is very high that a script on your site is causing the error.

The verification can be done with the web console of your browser.

Question 5

How can I integrate PollUnit full-screen or in a custom size?

Accepted Answer

PollUnit is integrated as iFrame. You can freely adjust the size of the iFrame with CSS. You can add a class or ID to the PollUnit iFrame and adjust the display with your stylesheet.

Example Html

</pre></p>

<p>Example CSS
<br /><pre>#pollunit {<br> width: 100%;<br> height: 1000px;<br>}</pre></p>

<p>To scale the iFrame to the size of your browser, you can use the units vh and vw:
<br /><pre>#pollunit {<br> width: 100vw;<br> height: 100vh;<br>}</pre></p>

<p>Or even deduct something from the height or width.
<br /><pre>height: calc(100vh - 100px)</pre></p>

<p>So you could place the PollUnit e.g. screen filling under your web page headers.</p>

<p>You can find further information in our <a href="https://pollunit.com/en/tutorials/embed_poll">Tutorial about embedding your PollUnit</a>.So you could place the PollUnit e.g. screen filling under your web page header.
</p>

Question 6

Do my participants need an account to vote on my website?

Accepted Answer

No, you can configure your PollUnit that participants without an account can vote, upload pictures and create new options. If you only allow participation with a confirmed account, an account is mandatory in this case.

The settings for this can be found in the advanced settings. How to embed PollUnit is shown in our Tutorial.

Question 7

Is there an example of an embedded PollUnit?

Accepted Answer

Yes, we have prepared a simple example based on a photo competition. You can get to the example by clicking the following link: Example: Photo contest on your own homepage.

Question 8

How can I integrate PollUnit into WIX?

Accepted Answer

You can embed PollUnit using an iFrame. Basically, you proceed exactly as described in our tutorial about embedding PollUnit on your website. With the code snippet we provide you can publish PollUnit via iFrame on your website. To protect the visitors of your PollUnit, you have to activate your domain as an allowed host.

Attention! WIX web pages retrieve external content via a special referrer URL.

If you integrate an iFrame into WIX, WIX internally retrieves PollUnit content not via your domain, but via »filesusr.com«. So you have to additionally whitelist this domain. For example, if your web address is »www.mywebsite.com«, the additional host to unlock is »www-mywebsite-com.filesusr.com". All points in your domain will be replaced with a »-« (minus) and will prepended as subdomain of »filesusr.com«.

So it works with your own vote and your own photo contest in your WIX website.

Question 9

Which browsers support embedded PollUnits?

Accepted Answer

Embedded pages should work in all major browsers.

It is important that the embedding page has an SSL certificate or is accessible via https. You also need to enter the domain of the embedding page in our list of allowed hosts.

Embed PollUnit

Polls, surveys and photo contests on your own website

Advanced embedding options

kill_background

kill_padding

kill_title

disable_remote_overlay

Polls for your CMS (Content Management System)

Frequently Asked Questions

How can I scroll the iFrame to the top when the content changes?

Can I pass user data, such as name and email address, to my embedded PollUnit?

What can I do if PollUnit is not shown on my website?

I cannot scroll in the embedded PollUnit. What should I do?

How can I integrate PollUnit full-screen or in a custom size?

Do my participants need an account to vote on my website?

Is there an example of an embedded PollUnit?

How can I integrate PollUnit into WIX?

Which browsers support embedded PollUnits?

Further tutorials

Create your first poll

Advanced poll features

Advanced survey branching logic

Distribute tasks online

Cast votes and rate options

Find a date

Vote on images

Create your own theme

Polls with your own logo

Evaluate your PollUnit

Dot Voting

Range Voting

Live Voting

Reach a consensus

Manage organizations

Prevent multiple participation

Donations and participation fees

Are you ready?