GIPHY Smart Plug

We have recently refreshed our branding across our offerings and changed the names of our pricing plans. If you have signed up before Aug 9, 2021, please click Previous plans to view your applicable plans.
We assure you that this change will not impact your product experience, and no action is required on your part.

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.

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.

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>