GIPHY 스마트 플러그

GIPHY Smart Plug를 Freshchat 계정에 추가하여 고객과의 대화에서 GIF를 사용하여 상호작용을 재미있게 하거나 적절한 감정을 전달할 수 있습니다.

스마트 플러그 추가 방법에 대한 지침은 스마트 플러그 작업하기를 참조하세요.

샘플 코드 스니펫:

<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>