Coder Social home page Coder Social logo

bhanditz / battleforthenet-widget Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fightforthefuture/battleforthenet-widget

0.0 2.0 0.0 1009 KB

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

License: BSD 2-Clause "Simplified" License

JavaScript 53.20% HTML 21.29% CSS 25.52%

battleforthenet-widget's Introduction

CircleCI

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 People

Contributors

as-com avatar bmorearty avatar decoy31 avatar dsanders11 avatar dutch-embree avatar emma-sg avatar evangreer avatar foxtrek64 avatar gaudette75 avatar holmesworcester avatar ipstenu avatar kenmickles avatar mbalcorta avatar mikemorris avatar mrstonedone avatar pehjota avatar rubbingalcoholic avatar shoshi avatar sirpengi avatar strugee avatar tibetsprague avatar zenexer avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.