iFrame Attributes

By default, our embed code’s iFrame element defines four attributes, two of which are required:

id

The id attribute must be set to “tv_embed” in order for our embed’s javascript to apply to the iFrame element. Required.

title

The title attribute enables you to describe the contents of the embed to site visitors employing accessibility devices. Optional.

src

The src attribute specifies the URL of the page on your co-branded TurboVote site you want to embed on your website.

The sections explain how our embed codes rely on the URL domain, path and query parameters to render a seamlessly integrated web experience. Required.

frameBorder

The frameborder attribute is used to specify whether or not to display the border around the content of an <Iframe>. By default, we set frameborder to ="0", to ensure no border is drawn around the iframe yielding a more seamless integration into the overall page, however you can set it to =”1” and use stylesheets to intentionally differentiate the <Iframe> from the rest of the page. Optional but suggested.

width

The width attribute specifies the width of an iframe. Be default, we set width to ="100%" to ensure the TurboVote page fits responsively into whatever HTML container element you might integrate it into. Optional but suggested.

Things to avoid

• Avoid setting height or style attributes that attempt to set a limit to the TurboVote embed's height. Doing so results in an inaccessible experience, particularly on narrower screens. TurboVote's embed script has logic to set the height of the iframe to match the current page's task. 

<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>