With the Calendly Smart Plug you can schedule meetings from within your Freshchat app. You should have an account with Calendly.



For instructions on how to add a smart plug, refer Working with Smart Plugs.


Sample code snippet:


<style>
#calendlyMain h3 {
  margin-top: 10px;
}
.calendlyError {
  text-align: center;
  color: red;
  padding-top: 5px;
  font-weight: 700;
}
.calendly-inline-widget {
  border: 1px solid black;
}
</style>
<div id="calendlyMain">
  <h3>Calendly</h3>
  <div class="calendly-user">
    Calendly User : <input id="calendlyUserValue" type="text" name="LastName"> <button id="saveCalendlyId">Save</button>
    <div class="calendlyError hide">User Name is Required</div>
  </div>
  <hr/>
  <div class="contentDiv">
  </div>
</div>


<script>
  var calendlyWidget = (function($, window) {
    if (window.CALENDLY_WIDGET_BETA) {
      window.CALENDLY_WIDGET_BETA.setItUp(); // pass conversation / user info here
      return window.CALENDLY_WIDGET_BETA;
    }
    var calendly = window.CALENDLY_WIDGET_BETA = {
      setItUp: function() {
        console.log('Set it UP');
        $('#saveCalendlyId').click(function() {
          console.log('Clicked');
          var calendlyUser = $('#calendlyUserValue').val();
          if (calendlyUser.length != 0) {
            document.cookie = "calendlyUser="+calendlyUser;
            $('.calendlyError').addClass('hide');
            window.location.reload();
          }
          else {
            $('.calendlyError').removeClass('hide');
          }
        });
        var calendlyUser = this.getCookie('calendlyUser');
        if (calendlyUser.length != 0) {
          console.log('User Present');
          $('#calendlyMain .calendly-user').addClass('hide');
          $('#calendlyMain contentDiv').removeClass('hide');
          this.showCalendlyWidget();
        }
        else {
          console.log('User Not Preset');
          $('#calendlyMain .calendly-user').removeClass('hide');
          $('#calendlyMain contentDiv').addClass('hide');
        }
      },
      initialize: function() {
        console.log('Init');
        var _self = this;
        var URL = 'https://assets.calendly.com/assets/external/widget.js';
        $.getScript(URL, function(response) {
          console.log(response);
        });
      },
      getCookie: function(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == ' ') {
            c = c.substring(1);
          }
          if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
          }
        }
        return "";
      },
      showCalendlyWidget: function() {
        console.log('Showing Calendly');
        var userName = this.getCookie('calendlyUser');
        var URL = "https://calendly.com/"+userName;
        var html = '<div class="calendly-inline-widget" data-url="'+URL+'" style="min-width:290px;height:480px;"></div>';
        $('.contentDiv').html(html);
        Calendly.initInlineWidgets();
      }
    };
    calendly.initialize();
    setTimeout(function() {
      calendly.setItUp();
    }, 100);
    return calendly;
  })(jQuery, window);
</script>