Battle for the Net Widget
Join the battle for net neutrality with our action widget!
How it works
- Developer embeds widget code snippet on their site (either modal or banner)
- On September 10th, 2014, users are shown the widget on their first page view
- Users can interact with or dismiss the widget
- A cookie is written so the user doesn’t see the widget again
Please take a look at widget.js if you want to see exactly what you’ll be embedding on your page.
- Compatible with Firefox, Chrome, Safari and Internet Explorer 10+
- Optionally pass in customization parameters (see below), or defaults are used
- Widget checks to make sure it should be shown (September 10th 2014 and hasn’t been shown to this user before, via cookie). You can override this check for testing purposes
- Widget preloads any images required for the chosen animation
- Widget injects a floating
iframeonto your page. All but the most trivial styles and interactions take place in the
- Animation displays in floating
- The user can dismiss the
iframeand a cookie is written so it won’t show again (unless you override)
Installation Instructions (Modal)
See the demo: Development version
The modal animation will show up front-and-center on your page, prompting visitors to contact the FCC and Congress.
To show the modal on September 10th, paste this into your
<script src="//fightforthefuture.github.io/battleforthenet-widget/widget.min.js" async></script>
We’ll be working on adding new features between now and September 10th, (the code you embed on your page won’t change though). Be sure to let your users know this is under development and link them back to https://www.battleforthenet.com/sept10th
Installation Instructions (Banner)
The banner shows up in one of the corners (you can customize), or as a strip along the top or bottom on mobile devices. You can choose a light or dark theme.
To show the banner on September 10th, paste this code into your
Banner customization options:
_bftn_options object in the code snippet above? You can pass some other options in to customize the position of the banner on-screen.
theme: The theme. Either light (default) or dark
position: The position of the banner. Can be topright (default) or bottomright
offsetY: The number of pixels to “nudge” the banner away from the top of the window
url: The URL that clicking the banner should go to. Default is https://www.battleforthenet.com
Customized banner examples:
Banner with dark theme, bottom right corner. Paste this into your
Banner with custom link, paste this into your
How to test the banner/modal
The widget is designed to only appear on September 10th, 2014, and only once, per user, per device. If you’d like to force it to show up on your page for testing, please (re)load the page with #SHOW_BFTN_WIDGET in the URL.
Embed the Modal on your blog
If you want to show off the modal to your users prior to September 10th (thanks!) you can use this code to directly embed it on your page:
To embed the action form on your page, use this code:
Which browsers are supported
Modern browsers, and the two latest versions of Internet Explorer.