GIPHY Smart Plug

Recentemente, atualizamos nossa marca em nossas ofertas e mudamos os nomes de nossos planos de preços. Se você se inscreveu antes de 9 de agosto de 2021, clique em Planos anteriores para ver os planos aplicáveis.
 Garantimos que essa alteração não afetará sua experiência com o produto e nenhuma ação é necessária de sua parte.

Você pode adicionar GIPHY Smart Plug à sua conta do Freshdesk Messaging e começar a usar GIFs nas conversas dos clientes para torná-las interativas e divertidas ou transmitir a emoção certa.

Para obter instruções sobre como adicionar um plugue inteligente, consulte Trabalho com plugues inteligentes .

 Observação: no snippet de código acima, substitua o valor GIPHY_KEY por sua chave de API GIPHY. Você pode obter isso no portal do desenvolvedor GIPHY. Você precisa ter uma conta de desenvolvedor GIPHY para isso.

Snippet de código de amostra:

 <script>
var giphyDetails = {
"GIPHY_KEY": "hbnJYP2wQyyMpS7sXMpBh97Hy6WCDx2L"
};
</script>
<style>
.searchblock {
posição: relativa;
altura: 37px;
margem superior: 15px;
margin-bottom: 15px;
}
#stkr_search {
cor de fundo: # f6f8fa;
fronteira: 0;
raio da borda: 37px;
altura: 100%;
recuo do texto: 15px;
cor: # 5D657A;
largura: 100%;
borda: 1px sólido # f6f8fa;
}
#stkr_search: hover {
cor de fundo: #FFF;
borda: 1px sólido #EBEDEF
}
#stkr_sticker ul {
preenchimento: 0
}
.searchbutton {
posição: absoluta;
largura: 37px;
altura: 37px;
direita: 2px;
tamanho da fonte: 18px;
raio da borda: 50%;
topo: 0;
cor de fundo: transparente;
}
.pagination {
posição: relativa;
largura: 80px;
altura: 37px;
esquerda: 0;
direita: 0;
margem: automático;
display: bloco;
margem superior: 15px;
}
.pagi {
posição: absoluta;
largura: 37px;
altura: 37px;
cor de fundo: # f6f8fa;
tamanho da fonte: 16px;
raio da borda: 50%;
borda: 1px sólido # f6f8fa;
}
.pagi: hover {
borda: 1px solid rgba (255,255,255,0,51);
cor de fundo: #fff;
sombra da caixa: 0 0 8px 0 rgba (0,0,0,0.035);
}
.rightpos {
direita: 0;
}
.leftpos {
esquerda: 0;
}
.gifPreviews {
altura: 125px;
largura: 275px;
borda: 1px marrom sólido;
}
.rede {
preenchimento: 5px;
}
</style>
<div class = "giphyPlug">
<div class = "searchblock">
<input placeholder = "Pesquisar GIFs" id = "stkr_search" type = "text" onkeypress = "giphy.lookforKeyPress (event);" />
<button value = "Pesquisar" id = "lookUpGifs" class = "searchbutton icon-ic_search" type = "enviar" />
</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 = (função ($, janela) {
if (window.GIPHY_SHORTCUT) {
window.GIPHY_SHORTCUT.setItUp (); // passe a conversa / informações do usuário aqui
janela de retorno.GIPHY_SHORTCUT;
}
var insertgifs = window.GIPHY_SHORTCUT = {
inicializar: função () {
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 (escopo, argumentos);
};
},
getGIFlink: function () {
var _self = this,
query = $ ('# stkr_search'). val (),
page = 0;
$ .ajax ({
método: "POST",
url: "/ app / extension_proxy",
processData: false,
dados: JSON.stringify ({
url: 'http://api.giphy.com/v1/gifs/search?q='+encodeURIComponent(query)+'&api_key='+giphyDetails.GIPHY_KEY+'&limit=5&offset='+page,
método: "GET",
}),
sucesso: função (dados, resposta, cabeçalho, xhr, cabeçalhos) {
s = dados;
console.log (dados);
_self.renderGIFdata (dados, página);
},
falha: função (dados) {
f = dados;
}
});
},
renderGIFdata: function (giphy, page) {
console.log (giphy.pagination.count);
console.log (giphy.meta);
console.log (página);
var start = '<ul id = "giphy_links">'
var tmp = '';
var end = '</ul>'
$ .each (giphy.data, function (i, ele) {
tmp + = '<li class = "grade" 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 = início + tmp + fim;
console.log (gifTemplate);
$ ('. giphyPlug #stkr_sticker'). html (gifTemplate);
},
getGifToInsert: function (event) {
console.log ('obtendo link e tamanho');
console.log (evento);
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, janela);

window.fcAgent.events.addEventListeners ({
"eventos": [
{"event": "click", seletor: "# lookUpGifs", callback: giphy.bindFunction (giphy, giphy.getGIFlink)},
// {"evento": "keyup", seletor: "# lookUpGifs", retorno de chamada: giphy.bindFunction (giphy, giphy.getGIFlink)},
{"evento": "clique", seletor: "# stkr_sticker", retorno de chamada: giphy.getGifToInsert}
]
});
</script>