When embedding TurboVote on your website, these recommendations can help improve the user experience and maximize your impact. You can work with your Partner Manager to identify the embed strategies that work best for your organization.
Embed Placement and Design
1. Define your approach. There are many options to choose from when embedding TurboVote on your site. Consider how you want your audience to use TurboVote and what actions you want voters to take.
The most popular option is to create a single page on your site to embed your TurboVote homepage. By embedding your Voting Hub on a dedicated webpage with a short, easily shareable URL (i.e., YOURWEBSITE.org/vote), you can give your audience access to all TurboVote tools from one centralized location. You can easily link to the page from your website navigation, and share it in online campaigns and your election communications.
See a partner example: EDF Action's TurboVote Voting Hub
Alternatively, you can embed specific tools to create a more dynamic, customized experience for your audience and drive essential actions. Embedding one tool per page makes it clear which action you want your audience to take. You can introduce the embedded tool with a brief call to action, or simply let the tool speak for itself.
Options include:
- Search embeds, enabling your audience to research their next election, see what’s on their ballot, or find where to vote simply by entering their address.
-
A “
/register” page featuring your TurboVote Registration Assistance form. -
A “
/request-ballot” page featuring your TurboVote Absentee Ballot Request form. -
A “
/check-your-registration” page featuring your TurboVote Check Your Registration form.
See a partner example: The Civics Center’s Registration Assistance page
2. Seamlessly integrate TurboVote sign-up forms or search boxes onto your site. Create a sleek look by removing the default header and footer content from your embed. You can do this by appending the &seamless=true parameter to your iFrame src URL.
For instance, check out the seamless versions of the Registration Assistance form and Where to Vote search box.
See a partner example: HeadCount’s seamless Sample Ballot Search
3. Keep the page design simple, user-friendly, and aligned with your brand. Remove extraneous or distracting content to help your audience focus on the task at hand.
- Leave adequate white space above and below the embed to ensure breathing room.
- Make the embed the full width of the page (it will automatically scale to fit on mobile or center content at 600px width on desktop).
- If your page has a background color other than white, talk to our team about custom background colors that maintain a cohesive appearance while preserving accessibility compliance.
Promoting Your Embed
4. Use Embed Page Transport URLs to direct your audience toward specific TurboVote experiences within a single TurboVote embed. This makes it easy to maintain a single, all-in-one hub instead of needing to embed multiple tools on the same page.
For instance, this demo page (demoturbovote.org/example) embeds a TurboVote Voting Hub. From the same page, you can direct your audience to the Where to Vote Search embed by sharing this link: https://demoturbovote.org/example?tv-p=/search/where-to-vote/address.
Learn more about creating and sharing Embed Page Transport URLs.
5. Share personalized links in your voting communications. Personalized links make it convenient for busy voters to complete specific actions (e.g., check their registration status, request an absentee ballot) without having to re-enter their personal details (i.e., name, address, contact info) when they return to TurboVote. These links contain a personalization ID for each user. When you embed TurboVote on your site, you can share personalized links to prompt your audience to take specific actions before an election.
Learn more about sharing personalized links and see examples.
Understanding User Behavior
6. Track account creation by query parameter. You can track the number of accounts created whenever any of the following query parameters are used in a TurboVote embed’s src URL:
embedpartnerplacementrlanguage
To do this, go to the “Embeds” tab within the TurboVote Admin Console. From there, you can review the number of sign-ups across all embeds on your site, broken down by the placement of each embed, any referral code used, and the default embed language.
This data can help you evaluate how your audience is engaging with embedded TurboVote tools and which efforts are most effective. For instance, if a large number of sign-ups are associated with a single referral code, it can suggest that a specific campaign was particularly successful.
Things to Avoid
To ensure your audience can easily access TurboVote on your site, we suggest that you do not:
- Embed TurboVote into a “pop-up” modal dialog. Some elements may be cut off, or users could exit out and lose their progress.
- Embed more than one TurboVote tool on a page. This can end up looking cluttered and causing confusion, especially once voters navigate to longer and more complex pages within an embed.
- Embed TurboVote on a page that has promotional modal dialogs or pop-ups (e.g., “Join Our Mailing List”) that obscure or cover the embed, or otherwise make it more difficult for users to access the TurboVote tool. Cookie-consent banners are a familiar pattern to most users and important to respect.
- Embed TurboVote on a page with other primary actions or a lot of text. This can cause distractions or confusion that lead to drop off.
- Set height or style attributes that attempt to limit the TurboVote embed's height. Doing so results in an inaccessible experience, particularly on narrower screens. TurboVote's embed automatically resizes as needed, with logic in the script to set the height of the iFrame to match the current page's task.
Need help optimizing your TurboVote embed? Reach out to partnerships@democracy.works for support.