Voting Information Tool

The Voting Information Project is developing a white-label, easily embedded web tool that will provide voters with ballot and polling place information based on their registered address.

Embedding Instructions

Adding the Voter Information Tool to your page

Append the following code to your website where you want the Voting Information Tool to appear:

<script type="text/javascript" src="tool.votinginfoproject.org/app.js"></script>
<div id="_vit"></div>
<script type="text/javascript">vit.load({});</script>

The `vit.load` method

You can add parameters to the vit.load method to customize the appearance and functionality of the Voting Information Tool. They are passed into the vit.load method by an options object, that is, a comma-separated set of keys and string values inside the curly braces:

vit.load({
  alert: "Remember to vote on Nov 4!"
});

Parameters

Key	Type	Description
`electionId`	number	id of election hosted by the Google Civic Information API (optional)
`alert`	string	special message to display in a red alert box at the top of the expanded tool
`modal`	boolean	if true, will open up in a modal box to display election information for mobile and tablet devices (defaults to true)
`officialOnly`	boolean	if true, will only display information from official election information sources (defaults to true)
`key`	string	supplies an API key to the tool (optional)
`test`	boolean	if true, returns the VIP Test Election--otherwise returns the next upcoming election (defaults to false)
`width`	string	set the width of the tool (e.g., `450px`); the default width is `640px`
`height`	string	set the height of the tool (the default height is `480px`)
`logo`	string (URL)	link to an alternative logo to display at the top of the tool
`smallLogo`	string (URL)	link to an alternative logo to display in the modal election information view
`title`	string	text appearing beneath the logo of the tool (defaults to `Voting Information Tool`)
`subtitle`	string	text appearing beneath the title (defaults to nothing)
`language`	string	set to `en` by default.
`colors`	object	custom colors (detailed in the next section)
`json`	string (URL)	Language and other customization via a link to a JSON object (detailed in the following section)

Language

You can specify a non-default language by passing a language key into the language parameter:

Key	Language
`en`	English (default)
`es`	Spanish
`ja`	Japanese
`ru`	Russian
`ko`	Korean
`am`	Amharic
`km`	Khmer
`hi`	Hindi
`la`	Laotian
`vi`	Vietnamese
`zh`	Chinese
`so`	Somali
`or`	Oromo
`hm`	Hmong
`th`	Thai
`tl-PH`	Tagalog

Colors

You can also add colors by passing an object of this format to the colors parameter:

Key	Description
`text`	Main application text
`header`	Headers used for categorizing election result data
`selectedHeader`	Header currently selected by the user
`landscapeHeaderBackground`	Shown behind the headers in tablet/desktop view
`alertText`	Header for displaying alerts to the user

Example Embed With Parameters:

<script type="text/javascript" src="tool.votinginfoproject.org/app.js"></script>
<div id="_vit"></div>
<script type="text/javascript">vit.load({
  modal: true,
  officialOnly: true,
  width: '600px',
  height: '480px',
  language: 'es',
  logo: 'http://yourlogourl.com/path/to/logo.jpg',
  smallLogo: 'http://yourlogourl.com/path/to/smallLogo.jpg',
  colors: {
    'text': '#012345',
    'header': '#543210'
  }
});</script>

Customization

For internationalization and language customization, supply a link to the json field containing a URL to a JSON file of the following format:

{
  "text" : {
    "summary" : "Find out about ballot information, polling location, early voting, ID requirements and more...",
    "placeholderText" : {
      "enterAddress" : "Enter Registered Voting Address",
      "changeAddress" : "Enter a different address"
    },
    "about" : {
      "title" : "About the Voting Information Tool",
      "content" : "The Voting Information Project (VIP) works to connect voters with the essential information needed to cast their ballot, such as where to vote and what is on the ballot. It is a project between The Pew Charitable Trusts, Google, and the states. Launched in 2008, VIP works with state and local election officials to provide official election information to citizens through a variety of means, including the Google Civic Information API. The Voting Information Tool is one of the many made available through VIP, ensuring official election information is accessible to voters before and on Election Day."
    },
    "footer" : {
      "text" : "For the most complete and up to date information, consult your local election official."
    },
    "addressNotFound" : {
      "title" : "No Information Found",
      "text" : "You entered:<h1>1234 Main St<br>New York, NY 10000</h1>We couldn't find any election information for the address you entered. Please check to make sure you entered it correctly.",
      "button" : "Try Again"
    },
    "multipleElections" : {
      "text" : "Multiple elections found. Select one:"
    },
    "mailInVoting" : {
      "title" : "Mail-in Voting State",
      "text" : "The registered address you entered is located in a mail-in voting state. This means you can submit your ballot at any official drop box. Would you like to continue searching for drop boxes based on your registered address, or would you like to resubmit your request using your current location?",
      "currentLocation" : "Use Current Location",
      "registeredAddress" : "Continue"
    },
    "headers" : {
      "registeredVoterAddress" : "Registered Voter Address",
      "edit" : "Edit",
      "elections" : "Elections",
      "pollingLocation" : "Polling Location",
      "voterResources" : "Voter Resources",
      "ballotInformation" : "Ballot Information"
    },
    "resources" : {
      "summary" : "Information on how to navigate the elections process, including deadlines, Voter ID information, and registration links.",
      "electionAdministration" : {
        "title" : "Local Election Administration",
        "local_jurisdiction" : "Election Administration",
        "stateElectionsOffice" : "State Elections Office",
        "physicalAddress" : "Physical Address",
        "correspondenceAddress" : "Correspondence Address"
      },
      "moreResources" : {
        "title" : "Additional Resources",
        "electionInformationUrl" : "Election Information",
        "registrationConfirmationUrl" : "Registration Confirmation",
        "absenteeVotingInformationUrl" : "Absentee Voting Information",
        "votingLocationFinderUrl" : "Voting Location Finder",
        "ballotInformationUrl" : "Ballot Information"
      }
    },
    "pollingLocations" : {
      "getDirections" : "Get Directions"
    },
    "inputs" : {
      "registeredAddress" : "Enter Registered Voting Address",
      "differentAddress" : "Enter a different address"
    }
  }
}

IFrame embed

<iframe width="640" height="480" src="https://tool.votinginfoproject.org/iframe-embed.html" frameborder="none"></iframe>

Not all parameters are currently supported. We are currently working to add support for all parameters.

Source code instructions

Setup Instructions

Download npm
npm install -g gulp
npm install
Install bundle
bundle
node_modules/.bin/gulp

Testing Instructions

Download PhantomJS
bundle
rspec spec/examples.rb

wevote/vip-embeddable-tool