You can add Stickeroid AI as a Smart Plug in your Freshchat account and start interacting with your customers using Stickers.



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


Sample Code Snippet:


<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}.grid{width:96px;height:126px;position:relative;display:inline-block;box-sizing:border-box;}.grid:hover{background-color:#f6f8fa;border-radius:3px}.grid img{cursor:pointer;max-width:96px;position:absolute;top:0;margin:auto;border:0;padding:5px;right:0;left:0;bottom:0;max-height:110px}.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}</style>
<div class="searchblock">
    <input placeholder="Search Sticker" id="stkr_search" type="text" onkeypress="fsearch(event)"/>
  <button value="Search" class="searchbutton icon-ic_search" type="submit" onclick="fgo()"/>
</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>
<script>
let vstkrCnt=-1;
let vstkrPage=0;
let vUseThumbs=false;
function fsend(img, wdth, hght){
    if (vUseThumbs && hght>120) {
    lhght = 120;
    lwdth = wdth/(hght/120);
    } else {
        lhght = hght;
        lwdth = wdth;
    }   
    window.fcAgent.events.publish('send_message',
    {images:[{url: "https://stickeroid.com" + img, width: lwdth, height: lhght }]});
}
function showblock(bi){
    for (i = 0; i <= vstkrCnt; i++) {
        document.getElementById("stkr_block"+i).style.display = ((i==bi) ? 'block' : 'none');
    }
    document.getElementById("stkr_iprev").style.display = ((bi > 0) ? 'inline' : 'none');
    document.getElementById("stkr_inext").style.display = ((bi < vstkrCnt) ? 'inline' : 'none');
}
function fprev(){
    if (vstkrPage>0) {
        vstkrPage -= 1;
        showblock(vstkrPage);
    }
}   
function fnext(){
    if (vstkrPage < vstkrCnt) {
        vstkrPage += 1;
        showblock(vstkrPage);
    }
}
function outres(data){
  let div = document.getElementById("stkr_sticker");
  let txt = document.getElementById("stkr_search").value;
  let html = '';
  div.innerHTML = html;
  vstkrCnt = -1;
  vstkrPage = 0;
  for (var i in data) {
    if (data[i].thumb){
        qt = "'"+data[i].img+"'";
        if (i % 24 == 0) {
            vstkrCnt += 1;
            if (vstkrCnt > 0) {
                html += '</ul>';
            }
            html += '<ul style="display:none" id="stkr_block' + vstkrCnt + '">';
        }
        html += '<li class="grid" id="stkr_li'+i+'"><img style="cursor: pointer" src="https://stickeroid.com';
        html += data[i].thumb +'" onclick="fsend(' + qt + ',' ;
        html += data[i].width + ',' + data[i].height + ');"></li>';
    } 
  };
  if (vstkrCnt > -1) html += '</ul>';
  div.innerHTML = html;
  showblock(vstkrPage);
}
function fgo(){
    let txt = document.getElementById("stkr_search").value;
    let key = "d147203e";
    fetch('https://stickeroid.com/bot?c=72&k='+key+'&s='+txt).then(function(response){return response.json();}).then(function(json) {outres(json);})
}
function fsearch(e) {
    if (e.keyCode == 13) {
        fgo();
    }
}   
</script>