Embed Code Overview

Embedding TurboVote allows you to display content hosted by TurboVote on your own website. Your embed code defines the specific TurboVote page or tool to be embedded on your site, and how it should appear on your page. You can adjust the appearance and functionality of your TurboVote embed to suit your site design and voter engagement needs.

Structure

TurboVote’s embed code employs standard <script> and <iframe> HTML elements, both of which must be included on a web page in order for the embedded web experience to render.

This code block demonstrates the embed code’s structure. Specific required and optional components are explained in detail below.

<script 
  src="https://assets.turbovote.org/v3/common/js/embed.js" 
  type="text/javascript">
</script>
<iframe 
    frameBorder="0"
    width="100%" 
    id="tv_embed"
   src="https://[partnername].turbovote.org/[page-name]
            ?embed=window
            &partner=[partnerID]
            &placement=[placement]
            &r=[referralcode]
            &lang=en
            &seamless=true
">    
</iframe>
<script>turboVoteEmbed("#tv_embed");</script>

iFrame Attributes

An inline frame (iFrame) is used to display content from an external webpage on your website.

<iframe 
    frameBorder="0"
    width="100%" 
    id="tv_embed" 
    title="Make a plan to vote with TurboVote"
    src="https://[partnername].turbovote.org/[page-name]
            ?embed=window
            &partner=[partnerID]
            &placement=[placement]
            &r=[referralcode]
            &lang=en
">    
</iframe>

By default, TurboVote embed code’s <iframe> element defines four attributes: frameBorder, width, id, title, and src. This table explains each attribute:

Attribute	Required?	Purpose	Additional Notes
`frameBorder`	Suggested	Specifies whether or not to display a border around the embedded content.	By default, we set `frameBorder` to `="0"`(no border) to integrate the embedded content more seamlessly on the page. However, you can set it to `="1"`(display the border) and use stylesheets to intentionally differentiate the iFrame from the rest of the page.
`width`	Suggested	Specifies the width of an iFrame.	By default, we set `width` to `="100%"` to ensure the embedded content fits responsively, regardless of how you integrate it on your page.
`id`	Required	Creates a unique identifier for the iFrame.	This attribute must be set to `“tv_embed”`.
`title`	Suggested	Describes the embedded content to site visitors who use screen readers and other accessibility tools.	Helps with accessibility and SEO. Should describe action voters can take (e.g., `"Make a plan to vote with TurboVote"` when embedding the Voting Hub or `"Check your registration"` when embedding the Check Your Registration form).
`src`	Required	Specifies the URL that you want to embed on your website.	TurboVote embeds display a specific page from your TurboVote destination site (i.e., `https://[partnername].turbovote.org/[page-name]`). Detailed information about each component of the `src` attribute is available in the next section.

iFrame src URL

The src attribute specifies the URL of the document or webpage to embed in an iFrame. Within TurboVote’s embed code, the src attribute is the URL of the co-branded TurboVote page that you want to embed on your website. This URL includes three distinct components:

Domain: https://[partnername].turbovote.org
Path: /[page-name]
Query Parameters: ?[parameter]=[value] or &[parameter]=[value]

<src="
     https://
     [partnername].turbovote.org
     /[page-name]
     ?embed=window
     &partner=[partnerID]
     &placement=[placement]
     &r=[referralcode]
     &lang=[language]
     &seamless=true
">

Domain

To render the embedded experience, the iFrame src URL must include your partner hostname (e.g., “example” in https://example.turbovote.org).

Path

The URL page path defines which TurboVote tool, voting hub, or search you want to embed on your website. You can view the full list of TurboVote page paths, but commonly embedded pages include:

Voting Hub	Path
Voting Hub	`/`
Personalized Voting Hub	When you embed TurboVote on your site, you can share customized links that send voters to personalized pages within your embed. You can also enable TurboVote’s email and SMS notifications to open automatically within your embed. See Personalization in action on our demo site and learn more about creating and sharing personalized links.
Search Boxes	Path
Election Search	`/search/address`
Where to Vote Search	`/search/where-to-vote/address`
Ballot Search	`/search/ballot-info/address`
Tools	Path
Get Election Reminders	`/reminders/voter-info`
Check Registration Status	`/check-your-registration/voter-info`
Get Registration Assistance	`/register-to-vote/voter-info`
Preregister to Vote	`/preregister/voter-info`
Ballot Reminders	`/whats-on-your-ballot/voter-info`
Request Absentee Ballot	`/request-ballot/voter-info`

Query Parameters

What are query parameters?

TurboVote uses query parameters to define how users experience embedded content and what data is passed along. For instance, query parameters may set embed-specific instructions, define the language to show by default, or pass along referral codes and metadata to associate with new user accounts. When sending personalized TurboVote links, the user parameter can be used to append a personalization ID to customized URLs for several TurboVote experiences. You can also track the number of accounts created based on the query parameters used in the src URL.

In the src URL, the first query parameter is structured as ?[parameter]=[value] and subsequent parameters are written as &[parameter]=[value].

Some TurboVote query parameters are used only in embed code, while others have other purposes. Query parameters applicable to the src attribute are explained below, or you can view all TurboVote query parameters.

Embed-Specific Query Parameters

Parameter	Required?	Purpose	Additional Notes
`?embed=window` Note: This parameter is preceded by `?` because it is the first parameter included in the URL. Subsequent parameters are preceded by `&`.	Required	Sets the type of webpage to render.	`window` is the only accepted value.
`&partner=[partnerID]`	Required	Passes along your unique numeric TurboVote partner ID, which is required to render the embedded web experience on your site.	You will receive your partner ID after you request your embed code.
`&placement=[placement]`	Optional	Passes along a name or number used to reference where on your site the embed is integrated.	While this parameter is optional, embed codes provided by your Partner Manager will set the `placement` parameter using a term relevant to the Voting Hub, search box, or tool you’re embedding (e.g., if you embed the Get Election Reminders tool, the `placement` parameter will be set as `“vote-reminders"` by default). You can work with your Partner Manager to append any existing placement IDs for your site or to explore ways to leverage this parameter.

Query Parameters Commonly Used in Embeds

The query parameters referenced in this table are optional, but are commonly used in TurboVote’s embed code. Your Partner Manager can help determine which parameters are appropriate for your embed, according to your website design and voter engagement needs.

Parameter	Purpose	Additional Notes	Embed Example
`&r=[referralcode]`	If you embed TurboVote on a page dedicated to a specific campaign, `r` associates sign ups made from that URL with a TurboVote referral code. This allows you to track the effectiveness of your campaign.	A default referral code is included in the embed code provided by your Partner Manager.
`&lang=en`	`lang` sets the language used throughout the TurboVote experience. The `en` value shows embedded content in English by default.	If the `lang` parameter is absent, TurboVote renders in English by default.	https://demoturbovote.org/example
`&lang=es`	`lang` sets the language used throughout the TurboVote experience. The `es` value shows embedded content in Spanish by default.	If the `lang` parameter is absent, TurboVote renders in English by default.	https://demoturbovote.org/espagnol
`&seamless=true`	Removes header from the embedded TurboVote sign-up form or search box.	If the `seamless` parameter is absent, TurboVote shows header content by default.	Registration Assistance (sign-up form): https://demoturbovote.org/seamless/registration Where to Vote (search box): https://demoturbovote.org/where-to-vote/seamless

See An Example

Here’s an example of an embed code pointing to an Election Reminders sign-up form:

<script 
  src="https://assets.turbovote.org/v3/common/js/embed.js" 
  type="text/javascript">
</script>
<iframe 
    frameBorder="0"
    width="100%" 
    id="tv_embed"
   src="https://example.turbovote.org/reminders/voter-info
            ?embed=window
            &partner=123456789
            &placement=vote-reminders
            &r=spring-voter-education-drive
            &lang=en
">    
</iframe>
<script>turboVoteEmbed("#tv_embed");</script>

As users progress through TurboVote, our embeds resize themselves to ensure they never see a scrollbar, which can be particularly confusing on mobile devices.

Search