You can add GIPHY Smart Plug to your Freshchat account and start using GIFs in customers conversations to make it interactive and fun, or convey the right emotion.


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


Sample Code Snippet:


<script>
var giphyDetails = {
  "GIPHY_KEY" : "hbnJYP2wQyyMpS7sXMpBh97Hy6WCDx2L"
};
</script>
<style>
  .searchblock {
    position:relative;
    height:37px;
    margin-top:15px;
    margin-bottom:15px;
  }
  #stkr_search {
    background-color:#f6f8fa;
    border:0;
    border-radius:37px;
    height:100%;
    text-indent:15px;
    color:#5D657A;
    width:100%;
    border:1px solid #f6f8fa;
  }
  #stkr_search:hover {
    background-color:#FFF;
    border:1px solid #EBEDEF
  }
  #stkr_sticker ul{
    padding:0
  }
  .searchbutton {
    position:absolute;
    width:37px;
    height:37px;
    right:2px;
    font-size:18px;
    border-radius:50%;
    top:0;
    background-color:transparent;
  }
  .pagination {
    position:relative;
    width:80px;
    height:37px;
    left:0;
    right:0;
    margin:auto;
    display:block;
    margin-top:15px;
  }
  .pagi {
    position:absolute;
    width:37px;
    height:37px;
    background-color:#f6f8fa;
    font-size:16px;
    border-radius:50%;
    border:1px solid #f6f8fa;
  }
  .pagi:hover {
    border:1px solid rgba(255,255,255,0.51);
    background-color:#fff;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.035);
  }
  .rightpos {
    right:0;
  }
  .leftpos {
    left:0;
  }
  .gifPreviews {
    height: 125px;
    width: 275px;
    border: 1px solid brown;
  }
  .grid {
    padding: 5px;
  }
</style>
<div class="giphyPlug">
  <div class="searchblock">
    <input placeholder="Search GIFs" id="stkr_search" type="text" onkeypress="giphy.lookforKeyPress(event);"/>
    <button value="Search" id="lookUpGifs" class="searchbutton icon-ic_search" type="submit"/>
  </div>
  <div id="stkr_sticker">
  </div>
  <div class="pagination">
    <button style="display: none" id="stkr_iprev" class="pagi icon-ic_arrow_left leftpos" type="submit" onclick="fprev()"/>
    <button style="display: none" id="stkr_inext" class="pagi icon-ic_arrow_right rightpos" type="submit" onclick="fnext()"/>
  </div>
</div>
<script>
var giphy = (function($, window) {
  if (window.GIPHY_SHORTCUT) {
    window.GIPHY_SHORTCUT.setItUp(); // pass conversation / user info here
    return window.GIPHY_SHORTCUT;
  }
  var insertgifs = window.GIPHY_SHORTCUT = {
    initialize: function() {
      console.log('Init');
    },
    setItUp: function() {
      console.log('setItUp');
      $('.giphyPlug #stkr_search').on('keyup',function() {
         if ($(this).val().length === 0) {
           $('#stkr_sticker').html('');
         }
       });
    },
    lookforKeyPress: function(event) {
      if (event.keyCode == 13) {
        this.getGIFlink();
      }
    },
    bindFunction: function(scope, fn) {
      return function () {
        fn.apply(scope, arguments);
      };
    },
    getGIFlink: function() {
      var _self = this,
          query = $('#stkr_search').val(),
          page = 0;
      $.ajax({
        method: "POST",
        url: "/app/extension_proxy",
        processData: false,
        data: JSON.stringify({
          url: 'http://api.giphy.com/v1/gifs/search?q='+encodeURIComponent(query)+'&api_key='+giphyDetails.GIPHY_KEY+'&limit=5&offset='+page,
          method : "GET",
        }),
        success:function(data,response, header,xhr, headers) {
          s = data;
          console.log(data);
          _self.renderGIFdata(data,page);
        },
        failure:function(data) {
          f = data;
        }
      });
    },
    renderGIFdata: function(giphy,page) {
      console.log(giphy.pagination.count);
      console.log(giphy.meta);
      console.log(page);
      var start = '<ul id="giphy_links">'
      var tmp = '';
      var end = '</ul>'
      $.each(giphy.data, function(i,ele) {
        tmp += '<li class="grid" id="gif-'+ele.id+'">'
                  +'<img class="gifPreviews" id="gifPreviews'+ele.id+'" src="'+ele.images.fixed_height.url+'" height="'+ele.images.fixed_height.height+'" width="'+ele.images.fixed_height.width+'"></img>'
               +'</li>';
      });

      gifTemplate = start+tmp+end;
      console.log(gifTemplate);
      $('.giphyPlug #stkr_sticker').html(gifTemplate);
    },
    getGifToInsert: function(event) {
      console.log('getting link and size');
      console.log(event);
      var gifId = event.target.id;
      var gifURL = event.target.src;
      var gifHeight = event.target.height;
      var gifWidth = event.target.width;
      window.fcAgent.events.publish('send_message', {images:[{url: gifURL, width: gifWidth, height: gifHeight }]});
    }
  };
  insertgifs.initialize();
  setTimeout(function() {
    insertgifs.setItUp();
  }, 100);
  return insertgifs;
})(jQuery, window);

window.fcAgent.events.addEventListeners({
  "events": [
    { "event":"click", selector:"#lookUpGifs", callback: giphy.bindFunction(giphy,giphy.getGIFlink) },
    // { "event":"keyup", selector:"#lookUpGifs", callback: giphy.bindFunction(giphy,giphy.getGIFlink) },
    { "event":"click", selector:"#stkr_sticker", callback: giphy.getGifToInsert }
  ]
});
</script>


Note:

In the above code snippet, replace the GIPHY_KEY value with your GIPHY API Key. You can get this from your GIPHY developer portal. You need to have a GIPHY developer account for this.