Integration in a nested iframe

If the Poll Unit must be presented in a nestediframe, you need to use an alternative integration technique.¹  This technique can also be used for standard placements.

First, include the script on the page to instantiate the poll.

<script type="text/javascript">
  window.onload = function () {
    window.civicscience.widget({
      target: "0",
      container: "#civsci-id-1233904299",
      articleUrl: "https://heraldbugle.com/",
      userId: "myUserId",
      referrerUrl: "https://url-to-referrer",
      forceDarkMode: false
    });
  }
</script>

Replace the container, articleURL, userID, and referrerUrl values with your values.

The script must include the target attribute. Its container attribute must match the Poll Unit's div id (see below).

Then, create a div with a unique id attribute. You must replace the value civsci-id-123456789 with your unique id. Place the div on the page wherever you want the Poll Unit to appear.

<div id="outerwrapper">
  <div id="cspoll">
    <div id="cspoll-content">
      <div id="civsci-id-123456789"></div>
      <script type="text/javascript" async src="https://get.civicscience.com/jspoll/5/csw-polyfills.js"></script>
    </div>
  </div>
</div>

Optional script parameters:

• userId: a unique identifier for your user within your platform, such as a unique media partner user ID.
• articleUrl: the current page URL. This is useful for scenarios such as a nested iframe, so that you can pass the current URL to CivicScience:

  articleUrl: window.location.href
  

• referrerUrl: useful for scenarios such as a nested iframe, so that you can pass a known referrer URL to CivicScience:

  referrerUrl: document.referrer

• forceDarkMode: forces the Poll Unit to use dark mode. The default value is false.
  
  

1. Sometimes called the factory technique.