fightforthefuture / battleforthenet-widget

Embed this widget on your site and help save net neutrality!

How to install the widget

Add this to any page, and you're golden: (See the demo!)

<script src="https://widget.battleforthenet.com/widget.js" async></script>

Or, follow these easy instructions for Tumblr.

The goal of this project is to allow anyone with a web site to run their own campaign to save net neutrality. Simply add one line of JavaScript and you're good to go! The modal animation will show up front-and-center on your page, prompting visitors to contact Congress and the FCC.

If you have any problems or questions regarding the widget, please submit an issue.

How it works

The widget is designed to appear once per user, per device, per day, but can be configured to display at a different interval. If you'd like to force it to show up on your page for testing, reload the page with #ALWAYS_SHOW_BFTN_WIDGET at the end of the URL.

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 11+.
• Embed the widget JavaScript code on your page.
• Optionally pass in customization parameters (see below), or defaults are used.
• Widget checks to make sure it should be shown (hasn't been shown to this user recently and user hasn't initiated a call or clicked a donate link recently, via cookie). You can override this check for testing purposes.
• Widget preloads any images required for the chosen animation.
• Widget injects a floating iframe onto your page. All but the most trivial styles and interactions take place in the iframe so as not to interfere with your CSS and JavaScript.
• Animation displays in floating iframe.
• The user can dismiss the iframe and a cookie is written so it won't show again until cookie expires (unless you override).

Modal customization options:

If you define an object called _bftn_options before including the widget code, you can pass some properties in to customize the default behavior.

<script type="text/javascript">
  var _bftn_options = {
    /*
     * Choose from 'take-action', 'capitol', 'onemorevote', 'countdown', 'glitch', 'money', 'stop', 'slow', 'without'.
     * Default is 'take-action'.
     */
    theme: 'onemorevote', // @type {string}
    
    /*
     * Or, if you want your own custom theme, specify its properties here.
     * Unspecified options will fall back to the default values.
     */
    theme: {
      className: 'money', // @type {string} will be applied to iframe body tag
      logos: ['images/money.png', 'images/stop.png'], // @type {Array} img src values
      headline: 'Your headline here.', // @type {string} modal headline text
      body: 'Your body here.' // @type {string} modal body text
    },
    
    /*
     * Choose from 'fp' for Free Press, 'dp' for Demand Progress or
     * 'fftf' for Fight for the Future. Omit this property to randomly split
     * form submissions between all organizations in the Battle for the Net 
     * coalition.
     */
    org: 'fftf', // @type {string}
    
    /*
     * Specify a delay (in milliseconds) before showing the widget. Defaults to one 
     * second.
     */
    delay: 1000, // @type {number}
    
    /*
     * Specify a date for the countdown theme. Defaults to November 23rd, 2017
     * (when the FCC is expected to announce a vote) if omitted. ISO-8601 dates are
     * UTC time, three-argument dates (with a zero-based month) are local time.
     */
    date: new Date(2017, 10, 23), // @type {Date}

    /*
     * Specify view cookie expiration. After initial view, modal will not be
     * displayed to a user again until after this cookie expires. Defaults to one
     * day.
     */
    viewCookieExpires: 1, // @type {number}

    /*
     * Specify action cookie expiration. After initiating a call or clicking a
     * donate link, modal will not be displayed to a user again until after this
     * cookie expires. Defaults to one week.
     */
    actionCookieExpires: 7, // @type {number}
    
    /*
     * If you show the modal on your homepage, you should let users close it to
     * access your site. However, if you launch a new tab to open the modal, closing
     * the modal just leaves the user staring at a blank page. Set this to true to
     * prevent closing the modal - the user can close the tab to dismiss it. Defaults
     * to false.
     */
    uncloseable: false, // @type {boolean}

    /*
     * Prevents the widget iframe from loading Google Analytics. Defaults to false.
     */
    disableGoogleAnalytics: false, // @type {boolean}
    
    /*
     * Always show the widget. Useful for testing.
     */
    always_show_widget: true // @type {boolean}
  };
</script>
<script src="https://widget.battleforthenet.com/widget.js" async></script>

battleforthenet-widget's Issues

