Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Huge refactor #4

Merged
merged 18 commits into from
Feb 11, 2014
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.DS_Store
node_modules

116 changes: 56 additions & 60 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,83 +1,79 @@
<!-- Grab your social icons from https://github.com/carlsednaoui/gitsocial -->
Follow me on [![alt text][1]][1.1]
# Bounce Exchange Alternative [![alt text][1]][1.1]
### (aka OuiBounce)

[1]: http://i.imgur.com/tXSoThF.png (twitter)
[1.1]: http://www.twitter.com/carlsednaoui
<!-- Grab your social icons from https://github.com/carlsednaoui/gitsocial -->
A small library enabling you to display a modal before a user leaves your website. This was inspired by [BounceExchange](http://bounceexchange.com/).

# Bounce Exchange Alternative
This is ~~an open sourced library~~ a small project that turned up easier than expected thanks to [Zertosh](https://github.com/zertosh).

This project was inspired by [BounceExchange](http://bounceexchange.com/) and enables you to display a modal before a user leaves your website.
### The philosophy behind this project
This library helps you increase your landing page conversion rates. From my experience, you can expect a lift of 7% to 15% depending on your audience, traffic type (paid or unpaid) and offer.

## The philosophy behind this project
**Please** use this project to provide value to your visitors. With tools like these it's very easy to create something spammy-looking that provides little value to prospective customers.
Talking about offers... __please__ use OuiBounde to __provide value__ to your visitors. With tools like these __it's very easy to create something spammy-looking__ that provides little value to prospective customers yet ensures a terrible experience.

Quick disclaimer: I have nothing against Bounce Exchange. On the contrary, their business idea is brilliant... it's just that I would approach the banner's messaging very differently. Example:
Not sure what I mean by "provide value"? Here are a few ideas to get your creative juices flowing:

![](http://i.imgur.com/ot2xNi4.png)
![](http://i.imgur.com/tpQNyOr.png)
- Free ebook
- Upcoming webinar invite
- Exclusive access to XYZ
- [A full educational course](http://do.thelandingpagecourse.com/)
- [Valuable content](https://training.kalzumeus.com/)

This doesn't provide much value to the user. It would be **much** more valuable to offer a webinar teaching online marketing best practices to prospective customers. Towards the end of the webinar they could mention how other companies are benefiting by using their services.
### Installation
Download the minified script located in the "source" folder and include it in your HTML head.

If you're interested in this sort of 'value-driven marketing', here are a few examples to get you started:
### Usage
OuiBounce is a jQuery plugin, make sure you load it _after_ jQuery.

- [Unbouce Landing Page Conversion Course](http://do.thelandingpagecourse.com/)
- [Patio11 Training Course](https://training.kalzumeus.com/)
To use it simply:
- Create a hidden modal
- Select the modal with jQuery and call ouibounce. Here's an example:

## Implementation
[Live example](http://colors.carlsednaoui.com/)
```js
$('#ouibounce-modal').ouibounce();
```

- Include ouibounce.js
- Include bootstrap_modal.css
- Create your modal
##### Options
OuiBounce offers a few options, such as:

<!-- OuiBounce Modal -->
<div class="modal fade" id="ouibounce-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
Place your marketing message here!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">No thanks</button>
</div>
</div>
</div>
</div>
- Sensitivity
- Aggressive mode
- Timer

- Et voila! :)
__Configuring sensitivity:__ Use it to define how far your mouse has to be from the window breakpoint. The higher value the more sensitive. _Defaults to 20._

## Notes
This was quickly hacked together and may not behave as expected.
Example
```js
$('#ouibounce-modal').ouibounce({sensitivity: 40});
```

__Enabling aggressive mode:__ By default, OuiBounce will only fire once. When OuiBounce fires a cookie is created to ensure an _non obtrusive_ experience. There are cases, however, when you may want to be more aggressive (as in, you want the modal to be elegible to fire anytime the page is loaded). A perfect example is Paid landing pages.

## Dependencies and credit
OuiBounce depends on jQuery and uses [Bootstrap's](http://getbootstrap.com/javascript/#modals) modal JS & CSS.
Here's how to enable aggressive mode:
```js
$('#ouibounce-modal').ouibounce({aggressive: true});
```

Thanks to [Zertosh](https://github.com/zertosh) for the help.
__Set a min time before OuiBounce fires:__ By default, OuiBounce won't fire in the first second. You can pass a timer option like so:
```js
$('#ouibounce-modal').ouibounce({timer: 0});
```

## License
MIT
__To remove ouibounce:__ Call
```js
$('html').off('mouseout.ouibounce');
```

The MIT License (MIT)

Copyright (c) <year> <copyright holders>
### Example
[Live example](http://colors.carlsednaoui.com/)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
### Miscellaneous
- This library provides no guarantees.
- To contribute, check out [contributing.md](contributing.md).
- Licensed under [MIT](license.md).
- Special thanks to [Zertosh](https://github.com/zertosh), [Jenius](https://github.com/jenius) and [BounceExchange](http://bounceexchange.com/).

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
<!-- Grab your social icons from https://github.com/carlsednaoui/gitsocial -->
[1]: http://i.imgur.com/tXSoThF.png (twitter)
[1.1]: http://www.twitter.com/carlsednaoui
<!-- Grab your social icons from https://github.com/carlsednaoui/gitsocial -->
18 changes: 18 additions & 0 deletions contributing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
# Contributing

Thank you so much for stopping by! It's great to know that you're interested in contributing to this project (or are at least taking the time to read the source).

If you have any questions or feedback don't hesitate to reach out via [Twitter](http://www.twitter.com/carlsednaoui).

### Getting OuiBounce to Work Locally
To get OuiBounce ready locally you'll need to:

- Clone the repo
- Run `npm install`
- Make sure `gulp` is installed globally
- You can do that by running `npm install -g gulp`
- Open the index file in the "test" folder
- Note: Cookies won't work if you simply open the file. You'll need to have a server ready to serve the page. The easies way is to run this: `python -m SimpleHTTPServer`

### Dev Build
To minify OuiBounce run `gulp build` from the command line.
68 changes: 0 additions & 68 deletions deprecated/_deprecated_ouibounce.js

This file was deleted.

31 changes: 0 additions & 31 deletions example/index.html

This file was deleted.

10 changes: 0 additions & 10 deletions example/main.css

This file was deleted.

1 change: 0 additions & 1 deletion example/ouibounce.min.js

This file was deleted.

18 changes: 18 additions & 0 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
prefix = require('gulp-autoprefixer'),
minifyCSS = require('gulp-minify-css'),
rename = require('gulp-rename');

gulp.task('build', function() {
gulp.src('source/ouibounce.js')
.pipe(uglify())
.pipe(rename('ouibounce.min.js'))
.pipe(gulp.dest('source'));

gulp.src('test/ouibounce.css')
.pipe(prefix())
.pipe(minifyCSS())
.pipe(rename('ouibounce.min.css'))
.pipe(gulp.dest('test'));
});
21 changes: 21 additions & 0 deletions license.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2014 Carl Sednaoui

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
29 changes: 29 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "bounce-exchange-alternative",
"version": "0.0.1",
"description": "Show some HTML before visitors leave your site.",
"main": "index.js",
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git://github.com/carlsednaoui/bounce-exchange-alternative.git"
},
"author": "Carl Sednaoui",
"license": "MIT",
"bugs": {
"url": "https://github.com/carlsednaoui/bounce-exchange-alternative/issues"
},
"homepage": "https://github.com/carlsednaoui/bounce-exchange-alternative",
"devDependencies": {
"gulp": "~3.4.0",
"gulp-uglify": "~0.1.0",
"gulp-rename": "~0.2.2",
"gulp-autoprefixer": "0.0.6",
"gulp-minify-css": "~0.3.0"
}
}
Loading