Check out my personal resume at http://zuse.me

Lobibox

Free responsive jQuery messagebox and notification plugin available for commercial and non-commercial usages.

15393 Download View on Github

Version 1.2.4 released. View release notes


Comming soon

  • Actions (buttons) in notifications
  • Loading indicator for window when content loading is in progress
  • Resizable option for lobibox window

Any suggestions about new features are appreciated


Lobibox is devided into two parts

  • Messageboxes
  • Notifications

Features

Messageboxes

  • Lobibox messagesboxes can be modal and not modal
  • You can show multiple messages at the same time
  • Use any available animation class for showing and hiding messageboxes
  • Every message can be draggable (On small screens dragging is disabled)
  • You can show
    • messagesboxes in different colors and icons
    • confirm message
    • one line prompt (Any HTML5 input type can be used in prompt window. Such as: text, color, date, datetime, email, number, range etc)
    • multiline prompt
    • Progress messagebox. Lobibox comes with default progress style but you can use bootstrap or any other style progress bar.
    • custom content window with ajax support with custom action buttons
  • Every message is an instance of plugin. You can easily grab the instance and attach events or call methods directly on the instance.

Notifications

  • Different color support
  • Possibility to show in any position of screen
  • Delay
  • Show delay indicator
  • Show with image
  • Sound support
  • Size support. You can show notifications of different size

Installation and dependecies.

Lobibox is only depended on jQuery.

You can download lobibox from the button above, clone from github or run bower install lobibox to get lobibox files.

1. Include necessary css/js files

<!DOCTYPE html>
<html>
<head>
  <!--Include this css file in the <head> tag -->
  <link rel="stylesheet" href="dist/css/Lobibox.min.css"/>
</head>

<body>
  ...
  <!--Include these script files in the <head> or <body> tag-->
  <script src="lib/jquery.1.11.min.js"></script>
  <script src="dist/js/Lobibox.min.js"></script>
  <!-- If you do not need both (messageboxes and notifications) you can inclue only one of them -->
  <!-- <script src="dist/js/messageboxes.min.js"></script> -->
  <!-- <script src="dist/js/notifications.min.js"></script> -->
</body>
</html>

2. Call plugin method to show messageboxes or notifications

Messageboxes

Confirm

Lobibox.confirm({
... //Options
});

Alert

Lobibox.alert(
'error|success|warning|info', // Any of the following
{
    ... //Options
}
);

Prompt

Lobibox.prompt(
'', // Any HTML5 input type is valid
{
    ... //Options
}
);

Progress

Lobibox.progress({
... //Options
});

Window

Lobibox.window({
... //Options
});

Options

Default options for all messageboxes

horizontalOffset: 5,                //If the messagebox is larger (in width) than window's width. The messagebox's width is reduced to window width - 2 * horizontalOffset
verticalOffset: 5,                  //If the messagebox is larger (in height) than window's height. The messagebox's height is reduced to window height - 2 * verticalOffset
width: 600,
height: 'auto',                     // Height is automatically calculated by width
closeButton: true,                  // Show close button or not
draggable: false,                   // Make messagebox draggable
customBtnClass: 'lobibox-btn lobibox-btn-default', // Class for custom buttons
modal: true,
debug: false,
buttonsAlign: 'center',             // Position where buttons should be aligned
closeOnEsc: true,                   // Close messagebox on Esc press
delayToRemove: 200,                 // Time after which lobibox will be removed after remove call. (This option is for hide animation to finish)
delay: false,                       // Time to remove lobibox after shown
baseClass: 'animated-super-fast',   // Base class to add all messageboxes
showClass: 'zoomIn',                // Show animation class
hideClass: 'zoomOut',               // Hide animation class
iconSource: 'bootstrap',            // "bootstrap" or "fontAwesome" the library which will be used for icons

//Overriding default options
Lobibox.base.DEFAULTS = $.extend({}, Lobibox.base.DEFAULTS, {
... //override any options from default options
});
-->

Available options for all messageboxes

