Toky Click to call sample

Use Toky call link to add click to call to any button in your website.

by tokydev

HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-3.4.0.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <h4 class="text-center"><span class="label label-info">Samsung</span></h4>
          <img src="http://placehold.it/650x450&text=Galaxy S5" class="img-responsive">
          <div class="caption">
            <div class="row">
              <div class="col-md-6 col-xs-6">
                <h3>Galaxy S5</h3>
              </div>
              <div class="col-md-6 col-xs-6 price">
                <h3>
                  <label>$649.99</label></h3>
              </div>
            </div>
            <p>32GB, 2GB Ram, 1080HD, 5.1 inches, Android</p>
            <div class="row">
              <div class="col-md-6">
                <a class="btn btn-primary btn-product callbutton"><span class="glyphicon glyphicon-earphone"></span> Call for details</a>
              </div>
              <div class="col-md-6">
                <a href="#" class="btn btn-success btn-product"><span class="glyphicon glyphicon-shopping-cart"></span> Buy</a></div>
            </div>

            <p> </p>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <h4 class="text-center"><span class="label label-info">Apple</span></h4>
          <img src="http://placehold.it/650x450&text=iPhone 6" class="img-responsive">
          <div class="caption">
            <div class="row">
              <div class="col-md-6 col-xs-6">
                <h3>iPhone 6</h3>
              </div>
              <div class="col-md-6 col-xs-6 price">
                <h3>
                 ...

CSS

.btn-product {
  width: 100%;
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

//Adds a lightbox with an IFrame to every element with the CSS class .callbutton
$(".callbutton").featherlight({
  iframe: 'https://app.toky.co/tokydev?callnow',
  iframeWidth: 300,
  scrolling: 'no',
  allow: 'microphone',
  iframeHeight: 550,
  frameborder: 'no'
});

//IMPORTANT: Enable the michrophone access for the generated IFrame
$(".callbutton").attr('data-featherlight-iframe-allow', 'microphone');
//Removes scrollbars
$(".callbutton").attr('data-featherlight-iframe-scrolling', 'no');