callpage-call-countdown

CallPage

by Andrew Tkachiv

HTML

<form id="form">
    <h4>Order a callback</h4>
    <div>
      <input id="myInput" placeholder="+48570888888" required>
    </div>
    <div id="countdown" style="display:none;">
        You will receive call in:
        <span class="cp-countdown__seconds">29</span>,
        <span class="cp-countdown__miliseconds">99</span>
    </div>
    <div id="result" style="display:none;">
         Hope, you received a call!
    </div>
    <div>
      <input type="submit" value="Submit form">
    </div>
</form>

<!-- BEGIN callpage.io widget -->
<script type="text/javascript">// <![CDATA[
var __cp={"id":"khV8aiHQFP__VLT9nRar-6Pvf3fqS8mQJ5xE9Smcygw","version":"1.1"};(function(window,document){var loader=function(){var cp=document.createElement('script');cp.type='text/javascript';cp.async=true;cp.src="https:++cdn-widget.callpage.io+build+js+callpage.js".replace(/[+]/g,'/').replace(/[=]/g,'.');var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(cp,s);};window.addEventListener?window.addEventListener("load",loader,false):window.attachEvent("onload",loader);if(window.callpage){alert('You could have only 1 CallPage code on your website!');}else{window.callpage=function(method){if(method=='__getQueue'){return this.methods;}
else if(method){if(typeof window.callpage.execute==='function'){return window.callpage.execute.apply(this,arguments);}
else{(this.methods=this.methods||[]).push({arguments:arguments});}}};}})(window,document);//]]></script>
<!-- END callpage.io widget -->

CSS

h4, input {
  margin-bottom: 10px;
}

button {
  display:block;
}

JavaScript

// disable automatic opening of widget (scoring system)
callpage('api.scoring.toggle', false);
    
// this code should be placed into submit event handler of the form.
function submitHandler(e) {
  e.preventDefault();
  // get the input phone number from
  var telFromForm = document.getElementById('myInput').value;
  // event when the call is ordered. Use callback to get callRequestId
  callpage('api.widget.call', {
    tel: telFromForm
  }, function(response) {
    var callRequestId = response? response.id : null;
    
    // it means that we successfully ordered a call
    if (callRequestId) {
      console.log("Unique call ID: " + callRequestId);
      // start count down on HTML element #countdown, element should have 2 childs with selectors .cp-countdown__seconds and .cp-countdown__miliseconds
      callpage(
        // name of function
        'api.countdown.start',
        // element selector
        '#countdown',
        // on start callback
        function() {
          callpage.jQuery('#countdown')[0].style.display = "block";
        },
        // on end callback
        function() {
          callpage.jQuery('#countdown')[0].style.display = "none";
          callpage.jQuery('#result')[0].style.display = "block";
        }
      );
    }
    else {
      // put here any logic if call was unsuccessful (e.g. no managers available, or after hours)
    }
  });
}

document.getElementById('form').addEventListener("submit", submitHandler);