Contact buttons for jQuery and responsive websites

Contact buttons for jQuery and responsive websites documentation

Simple push buttons for a responsive website to make a direct call, mail or sms. A great marketing tool if you want to get in direct contact with your mobile visitors. Works with jquery, a small css file and a simple tag in your webpage. The package contains 12 ready to use theme colors

jQuery will detect if a visitor uses a mobile phone so the sms and call buttons will work on those devises.

For a real demo visit this website and resize your browser smaller then 480px. You will see the buttons appear on the images.

Item Support

Thank you for purchasing the Contact push buttons. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

Markup Markup customization and highlights

General Markup

Here is the general structure. In this example I use html5 but it can also be used with any other DOCTYPE

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your site</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/call-us.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/call-us_min.js"></script>

<script>
    $(document).ready(function() {
        $('.link').call_us({
            theme: 'blue',
            type: 'tel',
            testing: true
            /* other options here */
        });
    });
</script>

Html tag

Just add one of these tag's anywhere on your page where you want the push button

tell: for phone , sms: for text messaging or email: for a email

?subject= for the email and ?body= for the SMS are optional

<span class="call_us_wrap"><a href="tel:+3112345678" class="link">Call Us</a></span>

<span class="call_us_wrap"><a href="mailto:test@test.com?subject=Just a mail" class="link2">Mail Us</a></span>

<span class="call_us_wrap"><a href="sms:+3112345678?body=Just a message" class="link3">SMS Us</a></span>

Use for responsive website

Normally the call-us.js will check if the device is an mobile.

But if you want to use it with an responsive website and or check on your desktop you will have to add some css

/* Use this only for a responsive website */
.call_us_wrap {
    display: none;
}
@media only screen and (max-width: 480px) {
.call_us_wrap{
    display: inline-block;
	}
}

And set the param in the js testing: true

Styles

Style sheet

Here the stylesheet file I'm using with the CALL US button

File Name Description
call-us.css The css file you need to include in your website
img/call_icon.png icons
img/close_icon.png icons
img/mail_icon.png icons

JavaScript

JavaScript Files

The js needed for the CALL US button

Tag Description
jquery.js jQuery is a Javascript library that greatly reduces the amount of code that you must write.
call-us.js The js code for the CALL US buttons

Customize the CALL US buttons

Here all all the options available for the CALL US button

/* --- @ CALL US options ---*/
$('.orange').call_us({
    theme: 'blue',
    type: 'tel',
    tel: false,
    sms: false,
    email: false,
    icon: true,
    closeable: true,
    remember: false,
    time: 1,
    testing: true
});

Options declared

Options declared

Here's a brief information about the js options for the CALL US buttons

  • theme string. The color scheme of the call buttons. Choose between red, orange, dark_green, blue, dark_blue, pink, fiord, hurricane, smoke_blue, coffee, black.
    Default: red
  • tel string. Optional telephone number. This will overwrite the HREF.
    Default: (null)
  • email string. Optional email address. This will overwrite the HREF. (TIP. add a subject to the message like this test@test.com?subject=Just a mail)
    Default: (null)
  • sms string. Optional sms. This will overwrite the HREF. (TIP. add some text to the message like this +31123456?body=Just a message)
    Default: (null)
  • type string. Choose between 'tel' for telephone and 'email' for email or 'sms' for text message.
    Default: tel
  • icon boolean. If enabled, a call icon will show next to the next.
    Default: true
  • closable boolean. If enabled, a close button will appear in the upper-right corner to close the tooltip.
    Default: true
  • remember boolean. If enabled, a cookie will remember if the user closed the button (default one day). If disabled it will be closed during the session time.
    Default: true
  • testing boolean. If set to true, the tooltip will always show, also in desktop browsers.
    Default: false
  • Responsive website . If you want to use the buttons for a responsive website you can set some css (look in the call-us.css for the settings).
    You also have to set then testing to true

Credits Files

I've used the following files as listed.

JavaScript

  1. jQuery
  1. jQuery Cookie plugin

Once again, thank you so much for purchasing this app. As I said at the beginning, I'd be glad to help you if you have any questions relating to this app. No guarantees, but I'll do my best to assist.

Ceasar