Mobile site header cover the "X" to close the widget

From a partner: "our mobile site has a header that drops down and covers up the "x" to close the widget. Screen shot attached. Is there anything we can do about this? Obviously I want people to sign up but don't want to force them."

Loading icon not animating

In the popup/modal, the loading icon (leftmost icon) is not animating. This is a problem because it just looks like an asterisk otherwise. To the ordinary users who this tool is intended to reach, since they are not graphic designers working on a net neutrality campaign, they have never seen this icon "not animating", which means it's broken as far as communicating the necessary message. Sorry if this crucial requirement doesn't make for "tidy" graphic design, but it's important to stress the current failure of the modal, which is the first thing anyone sees, to explain "the web without Net Neutrality" (what is that exactly? A web full of cryptic icons that only have obvious ominous significance to people who are already net neutrality activists?) To be effective, the modal must have some kind of immediately, instantaneous meaning, and for many users the only instant pathway to mapping this political issue onto their existing brain circuitry is with the "loading animation" - this was surely a part of the success of the iconic previous campaign.

Issues on mobile

Opened the tool in mobile:

iOSX > Google Inbox app > likely Safari wrapper

The tool is not mobile friendly. The form hangs off the screen horizontally. Each time you tap into a new input, the form jumps up and down and ends up somewhere else, so you need to scroll to find it. Sometimes when you scroll, it scrolls the "background" page behind the form, other times you can grab the form itself.

I still managed to submit the form but this seems pretty serious as most of your clicks are going to come in on mobile devices.

Great work with everything though, keep fighting the good fight! I'm with you

Close button not showing up

After clicking 'SIGN OUR LETTER TO LAWMAKERS' button, the close button the in the top right is invisible on the 'Thanks! Now can you call?' and the 'Thanks for taking action -- now spread the word!' pages.