Lobibox.base.OPTIONS = {
//DO NOT change this value. Lobibox depended on it
bodyClass       : 'lobibox-open',
//DO NOT change this object. Lobibox is depended on it
modalClasses : {
    'error'     : 'lobibox-error',
    'success'   : 'lobibox-success',
    'info'      : 'lobibox-info',
    'warning'   : 'lobibox-warning',
    'confirm'   : 'lobibox-confirm',
    'progress'  : 'lobibox-progress',
    'prompt'    : 'lobibox-prompt',
    'default'   : 'lobibox-default',
    'window'    : 'lobibox-window'
},
//This is option how buttons can be shown. What are buttonsAlign option available values
buttonsAlign: ['left', 'center', 'right'],
//You can change the title or class of buttons from here or use the same structure object for button when creating messagebox
//closeOnClick : true will close the messagebox when clicking this type of button. Set it to false not to close messagebox when clicking on it
buttons: {
    ok: {
        'class': 'lobibox-btn lobibox-btn-default',
        text: 'OK',
        closeOnClick: true
    },
    cancel: {
        'class': 'lobibox-btn lobibox-btn-cancel',
        text: 'Cancel',
        closeOnClick: true
    },
    yes: {
        'class': 'lobibox-btn lobibox-btn-yes',
        text: 'Yes',
        closeOnClick: true
    },
    no: {
        'class': 'lobibox-btn lobibox-btn-no',
        text: 'No',
        closeOnClick: true
    }
},
icons: {
    bootstrap: {
        confirm: 'glyphicon glyphicon-question-sign',
        success: 'glyphicon glyphicon-ok-sign',
        error: 'glyphicon glyphicon-remove-sign',
        warning: 'glyphicon glyphicon-exclamation-sign',
        info: 'glyphicon glyphicon-info-sign'
    },
    fontAwesome: {
        confirm: 'fa fa-question-circle',
        success: 'fa fa-check-circle',
        error: 'fa fa-times-circle',
        warning: 'fa fa-exclamation-circle',
        info: 'fa fa-info-circle'
    }
}
};


//Overriding default options
Lobibox.base.OPTIONS = $.extend({}, Lobibox.base.OPTIONS, {
... //override any options except those above which is written "DO NOT change"
});

Default options for confirm

title           : 'Question',
width           : 500,

//Overriding default options
Lobibox.confirm.DEFAULTS = $.extend({}, Lobibox.confirm.DEFAULTS, {
... //override any options from default options
});

Default options for prompt

width: 400,
attrs : {},         // Plain object of any valid attribute of input field
value: '',          // Value which is given to textfield when messagebox is created
multiline: false,   // Set this true for multiline prompt
lines: 3,           // This works only for multiline prompt. Number of lines
type: 'text',       // Prompt type. Available types (text|number|color)
label: ''           // Set some text which will be shown exactly on top of textfield
required: true,
errorMessage: 'The field is required'

//Overriding default options
Lobibox.prompt.DEFAULTS = $.extend({}, Lobibox.prompt.DEFAULTS, {
... //override any options from default options
});

Default options for alert


Lobibox.alert.DEFAULTS = {
warning: {
    title: 'Warning'
},
info:{
    title: 'Information'
},
success: {
    title: 'Success'
},
error: {
    title: 'Error'
}
};

//Overriding default options
Lobibox.alert.DEFAULTS = $.extend({}, Lobibox.alert.DEFAULTS, {
... //override any options from default options
});

Default options for progress

width               : 500,
showProgressLabel   : true,     // Show percentage of progress
label               : '',       // Show progress label
progressTpl         : false,    //Template of progress bar
<!-- You can use bootstrap progress bar by correct template -->
<!-- FOR EXAMPLE -->
<!-- This element must have class "lobibox-progress-outer" -->
<div class="progress lobibox-progress-outer">
<!-- This element must have class "lobibox-progress-element" -->
<div class="progress-bar progress-bar-danger progress-bar-striped lobibox-progress-element" data-role="progress-text" role="progressbar"></div>
</div>

//Overriding default options
Lobibox.progress.DEFAULTS = $.extend({}, Lobibox.progress.DEFAULTS, {
... //override any options from default options
});


                        

Default options for window

width           : 480,
height          : 600,
content         : '',       // HTML Content of window
url             : '',       // URL which will be used to load content
draggable       : true,     // Override default option
autoload        : true,     // Auto load from given url when window is created
loadMethod      : 'GET',    // Ajax method to load content
showAfterLoad   : true,     // Show window after content is loaded or show and then load content
params          : {}        // Parameters which will be send by ajax for loading content

//Overriding default options
Lobibox.window.DEFAULTS = $.extend({}, Lobibox.window.DEFAULTS, {
... //override any options from default options
});

Methods

In order to call methods, first you must get the instance of the messagebox.

There are two ways to get the instance of the messagebox

// 1. Save the instance in variable when showing messagebox
var lobibox = Lobibox.confirm({
msg         : "Are you sure you want to delete this user?"
});
// 2. Or you can select the lobibox message element and get instance by data attribute
var lobibox = $('.lobibox-confirm').data('lobibox');

// And you can call any avaiable method
lobibox.hide();
lobibox.show();
lobibox.setWidth(600);
lobibox.setPosition(200, 400);
lobibox.setTitle('New title');

Methods for all messageboxes

Name
Parameters
Return type
Description
hide - Return Instance
Parameters none
Instance
Hide the messagebox
destroy - Return Instance
Parameters none
Instance
Removes the messagebox from document
setWidth(width) - Return Instance
Parameters
width - Integer, REQUIRED new width of messagebox
Instance
Set the width of messagebox
setHeight(height) - Return Instance
Parameters
height - Integer, REQUIRED new height of messagebox
Instance
Set the height of messagebox
setSize(width, height) - Return Instance
Parameters
width - Integer, REQUIRED new width of messagebox
height - Integer, REQUIRED new height of messagebox
Instance
Set the width and height of messagebox
setPosition(left, top) - Return Instance
Parameters
left - (Integer|String), REQUIRED left coordinate of messsagebox or string representaing position. Available: ('top', 'center', 'bottom')
top - Integer, OPTIONAL Top coordinate of messagebox
Instance
Set position of messagebox
setTitle(title) - Return Instance
Parameters
title - String, REQUIRED new title of messagebox
Instance
Set the title of messagebox
getTitle - Return String
Parameters none
String
Get the title of messagebox
show - Return Instance
Parameters none
Instance
Show messagebox
-->

Methods for prompt

Name
Parameters
Return type
Description
setValue(val) - Return Instance
Parameters
val - String, REQUIRED value of input
Instance
Set value of input
getVaue - Return String
Parameters none
String
Get value of input

Methods for progress

Name
Parameters
Return type
Description
setProgress(progress) - Return Instance
Parameters
progress - Integer, REQUIRED progress value
Instance
Set progress value
getProgress - Return Integer
Parameters none
Integer
Get progress value

Methods for window

Name
Parameters
Return type
Description
setParams(params) - Return Instance
Parameters
params - Object, REQUIRED new params
Instance
Setter method for params option
getParams - Return Object
Parameters none
Object
Getter method for params
setLoadMethod(method) - Return Instance
Parameters
method - String, REQUIRED new method
Instance
Setter method of loadMethod option
getLoadMethod - Return String
Parameters none
String
Getter method for loadMethod option
setContent(content) - Return Instance
Parameters
content - String, REQUIRED new content
Instance
Setter method of content option. Change the content of window
getContent - Return String
Parameters none
String
Getter method of content option
setUrl(url) - Return Instance
Parameters
url - String, REQUIRED new url
Instance
Setter method of url option
getUrl - Return String
Parameters none
String
Getter method of url option
load(callback) - Return Instance
Parameters
callback - Function, OPTIONAL callback function
Instance
Loads content to window by ajax from specific url

Events

Using events

Lobibox.alert('info', {
onShow: function(lobibox){

}
});

Common events for all types messagebox

Name
Parameters
Description
onShow
Parameters:
Lobibox - instance of plugin
Before messagebox is shown
shown
Parameters:
Lobibox - instance of plugin
After messagebox is shown
beforeClose
Parameters:
Lobibox - instance of plugin
Before messagebox is closed
hidden
Parameters:
Lobibox - instance of plugin
After messagebox is closed

Progress messagebox event

Name
Parameters
Description
progressUpdated
Parameters:
Lobibox - instance of plugin
When progressbar progress is changed
progressCompleted
Parameters:
Lobibox - instance of plugin
When progressbar progress is completed

Examples

Lobibox.confirm({
msg: "Are you sure you want to delete this user?",
});
Lobibox.alert(type, //AVAILABLE TYPES: "error", "info", "success", "warning"
{
msg: "Lorem ipsum dolor sit amet byron frown tumult minstrel wicked clouded bows columbine full"
});
Lobibox.prompt('text', //Any input type will be valid
{
title: 'Please enter username',
//Attributes of <input>
attrs: {
    placeholder: "Username"
}
});
Lobibox.progress({
title: 'Please wait',
label: 'Uploading files...',
onShow: function ($this) {
    var i = 0;
    var inter = setInterval(function () {
        window.console.log(i);
        if (i > 100) {
            inter = clearInterval(inter);
        }
        i = i + 0.1;
        $this.setProgress(i);
    }, 10);
}
});
Lobibox.progress({
title: 'Please wait',
label: 'Uploading files...',
progressTpl : '<div class="progress lobibox-progress-outer">\n\
            <div class="progress-bar progress-bar-danger progress-bar-striped lobibox-progress-element" data-role="progress-text" role="progressbar"></div>\n\
            </div>',
onShow: function ($this) {
    var i = 0;
    var inter = setInterval(function () {
        window.console.log(i);
        if (i > 100) {
            inter = clearInterval(inter);
        }
        i = i + 0.1;
        $this.setProgress(i);
    }, 10);
}
});
Lobibox.window({
title: 'Window title',
content: '...'
});

Custom buttons

-->
 Lobibox.alert('error', {
msg: 'This is an error message',
//buttons: ['ok', 'cancel', 'yes', 'no'],
//Or more powerfull way
buttons: {
    ok: {
        'class': 'btn btn-info',
        closeOnClick: false
    },
    cancel: {
        'class': 'btn btn-danger',
        closeOnClick: false
    },
    yes: {
        'class': 'btn btn-success',
        closeOnClick: false
    },
    no: {
        'class': 'btn btn-warning',
        closeOnClick: false
    },
    custom: {
        'class': 'btn btn-default',
        text: 'Custom'
    }
},
callback: function(lobibox, type){
    var btnType;
    if (type === 'no'){
        btnType = 'warning';
    }else if (type === 'yes'){
        btnType = 'success';
    }else if (type === 'ok'){
        btnType = 'info';
    }else if (type === 'cancel'){
        btnType = 'error';
    }
    Lobibox.notify(btnType, {
        size: 'mini',
        msg: 'This is ' + btnType +' message'
    });
}
});

Disable icon

Lobibox.confirm({
iconClass: false,
msg: 'Are you sure?'
});

Advanced usage of Lobibox.window

Lobibox.window({
title: 'Window title',
//Available types: string, jquery object, function
content: function(){
    return $('.container');
},
url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css',
autoload: false,
loadMethod: 'GET',
//Load parameters
params: {
    param1: 'Lorem',
    param2: 'Ipsum'
},
buttons: {
    load: {
        text: 'Load from url'
    },
    close: {
        text: 'Close',
        closeOnClick: true
    }
},
callback: function($this, type, ev){
    if (type === 'load'){
        $this.load(function(){
            //Do something when content is loaded
        });
    }
}
});

Callbacks

All popup boxes have callback option

Lobibox.confirm({
msg: "Are you sure you want to delete this user?",
callback: function ($this, type, ev) {
    //Your code goes here
}
});

Progress does not update itself.

But you can implement it easily when uploading or waiting something

Notifications

Basic usage

Lobibox.notify(
'warning',  // Available types 'warning', 'info', 'success', 'error'
{
    ...
}
);

Options

Default options for lobibox notifications

title: true,                // Title of notification. Do not include it for default title or set custom string. Set this false to disable title
size: 'normal',             // normal, mini, large
soundPath: 'src/sounds/',   // The folder path where sounds are located
soundExt: '.ogg',           // Default extension for all sounds
showClass: 'zoomIn',        // Show animation class.
hideClass: 'zoomOut',       // Hide animation class.
icon: true,                 // Icon of notification. Leave as is for default icon or set custom string
msg: '',                    // Message of notification
img: null,                  // Image source string
closable: true,             // Make notifications closable
delay: 5000,                // Hide notification after this time (in miliseconds)
delayIndicator: true,       // Show timer indicator
closeOnClick: true,         // Close notifications by clicking on them
width: 400,                 // Width of notification box
sound: true,                // Sound of notification. Set this false to disable sound. Leave as is for default sound or set custom soud path
position: "bottom right"    // Place to show notification. Available options: "top left", "top right", "bottom left", "bottom right"
iconSource: "bootstrap"     // "bootstrap" or "fontAwesome" the library which will be used for icons
rounded: false,             // Whether to make notification corners rounded
messageHeight: 60,          // Notification message maximum height. This is not for notification itself, this is for .lobibox-notify-msg
pauseDelayOnHover: true,    // When you mouse over on notification, delay will be paused, only if continueDelayOnInactiveTab is false.
onClickUrl: null,           // The url which will be opened when notification is clicked
showAfterPrevious: false,   // Set this to true if you want notification not to be shown until previous notification is closed. This is useful for notification queues
continueDelayOnInactiveTab: true, // Continue delay when browser tab is inactive

//Overriding default options
Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, {
... //override any options from default options
});

Available options for lobibox notifications

Lobibox.notify.OPTIONS = {
'class': 'animated-fast',
//You can override options for large notifications from here
large: {
    width: 500,
    messageHeight: 96
},
//You can override options for small notifications from here
mini: {
    'class': 'notify-mini',
    messageHeight: 32
},
//Default options of different style notifications
default: {
    'class': 'lobibox-notify-default',
    'title': 'Default',
    sound: false
},
success: {
    'title': 'Success',
    'icon': 'glyphicon glyphicon-ok-sign',
    sound: 'sound2.mp3'
},
error: {
    'class': 'lobibox-notify-error',
    'title': 'Error',
    sound: 'sound4.mp3'
},
warning: {
    'class': 'lobibox-notify-warning',
    'title': 'Warning',
    sound: 'sound5.mp3'
},
info: {
    'class': 'lobibox-notify-info',
    'title': 'Information',
    sound: 'sound6.mp3'
}
};

//Overriding default options
Lobibox.notify.OPTIONS = $.extend({}, Lobibox.notify.OPTIONS, {
... //override any options from default options
});

Methods

Name
Parameters
Return type
Description
remove - Return Instance
Parameters none
Instance
Delete the notification

Events

Using events

Lobibox.notify('info', {
    onClick: function(){
        // your code goes here
    }
});
Name
Parameters
Description
onClick new
Parameters:
jQuery.Event - jquery event
When you click on notification

Examples

Pause delay of notification mouse over new

Lobibox.notify('default', {
    pauseDelayOnHover: true,
    continueDelayOnInactiveTab: false,
    msg: 'Lorem ipsum dolor sit amet hears farmer indemnity inherent.'
});

Open url on notification click new

Lobibox.notify('default', {
    onClickUrl: 'http://google.com',
    msg: 'Lorem ipsum dolor sit amet hears farmer indemnity inherent.'
});

Show notification after previous is closed new

Lobibox.notify('default', {
    showAfterPrevious: true,
    msg: 'Lorem ipsum dolor sit amet hears farmer indemnity inherent.'
});

Continue delay even when browser tab is not active new

Lobibox.notify('default', {
    continueDelayOnInactiveTab: true,
    msg: 'Lorem ipsum dolor sit amet hears farmer indemnity inherent.'
});

Rounded corners

