Detailed user research has been conducted to create a poll unit experience that will delight respondents and encourage them to answer questions. Thus, some aspects of the poll unit cannot be adjusted. This section discusses some parts of the poll unit that we can customize for your website.
Position and dimensions
As stated earlier, the poll unit will appear on your web page wherever the integration code, particularly the container <div> element, is placed. With custom CSS, margins and padding can be added to the container or to outer elements wrapping the container (elements under your control) to adjust the spacing between the poll unit and other parts of your page.
The poll unit will automatically fill 100% of the width of its container. Thus, you can apply your own stylesheet rules to the container or elements wrapping the poll unit container to ensure that it has the appropriate width.
As questions of different lengths are asked in the poll unit, it will grow and shrink vertically, sometimes shifting the content below it. It is important not to wrap the poll unit in an element such as an <iframe> with a fixed height. Doing so is likely to either waste space due to the container being too tall or hide part of the poll unit due to it being too short.
Font
The poll unit can be configured with font size and font family to closely match the look of your website. This can be done in the Target > Settings > Theme page in the InsightStore.
The poll unit looks best when it is displayed in a sans-serif font. Even if your website uses predominantly serif fonts, CivicScience recommends using a sans-serif font for the poll unit. The browser's default sans-serif font usually works well.
The layout of the sections and controls of the poll unit are relative to the font size. Therefore, the layout will naturally become chunkier or more compact to match the size of the text.
Colors
The poll unit can be configured to use a custom color for the results bar charts that appear at the end of a Respondent's visit. A light tint of a color associated with your brand or website is usually a good choice. This can be set in the Target > Settings > Theme page in the InsightStore.
CivicScience also provides the option to use tints of the same custom color for the answer choice buttons instead of the default blue color.
In some cases, CivicScience will use colors other than the custom color for results. An example is quiz question results, which feature green colors for correct and red colors for incorrect answers.
Title
The poll unit title is an excellent opportunity to make the poll unit look like part of your website. CivicScience can customize the title text and many other CSS properties of the title, including borders, padding, and font characteristics. If you use a serif font on your site, a serif font is appropriate here. Customization can be done in the Title field on the Target > Settings > Theme tab in the InsightStore.
Privacy policy
The poll unit always shows the CivicScience privacy policy in the drawer menu. However, in the InsightStore at Target > Settings > Customization, it is possible to configure the poll unit to also show a partner-specific privacy policy link.
Responsive layout
Because the poll unit automatically fills 100% of its container's width and its layout is designed to scale well (given an appropriate font size), it will usually fit nicely on a responsive website without any special customization.
For more complicated responsive websites, we can incorporate @media query breakpoints in some aspects of the customization.
Fixed layout
Configuring the poll unit as a fixed-size container is possible, but it degrades user experience, so we do not recommend it. The vertical overflow will scroll in the fixed-size container. If you need the poll unit placed in a fixed-size container, contact your CivicScience account manager.
Dark mode support
The poll unit supports dark mode. There are two ways to enable dark mode.
- (Recommended) Dark mode for the poll unit styling can be configured to follow the user's operating system dark mode preference. This can be done with the Dark Mode Allowed checkbox on the Target > Settings > Theme page in the InsightStore.
- (Not recommended, but supported) Adding the following data attribute to the poll unit integration code will enable dark mode programmatically, ignoring the user's operating system preference. The integration code would look like the following:
<div id="civsci-id-123456789" data-civicscience-widget="000"
data-civicscience-force-dark-mode="true"></div>
<script type="text/javascript" async src="https://get.civicscience.com/jspoll/5/csw-polyfills.js"></script>The same will be accomplished by using the poll unit function integration property forceDarkMode (Boolean):
civicscience.widget({
target: "000",
container: "#civsci-id-123456789",
forceDarkMode: true
});A note regarding dark mode: If your poll unit instance has custom CSS styling, it may need to be updated to handle dark mode. Here is an example of what that CSS might look like.
/*Example custom css styling that works only in dark mode*/
html.csw-html .csw.csw-dark-mode a {
color: dodgerblue;
}