Forward Compatibility
We are continually improving our poll units and developing new features and capabilities. We may change the poll unit's HTML structure at any time and without notice. The customization settings described below are designed to be compatible with future versions of the poll unit. Any custom CSS or JavaScript code that targets or relies upon the poll unit's internal HTML structure, including DOM classes, may not be compatible with future versions of the poll unit.
Detailed user research has been conducted to create a polling experience that will delight respondents and encourage them to answer questions. Thus, some aspects of the poll unit can’t be adjusted. This section discusses some parts of the poll unit that are customizable for your website.
Note: Some settings inside the InsightStore affect the poll unit's position and appearance.
Position And Dimensions
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 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 container to ensure that the poll unit has the appropriate width.
As questions of varying lengths are asked in the poll unit, its default size will grow and shrink vertically, sometimes shifting the content below it. It is important not to wrap the poll unit in an element with a fixed height. Doing so is likely to either waste space if the container is too tall or hide the answer choices if it is too short. Either scenario will impact engagement rates and your ability to collect responses.
Font
Font size and family can be used to closely match the poll unit to your website's look. This can be done on the Target > Settings > Theme page in the InsightStore. You may use any font found in Google Fonts .
The poll unit looks best when displayed in a sans-serif font. Even if your website predominantly uses serif fonts, we recommend using a sans-serif font, such as the browser's default font, for the poll unit.
The layout of the controls and sections 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 done on the Target > Settings > Theme page in the InsightStore.
We also provide the option to use the same custom color tints for the answer choice buttons instead of the default blue color. Sometimes, we will use colors other than the custom color for results. For example, quiz question results will be green for correct answers and red for incorrect answers.
Title
The poll unit's title offers an excellent opportunity to match your website's style. The title text and some other CSS properties are customizable, including borders, padding, and font characteristics. A serif font can be appropriate here if that is the website's style. Title field customizations are made on the Target > Settings > Theme tab in the InsightStore.
Privacy Policy
By default, the poll unit does not show a privacy policy, as studies suggest that respondents tend not to consider privacy concerns unless prompted to do so. Hence, a privacy policy link can discourage participation even if the policy is intended to reinforce responsible treatment of the respondent’s data.
However, we can configure the poll unit to show the CivicScience privacy link or a partner-specific privacy policy link. The partner-specific link can be enabled by filling in the Privacy Policy URL field on the Target > Settings > Customization tab in the InsightStore.
Responsive Layout
The poll unit automatically fills 100% of its container's width and its layout is designed to scale well given an appropriate font size. The poll unit will usually fit well in a responsive website without special customization.
Dark Mode Support
The poll unit supports dark mode. Its styling can follow the user's operating system’s dark mode preference. Enable this in the Target > Settings > Theme page in the InsightStore.