Encourage Your Users to Vote

U.S. midterm elections are coming up on November 6. This year they're especially important. You can advocate for democracy by encouraging your users to vote.

☞ Add a voter registration call-to-action to your website

This simple code snippet will add a voter registration call-to-action to any page.

Include this line of HTML on your site:

The banner is only shown to U.S. users up to election day. As election day approaches, the "Register to Vote" option will be replaced by the "Get Polling Location" button.

☞ Preview it on your site

To quickly preview how it looks on your page, you may paste this into your console:

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://vote.speaklouder.org/r1/banner.min.js';
document.body.appendChild(script); Copy

☞ How to customize the banner

You can set the following attributes under window.voteBannerConfig:

backgroundColor: The background color of the banner
fontColor: The font color of the banner
defaultButtonFontColor: The font color for buttons
defaultButtonBackgroundColor: The background color for buttons
defaultButtonBackgroundColorHover: The background color for buttons on hover
mainButtonFontColor: The font color for the main call-to-action button ("Register to Vote")
mainButtonBackgroundColor: The background color for the main call-to-action button
mainButtonBackgroundColorHover: The background color for the main call-to-action button on hover
text: The text shown (HTML ok)

Here is the default settings object. You can change or remove any of these attributes to customize the appearance of the banner:

window.voteBannerConfig = {
      backgroundColor: '#ff7a2b',
      fontColor: '#000',
      defaultButtonFontColor: '#fff',
      defaultButtonBackgroundColor: '#8f7fcc',
      defaultButtonBackgroundColorHover: '#5c3fcc',
      mainButtonFontColor: '#fff',
      mainButtonBackgroundColor: '#585fff',
      mainButtonBackgroundColorHover: '#5c3fcc',
      text: '<strong>Nov 6</strong> elections: are you voting?',
  };

Be sure to set window.voteBannerConfig before including the <script> tag.

☞ Compatibility

This snippet is compatible with IE 9+, Firefox 3.5+, Safari 3.1+ (Mobile Safari 3.2+), Opera 10.5+, and Chrome.

☞ Open Source

This library is open source on Github here.