Web Site Embedding Helper: American Carnage 2024 Democratic Primaries

Customize how your ballot or results look when embedded on your organization's web site, then copy the generated code below.
Choose what to embed, adjust the style and height, and check the live preview.
When it looks right, copy the Generated code at the bottom and paste it into your website's HTML.
The previews are view-only — to test voting, use the ballot link directly.
What do you want to embed?
Voters see the ballot first. After voting, they can view results in the same frame. Height must fit both views.
Use Fit to content to set the height automatically, or adjust manually until the preview shows no scrollbar and no excess blank space. If voting causes a scrollbar to appear, increase the height slightly. To match the width available on your target website, narrow this browser window to that width before fitting.

Would the current appearance clash with your web site? You may customize the appearance of the embedding to match your web site's design.

#
#
Ballot preview:
Results preview:
Generated code:

If you need more control, you can edit the URL parameters in the generated code directly. Expand the section below to learn how.

The generated code contains URL parameters that control the appearance of your embedded ballot or results. You can edit these parameters directly in the code if you need more control. Append ?embed=true&style=STYLE-SPEC to the end of the URL, where ?embed=true&style= is literal text and you replace STYLE-SPEC with a style specification as described below.

The style specification consists of a series of attribute name-value pairs. Each pair consists of an attribute name followed by a value in brackets.

modeLight mode (the default) or dark mode (light text on a dark background). Either mode[dark] or mode[light].
colorTheme color used for buttons and titles as a six-digit hexadecimal RGB value.
bgPage background color in RGB.
fontFont to use or a list of fonts. This can be a generic CSS name like font[monospace] or the name of a specific font like font[Courier] or both font[Courier,monospace]. RCV123 will check if the first listed font is on Google Fonts, and if it is, your ballot will link to it. If you use a named font, it’s recommended you include serif or sans-serif as a fallback in case your named font is not available.
radiusBorder radius for buttons as an integer number of pixels. radius[0] for square buttons, radius[100] for capsule-shaped buttons.

The default color values are chosen based on your selected mode. Text color and button text are automatically set: white text for dark mode, dark text for light mode. If you set the background to a dark color, you should also specify mode[dark] to ensure text and other elements remain visible and readable.

The default display settings are: style=mode[light]color[006AD5]bg[ffffff]font[sans-serif]radius[8]

Example — red theme color: ?embed=true&style=color[ff0000]

Example — dark background with light text: ?embed=true&style=mode[dark]bg[1a1a1a]color[4a9eff]

Choosing a results visualization

You can add &vis=TYPE to a ballot or results URL to control which results visualization is shown. When added to a ballot link, the results that voters see after voting will inherit it. The available types are:

nativeInteractive Bar Chart (the default)
barRCVis Animated Bar Chart
pieRCVis Animated Pie Chart
bar-staticRCVis Static Bar Chart
sankeyRCVis Sankey Diagram
tableRCVis Table Summary
table-by-roundRCVis Table by Round
table-by-candidateRCVis Table by Candidate

Example — show results as a Sankey diagram: ?embed=true&vis=sankey&style=color[006AD5]