Tried demo page (https://widget.battleforthenet.com/demos/modal.html) and running locally, using Chrome 37.

No way to add paragraph breaks to the subtitle text

I need to have a serious sounding title, and subheading, as well as a paragraph break before the actual reveal to seperate it from the serious part.

example:

  var _bftn_options = {
    /*
     * Choose from 'money', 'stop', and 'slow'. Omit this property to get the 
     * default theme.
     */
    theme: 'stop', // @type {string}
    
    /*
     * Or, if you want your own custom theme, specify its properties here.
     * Unspecified options will fall back to the default values.
     */
    theme: {
      className: 'money', // @type {string} will be applied to iframe body tag
      logos: ['images/money.png', 'images/stop.png'], // @type {Array} img src values
      headline: "This website is not covered by your internet plan.", // @type {string} modal headline text
      body: "Please upgrade your internet plan to include gaming and gaming related websites to enjoy this website \n This is what the internet would look like without Net Neutrality" // @type {string} modal body text
    },
    
    /*
     * Choose from 'fp' for Free Press, 'dp' for Demand Progress or
     * 'fftf' for Fight for the Future. Omit this property to randomly split
     * form submissions between all organizations in the Battle for the Net 
     * coalition.
     */
    //org: 'fftf', // @type {string}
    
    /*
     * Specify a delay (in milliseconds) before showing the widget. Defaults to one 
     * second.
     */
    delay: 500, // @type {number}
    
    /*
     * Specify a date on which to display the widget. Defaults to July 12th, 2017 if 
     * omitted. ISO-8601 dates are UTC time, three-argument dates (with a zero-based
     * month) are local time.
     */
    date: new Date(2017, 6, 12), // @type {Date}
    
    /*
     * If you show the modal on your homepage, you should let users close it to
     * access your site. However, if you launch a new tab to open the modal, closing
     * the modal just leaves the user staring at a blank page. Set this to true to
     * prevent closing the modal - the user can close the tab to dismiss it. Defaults
     * to false.
     */
    uncloseable: false, // @type {Boolean}

    /*
     * Prevents the widget iframe from loading Google Analytics. Defaults to false.
     */
    disableGoogleAnalytics: true, // @type {Boolean}
    
    /*
     * Always show the widget. Useful for testing.
     */
    always_show_widget: false // @type {Boolean}
  };

I tried both \n and <br> but they didn't work

Obscured text entry field on iPhone/Chrome

I tried this on my iPhone using Chrome and when I went to fill in my last name, the window scrolled down to where it says, "Free Press will contact you..." so that I could no longer see where I was typing. The same happened when I went to fill in my address.

Phone number issue

The Privacy Policy for use of the phone number is a 404, (https://widget.battleforthenet.com/privacy/)

widget assumes that web site visitors are Americans

The widget asks all visitors to "contact Congress and the FCC". Many countries have congresses, and most people in the world aren't going to know what the three letters 'FCC' stand for, or what a "ZIP" code is. (And what about American citizens residing outside their country, who are entitled to representation but have no ZIP codes?) The trouble with Americans is that they assume that theirs is the only country in the world of any consequence. To help dispel this attitude, I suggest the following revised text:

"Cable companies want to get rid of net neutrality. Without it, sites like ours could be censored, slowed down, or forced to charge extra fees. We can stop them and keep the Internet open, fast, and awesome if people contact the US Congress and Federal Communications Commission, but we only have a few days left. If you're a citizen or resident of the United States, please act now!"

Cookie Key Name Set to Empty String

Instead of the widget shown cookie key name being set to _BFTN_WIDGET_SHOWN in the setCookie method, the cookie key name is set to an empty string.

"Issues" link closes modal, but doesn't open Issues page

On Chrome and Firefox (OSX), clicking the "Issues?" link at the bottom of the modal window closes the window but doesn't open the GitHub page in the link. I can right click and select "Open in New Tab" and then the page loads.

On desktop Safari, clicking the link does nothing. Again, right click and "Open in New Tab" does work.

Update for 2017 -- July 11th

To oppose FCC docket 17-108

Minimized/optimized builds for production?

I was able to reduce filesize 22% overall on these files:

• 30% on widget.js with uglifyjs
• 23% on script.js with uglifyjs
• 24% on style.css with csso

Additionally, I was able to save 58% on the SVGs with svgo.

I'd be happy to write a pre-commit script that would automatically run these optimizations, but it'd also require a bit of a restructure of the repo. We could keep all the files in the same directory, and just add min to the minified files (widget.min.js and so on), or we could use a separate directory (min or prod or something) where all the minified files are kept. I'm leaning towards the latter method, since it'd mean the minify script would just have to copy everything over and minify all the files, whereas if we kept files in place the script would need to modify references in files (change src="script.js" to src="script.min.js" in iframe.html, and so on).

"Send Letter" button out of place on Safari.

From BitTorrent:

Can you pass along this issue that we're seeing on our end in Safari? The "Send Letter" button is out of place (see included image). We verified that this occurs on the demo site as well, at https://widget.battleforthenet.com/demos/modal.html.

Now what?

September 10 has come and passed. I did what I could on that day to help. Now I want to make sure the momentum continues to prevent this from happening.

I probably just misread something or read over it, but I couldn't easily find what the next steps were. Was there a bill on the 10th or 11th that we were trying to fight? Or was this just an awareness thing? In either case, what can we do next without being vague to the people we're sharing this with?

Action button not responding in Safari

The actions link button did not respond on Safari 10.1.1 on MacOS 10.12.5

Closing the banner and reloading the page re-opens the banner

Hey guys,

I'm using the banner and once I close it and reload the page, it is re-opening the banner. Maybe some problem with the cookies not being set from the widget.js? Can someone help me resolve this? It is really irritating to close the banner everytime.

This is showing up if i access a site from outside of the US

there is not point at all in annoying users if their ISP is not inside the US. Sending a letter to U.S. Congress will not have any affect on my local ISP.

Widget does not work with Tor

Because http://members.internetdefenseleague.org
shows a captcha, and obviously when called by script returns Forbidden

On desktop Safari, Address and Postcode form fields should be full width

On wide viewports with Mac Safari 10.1.1, the "This site has been blocked by your ISP" popup's Address and Postcode form fields don't fill the form width, and I believe they should.

Privacy issues re: third-party resources, etc.

This isn't a bug report / feature request for this widget, but rather something I wanted to point out for future widget projects: EFF (and I'm sure other privacy-conscious sites around the 'net) has a strict policy about loading no third-party resources on the page.

What this means in practice is a widget should add any fonts, javascript libraries, etc. directly to the repository so when we clone the widget, all resources are served from our in-house CDN. Also, we need config options to disable cookies as well as any calls to remote trackers such as Optimizely, FFTF leaderboard, etc.

Instructions for WordPress?

got'ny?

On desktop Safari, all fields appear on one row

This is what I see on Safari (OSX). The modal is centered in the screen, and the fields continue past the right edge of the window. If I scroll the window to the right, the remaining fields and the submit button appear, all on the same horizontal line.

IE11/Edge Style and Layout Issues

Here's what it looks like on a Windows 8.1 VM in Internet Explorer 11:

It looks similar in Edge on Windows 8.1.

For US IPs only?

Can geo-ip be used to only show it for ppl in US (as they are the only ones able to do anything about it)?

Scrolling the modal layer on iOS devices

On smaller iPhones, the bottom of the form may be cut off, but attempt to scroll the form fail, scrolling the site layer underneath instead. Even on their largest phone, the iPhone 7 Plus, the form isn't fully displayed on my site so the opt-in checkbox is not visible.

This behavior can also be seen on the demo site in landscape mode. Note that the page under the modal box has scrolled up…

In <head> or <body>

Do I put the <script src="https://widget.battleforthenet.com/widget.js" async></script> code in the section of my website or in the section? Does it matter where in the section it's placed?

Thanks.

Bruce

Double scroll bars in Chrome/Linux

text boxes overrun the pop-up

The pop-up itself is tidy, but the text boxes for the petition run off the side of it into the translucent part of the window. Is it supposed to be like that? See screenshot.

Continues to show

Even after seen, the modal keeps popping up. Had to take it off site due to this :/

Even happens on the demo page:
https://www.battleforthenet.com/july12/

Chrome for Linux

Widget doesn't show up for the first time when s user tries to access the site

We have noticed that the widget did not show up for the first time in any of the test branch servers. We were able to get the widget only by appending #ALWAYS_SHOW_BFTN_WIDGET to the url.

Modal should show user what they are sending, and allow them to change it.

I think that the Read button should be removed, and instead when the user clicks Sign the citizen letter for net neutrality the letter should show the letter, let the user modify it to their liking, and then click Continue to send the letter and signature.

non US addresses

Hi I have a large audience outside of the US, is it valid to send letters from non-US citizens? I notice there is only a ZIP code box in the form. Thanks!

Firefox modal form input CSS problems

CSS on the form inputs and JS on the modal text needs work to function correctly in Firefox on Windows 7 and Ubuntu/Mint (I assume OSX too.)

The form inputs need to be wrapped in divs if width: 25% is going to be used.

The height on the cta div blocks user access to the form inputs.

<div class="cta" style="height: 147px;">

You cannot use the form in Firefox.

Call and after-call screen doesn't size to mobile screens

The first screen of the widget resizes nicely, but on the second it hangs off the screen.

Buttons (e.g. "send video") should either wrap or be hidden if they don't fit on the screen. Call button and phone number field should resize.

301 moved permanently message

When you click on "projects" the message that appears is "301 moved permanently". The same happens when you click on "news".

404 error when we clicked the "Privacy policy" link in the widget.

Link to reproduce the issue : https://www.screencast.com/t/rLRgJXb08zQa

Default date set to June 12, 2017

if (typeof _bftn_options.date == "undefined") _bftn_options.date = new Date(2017, 6 /* Zero-based month */, 12);

Saw that it was 6-12-2017 in widget.js. Should it be 7-12-2017?
Same thing is going on in the modal customization options.

/* * Specify a date on which to display the widget. Defaults to July 12th, 2017 if * omitted. ISO-8601 dates are UTC time, three-argument dates (with a zero-based * month) are local time. */ date: new Date(2017, 6, 12), // @type {Date}

"Slow" icon not intuitive

I thought that the icon for slow was an icon for sites being outright deleted or disappearing entirely, it looks like a bubble popping effect.
Usually with spinner gifs they start off at 100% opacity and each "petal" has less opacity than the previous.

I've made two adjusted versions as examples, one that fades faster than the other.
I think that another good idea would be to have the outline around the rest of the block as a lot of spinners have this.

Examples:

Mixed content error

I installed the script in WordPress using wp_enqueue_script in functions.php. It worked on my test site, but not on my live site because of mixed content. Error appeared in Chrome, Firefox, and Safari.
Error message:
Mixed Content: The page at 'https://example.com/#ALWAYS_SHOW_BFTN_WIDGET' was loaded over HTTPS, but requested an insecure resource 'http://widget.battleforthenet.com/iframe/iframe.html'. This request has been blocked; the content must be served over HTTPS.

Instructions on self-hosting widget

I would like to include this on my website, but having it directly run javascript that can change at any time seems like a major security risk.

Is there any possibility a zip/tar.gz download could be provided that only uses relative URLs, or just instructions on how to make one?

Possible SEO Hit

At the company I work for, SEO is a big deal. Google searches, for instance, bring in a large portion of the company's site traffic. That being said, Google penalizes sites who show full screen interstitials, especially on mobile screens. Also, on mobile, it's hard for a user to tell they've landed on the page they were expecting because the modal is full screen.

Has there been thought given to:

1. Showing the modal on the second page visit?
2. Showing a smaller, banner type interstitial?
3. Not showing the modal to bots?

textContent is not a valid property for objects of type DocumentFragment

https://github.com/fightforthefuture/battleforthenet-widget/blob/master/iframe/script.js#L116

Browsers are likely supporting it anyways, but i'm not seeing any evidence thats its an officially recognized property for DocumentFragment. You are suppose to create a child P element on the fragment, and change the text/html content of that.

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Widget closing by mistake

It seems like if the user clicks outside of the foreground widget window (for example anywhere else in the main webpage window), the widget closes (or maybe is just backgrounded?). This could confuse/discourage users-- fix it so the widget window remains in the foreground until the form is submitted?

Quick comment field style tweak to make the FCC form less daunting

Currently, the FCC form is a bit scary with all its form fields. The final field containing the pre-filled long-form content is a little confusing because it's sized like a normal form field but has more than 1 line of content.

By increasing its height and distinguishing its background, the long-form content field can be made to look more like a typical textarea, which is a friendlier call-out because: 1) users recognize it as a free-form field (which is often optional), and 2) it's already filled out with useful content.

