Toky Click to call custom CRM sample

Enable Toky click to call on your custom CRM or app.

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>
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.3.1/lux/bootstrap.min.css" rel="stylesheet" integrity="sha384-hVpXlpdRmJ+uXGwD5W6HZMnR9ENcKVRn855pPbuI/mwPIEKAuKgTKgGksVGmlAvt" crossorigin="anonymous">
<script src="//code.jquery.com/jquery-3.4.0.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>


<!------ Include the above in your HEAD tag ---------->
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
  <a class="navbar-brand" href="#">Custom CRM</a>
  </nav>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-sm-3 col-md-3 well">
        <ul class="nav flex-column mr-auto">
          <li class="nav-item">
            <a class="nav-link active " href="#">Customers</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Leads</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Companies</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Settings</a>
          </li>
        </ul>
      </div>
      <div class="col-sm-9 col-md-9">
        <div class="row">
          <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-primary">Add</button>
            <button type="button" class="btn btn-secondary">Edit</button>
            <button type="button" class="btn btn-danger">Delete</button>
          </div>
        </div>
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th...

CSS

.btn,
.navbar-brand,
th,
body {
font-size: 1.5rem!important;
}

.fancybox-content {
  width: 300px;
  height: 540px;
  margin: 0;
  padding: 10px !important;
  overflow: hidden !important;
}

JavaScript

$(document).ready(function() {
 //Adds a lightbox to every phone number link with the CSS class callbutton
  $(".callbutton").click(function() {
  //We change the hidden Iframe withe the new URL with link's phone number
    document.getElementById("ifrm").src = 'https://app.toky.co/business/dialer#?call=' + this.text;
    //Display the fancybox with the dialer displaying the clicked phone number
    $.fancybox.open({
      src: '#ifrm',
      type: 'inline',
      opts: {
        afterShow: function(instance, current) {
          console.info('done!');
        },
        hideScrollbar: true
      }
    });


  });


});