Lobibox.notify(type, {
    ...
    size: 'mini',
    rounded: true,
    delayIndicator: false,
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

Position center

Lobibox.notify(type, {
...
size: 'mini',
rounded: true,
delay: false,
position: 'center top', //or 'center bottom'
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

Different position

Lobibox.notify(type, {
...
size: 'mini',
rounded: true,
delay: false,
position: {
    left: number, top: number
},
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

Basic notifications Can be closed by clicking on it

Lobibox.notify(type, {
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes. Slight fallen one opportunity dyspepsia, puzzled quickening throbbing row worm numerous sagittis wreaths.'
});

With image

Lobibox.notify(type, {
...
img: '...', //path to image
});

Disable sound

Lobibox.notify(type, {
...
sound: false,
});

Custom title

Lobibox.notify(type, {
...
title: 'Custom title',
});

Without icon and image

Lobibox.notify(type, {
...
icon: false,
});

Increase delay time

Lobibox.notify(type, {
...
delay: 15000,  //In milliseconds
});

Sticky (without delay)

Lobibox.notify(type, {
...
delay: false,
});

Alternative position

Lobibox.notify(type, {
...
position: 'bottom right' //AVAILABLE OPTIONS: 'top left', 'top right', 'bottom left', 'bottom right'
});

Change width

Lobibox.notify(type, {
...
width: 400 //Any Integer
});

Change Animation

For animation Lobibox is depended on animate.css. You can use any animate.css classes

By default .animated class is added

Lobibox.notify(type, {
...
showClass: 'fadeInDown',
hideClass: 'fadeUpDown',
width: 400 //Any Integer
});

Large Notifications

Large notifications

  • are sticky (they will not be closed automatically)
  • can be closed only by clicking close button
  • does not have delay
  • are larger in width
Lobibox.notify(type, {
...
size: 'large',
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

With Image

Lobibox.notify(type, {
...
img: '...',
size: 'large',
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});
Alternative position
Lobibox.notify(type, {
...
size: 'large',
position: 'bottom left',
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});
Change animation -->
Lobibox.notify(type, {
...
size: 'large',
showClass: 'fadeInDown',
hideClass: 'fadeUpDown',
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

Mini notifications

For mini notifications icon and image is shown on small size and title is disabled by default. Although you can enable it by giving title parameter when initializing.

Lobibox.notify(type, {
...
size: 'mini',
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

With image

Lobibox.notify(type, {
...
size: 'mini',
img: '...',
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

Without icon

Lobibox.notify(type, {
...
size: 'mini',
icon: false,
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

With title

Lobibox.notify(type, {
...
size: 'mini',
title: 'Lorem ipsum',
msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});

Release Notes

  • v1.2.4
  • [new] Added pauseDelayOnHover option. When you mouse over on notification, delay will be paused, only if continueDelayOnInactiveTab is false.
  • [new] Added continueDelayOnInactiveTab option. Continue delay when browser tab is inactive.
  • [new] Added onClickUrl option. The url which will be opened when notification is clicked.
  • [new] Added showAfterPrevious option. Set this to true if you want notification not to be shown until previous notification is closed. This is useful for notification queues.
  • [new] Added continueDelayOnInactiveTab option. Continue delay when browser tab is inactive.
  • v1.2.3
  • Bower support added
  • Added default (dark) style notification
  • New (rounded) parameter in notifications to make notification corners rounded
  • Changed default show animation in notifications
  • Align icon/image always vertically center
  • New (messageHeight) property to restrict notification message not to increase too much in height
  • Option notification to be closable but hide close button. Thus notification will be closed by clicking on it
  • Method Lobibox.notify.closeAll() to close all notifications
  • Option to show notification in top center and bottom center
  • Option to position notification at any place by left and top coordinates
  • New (delay) option to close messagebox automatically
  • Fixed shown event bug. Now it is triggered at correct time
  • Validate prompt and show error message if it is empty
  • Non draggable messageboxes are always in center of window and their size (width, height) is always <= to window size (width, height)

VPS servers from 5$.

Easily deploy an SSD cloud server on @DigitalOcean in 55 seconds. Sign up using the following link and receive $10 in credit