An example style tweak for that textarea, with screenshot:

background-color: rgba(102, 121, 252, 0.14);
height: 88px;

Tweet length issue

The Twitter link provided a message that was too long to allow adding a short @mention.

Modal is irrelevant for non-US users

I'd love to include this on my site, but the problem is that this particular net neutrality fight is entirely US-based. My users from outside the USA won't be directly affected by what the FCC decides, and even if they are interested+concerned, they can't take action because the citizen letter is for US citzens/residents only.

So, can we use geolocation or something to not hide the modal for users outside America? Or maybe show them a different/modified modal?

Widget might appear on the wrong date, depending on user's time zone

My computer is in EDT. If I set my computer clock to July 12, the widget does not appear. If I set it to July 11, it does. I think this is because (new Date('2017-07-12')).getDate() is 11 in my time zone, not 12.

iFrame <body> Tag's Overflow Style Causing Layout Issue

In all browsers I tested (Chrome, FF, IE11, Safari), the overflow-y: scroll style on the body tag in /iframe/style.css is (counterintuitively) causing a vertical column of whitespace along the right edge of the browser viewport. Screenshot:

On a personal note: given all current browsers' default user agent style for the unused overflow-x rule is visible, it is unclear to me why browsers would leave a column of whitespace in the viewport for a vertical scrollbar that never renders.

[Important] Make an offline zip package.

If the user is using RequestPolicy(like me), your widget never trigger because the addon block 3rd party
connection. I want you to create ZIP package asap so I could implement on my website without 3rd party access.

Form layout issue in IE11

In Internet Explorer 11, the form doesn't layout correctly:

Potential fix is around line 150 of style.css, under .modal form .flex, add a new CSS rule:

min-width: 43%;

Then it looks like: