Forward Compatibility
We are always improving our poll units and developing new features and capabilities. We may change the HTML structure of the poll unit 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 internal HTML structure of the poll unit, 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, there are some aspects of the poll unit that can’t be adjusted. This section discusses some parts of the poll unit which are customizable for your website.
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 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 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
The poll unit can be configured with font size and font family to closely match the look of your website. This can be done on the Target > Settings > Theme page in the InsightStore.
The poll unit looks best when it is displayed in a sans-serif font. If your website predominantly uses serif fonts, we recommend using a sans-serif font for the poll unit, such as the browser's default font.
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. Usually, a light tint of a color associated with your brand or website is a good choice. This can be done on the Target > Settings > Theme page in the InsightStore.
We also provide the option to use tints of the same custom color for the answer choice buttons as an alternative to the default blue color. In some cases, we will use colors other than the custom color for results; e.g., quiz question results will feature green for correct and red for incorrect answers.
Title
The poll unit's title offers a good opportunity to match the style of your website. The title text and many 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
The poll unit will always show the CivicScience privacy policy in the drawer menu. Configuring the poll unit to also show a partner-specific privacy policy link is possible. This can be done with the Privacy Policy URL field on the Target > Settings > Customization tab in the InsightStore.
Responsive Layout
Because the poll unit automatically fills 100% of its container's width and the poll unit's layout is designed to scale well given an appropriate font size, in most cases, the poll unit will fit well in a responsive website without any special customization.
Dark Mode Support
The poll unit supports dark mode. Its styling can be configured to follow the user's operating system’s dark mode preference. Enable this in the Target > Settings > Theme page in the InsightStore.