Getting Started

Here's how to get started using Customer Connect without Wordpress

Decide which example suits your needs best: Bootstrap, jQuery UI or normal HTML / CSS. Our examples are below.
  • 1. Register with us, and purchase a plan
  • 2. Download Customer Connect's core files, and keep them on your server
  • 3. Add your public and private keys to customer_connect.php
  • 4. Include the snippet below to your <head> section of your page
  • 5. Add one of the examples to the <body> section of your page - the examples are below!

Bootstrap Form Modal

If bootstrap is in your arsenal, below is an example of the minimum requirements for a successful Customer Connect call

			
				
<div class="modal fade">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
     &times;
    </button>
    <h4 class="modal-title">We'll Call You</h4>
   </div>
   <form id="call_form" method="post">
	<div class="modal-body">
	 <div class="response"></div>
     <p>Fill out your information and we will call you instantly!</p>
	 <div class="row">
	  <div class="col-sm-6">
	   <label for="first_name">First Name</label>
	    <input id="first_name" name="first_name" class="form-control" />
	  </div>
	  <div class="col-sm-6">
	   <label for="last_name">Last Name</label>
	   <input id="last_name" name="last_name" class="form-control" />
	  </div>
	  <div class="col-sm-6">
	   <label for="email">Valid Email Address</label>
	   <input id="email" name="email" class="form-control" />
	  </div>
	  <div class="col-sm-6">
	   <label for="number">Your Phone Number</label>
	   <input class="form-control" type="text" name="number" id="number" />
	  </div>
	</div>
	</div>
	<div class="modal-footer">
	<button type="submit" class="btn btn-primary">Call Me!</button>
	</div>
	</form>
  </div>
 </div>
</div>			
		

jQuery UI Modal

jQuery UI Minimum Example

Fill out your information and we will call you instantly!


			
				
<div id="dialog" title="We'll Call You">
 <div class="response"></div>
 <p>Fill out your information and we will call you instantly!</p>
 <div class="row">
  <form id="call_form" method="post">
   <div class="col-sm-6">
    <label for="first_name">First Name</label>
    <input id="first_name" name="first_name" class="form-control" />
   </div>
   <div class="col-sm-6">
    <label for="last_name">Last Name</label>
    <input id="last_name" name="last_name" class="form-control" />
   </div>
   <div class="col-sm-6">
    <label for="email">Valid Email Address</label>
    <input id="email" name="email" class="form-control" />
   </div>
   <div class="col-sm-6">
    <label for="number">Your Phone Number</label>
    <input class="form-control" type="text" name="number" id="number" />
   </div>
  </div>
  <div class="row">
   <div class="col-sm-12 margin-top-15">
    <button type="submit" class="btn btn-primary pull-right">Call Me!</button>
   </div>
  </form>
 </div>
</div>
			
		

Default Form

Here is a static example of the minimum requirements of a default form

			
				
<div class="row">
 <div class="response"></div>
 <form id="call_form" method="post">
  <div class="col-sm-6">
   <label for="first_name">First Name</label>
   <input id="first_name" name="first_name" class="form-control" />
  </div>
  <div class="col-sm-6">
   <label for="last_name">Last Name</label>
    <input id="last_name" name="last_name" class="form-control" />
  </div>
  <div class="col-sm-6">
   <label for="email">Valid Email Address</label>
   <input id="email" name="email" class="form-control" />
 </div>
  <div class="col-sm-6">
   <label for="number">Your Phone Number</label>
   <input class="form-control" type="text" name="number" id="number" />
  </div>
  </div>
  <div class="row">
   <div class="col-sm-12 margin-top-15">
    <button type="submit" class="btn btn-primary pull-right">Call Me!</button>
  </div>
 </form>
</div>