Advanced
The basic integration code is suitable for most websites. This section describes a more advanced integration method.
Container Element and Placement
The best placement for the poll unit is embedded in an article's content. Other popular placements include below an article, on section pages, or on the page's right (or left) side column. Instances of the poll unit placed closer to the top of the page tend to gather more responses.
Many HTML elements are acceptable to use for the poll unit container, but generally, it makes the most sense to use a <div> element.
The element must have an id attribute with a value distinct from any other id attributes on the page. The data-civicscience-widget attribute is the target identifier, as explained above.
Here is an example of a poll unit container element:
<div id="civsci-id-123456789" data-civicscience-widget="000"></div>The container must be free of content. Any items within the container will be replaced when the poll unit is loaded.
JavaScript Library
Include the poll unit JavaScript library on the page by including this element:
<script type="text/javascript" async src="https://get.civicscience.com/jspoll/5/csw-polyfills.js"></script>HTML
You can place the script element in the <head> section of your HTML code or at the end just before the </body> closing tag.
You only need to include the script once on the page, even if your page includes multiple instances of the poll unit.
We also ship a lighter version of the library without polyfills, but be warned: without them, the poll unit may not work in older browsers such as Internet Explorer 11.
<script type="text/javascript" async src="https://get.civicscience.com/jspoll/5/csw.js"></script>