Using RankedVote

How to Embed RankedVote to Run RCV Contests on Your Site

What is Embedding?

Embedding is a way of loading one web site from within another, different web site. Any time you see a YouTube video on a site that isn't YouTube (like below), that's embedding.

Why Embed RankedVote?

It's the best way to bring your visitors an interactive ranked choice voting experience directly on your site! There's no additional click. No additional hop off to another site. The ranked choice ballot is right there waiting to be used.

Benefits of Embedding RankedVote

• Keeps visitors on your web property while exposing them to ranked choice voting
  
• Mimics your site's color scheme for a more cohesive experience
  
• Automatically leverages RankedVote's calculations, visualizations, and explanations
  

Now, it's time to bring all that goodness to life using the walkthrough below.

Step-by-Step Walkthrough

See Embedded RankedVote in Action

Check out this demo of RankedVote embedded onto a page with an entirely different design and color scheme to get a taste for what's possible.

Upgrade to Premium

The Embed feature requires an active subscription. If you haven't already, sign up for a monthly or annual plan for the Embed feature to unlock.

Configure Your Election

All features of RankedVote are available even when embedded. Feel free to configure your election as you see fit. Change the ballot type. Require voter registration. Run Multi-Office elections. Any changes made from the Election Details page will be instantly reflected in your embedded election.

Adjust Color

To help your embedded election fit more cohesively into your site, you can set a primary color for your election. This color will replace the "RankedVote Purple" that you typically see on the ballot, thank you, and results pages.

You can adjust the color in the "Customize" section towards the bottom of the Details page.

Colors are defined using hexadecimal values (e.g. #7540EE). If that phrase and those strange numbers intimidate you, don't worry. It's just a way that web sites use to define millions of potential colors.

If you don't know your desired color, a good first stop is to Google "hex color picker" to get a handy tool for finding the right color. If that's still not enough, the results below the color picker offer numerous ways to extract a color's hexadecimal value from a picture.

Adjust the color to any hex value you see fit (e.g. #7540EE)

Copy/Paste the Embed Code

Once you have an active premium subscription, you can get the embed code for pasting into your site. The embed code for both the ballot page and the results page is found in the aptly named "Embed" section below the "Customize" section.

The idea is that this code is as plug-and-play as possible. It's filled with a number of sensible defaults that should have your embedded contest looking decent on your site without any adjustment.

If you do make adjustments, here are some key things to keep in mind:

• Don't change the value of the iframe src attribute.
  
• The iframe width attribute should be defined as a percentage, not pixels. This allows RankedVote's design to respond to different screen widths (e.g. laptop vs. mobile device).
  
• The iframe "lazy" loading attribute attempts to only load RankedVote when the visitor scrolls it into view. This means your page loads faster for your visitors if the embed is at, say, the bottom of an article.
  

Easily copy the embed code to your clipboard for pasting into your website or CMS editor.

Test on Your Site

As a final step, give your embedded election a quick sanity check.

Visit the page on your computer. Try a couple of browsers. Visit it on your phone. Make note of any visual strangeness.

If there are any issues, the likely culprits involve your site's CSS influencing the iframe or it's containing div in some unexpected way.

If everything looks good, you are ready to launch!

Best Practices

Go Wide

The RankedVote web app that loads inside the iframe is responsive — meaning it changes its layout based on the screen width made available to it. Text, buttons, and more are adjusted. In general, give the embedded election as much width as possible on your page and RankedVote should be able to handle the rest.

Close the Election When It's Done

If you want to focus your visitors on the results of the election as opposed to the voting, you've got two good options:

1. Click "Close Election" in the End Date area on the Election Details page. This will cause any visitors to the election to be pointed towards the results page. This approach requires zero change to your embed code.
2. Use the "Results Page Embed Code" to cause the results page to load up by default instead of the voter page. This requires you to update your page with the new code.

Use a Dark Color

It may sound obvious, but light color on a light background is really hard to read. You now have the power to make your election any color you want. And, with great power comes great responsibility as they say.

So, look through your brand's color palette and choose a heavy, strong option. RankedVote uses its purple #7540EE. The "Rankify Demo" uses bold pink #FF5BB8 and could also work with straight black #000000. For an organization like CNN, it's particular red #CC000 would be a good choice.

Don't do this periwinkle #d1e3ff👇

Choose a heavy, strong color option. Don't pull a periwinkle blunder.