Editor de código
Aprenda como direcionar a conversa escrevendo código JavaScript com a Ação de Código.
A ação de código permite que desenvolvedores criem rapidamente lógica personalizada sobre seu bot escrevendo seus próprios blocos de código Javascript. Normalmente, o editor de código é usado para realizar requisições a sistemas externos ou para fazer operações com variáveis.
Primeiros passos
Para começar com a Ação de Código, crie um novo 'Action Dialogstate' e selecione o Código plugin como uma ação.
Argumentos no Editor de Código
Você pode passar argumentos para suas Ações de Código atribuindo-lhes chaves. Suas chaves estarão disponíveis para a args variável dentro do Editor de Código.
Função ChatlayerResponseBuilder
O ChatlayerResponseBuilder função retorna uma instância auxiliar que permite direcionar sua conversa enviando mensagens como bot, navegando para blocos ou até criando dados de sessão.
Para começar a manipular dados da conversa em sua ação de código, simplesmente chame a função ChatlayerResponseBuilder() que retornará uma ChatlayerResponseBuilder instância.
O ChatlayerResponseBuilder possui uma interface fluente, isso significa que toda função que você chamar retornará a mesma instância. Isso facilita encadear múltiplas chamadas de função quando, por exemplo, você deseja mostrar uma mensagem e manipular dados de sessão ao mesmo tempo.
Sempre que quiser publicar suas alterações na conversa, você deve chamar a send() função.
Se você não chamar a send() função em nenhum lugar na sua Ação de Código, os usuários não verão nenhum dos seus resultados após a execução do código.
ChatlayerResponseBuilder()
.addSessionVariable("user", { address: { ... } })
.addMessage("Obrigado por compartilhar seu endereço!")
.send();Outra forma de alcançar o mesmo resultado:
const builder = ChatlayerResponseBuilder();
builder.addSessionVariable("user", { address: { ... } });
builder.addMessage("Obrigado por compartilhar seu endereço!");
builder.send();Definir variáveis ou enviar mensagens
O ChatlayerResponseBuilder possui a capacidade de definir variáveis ou adicionar mensagens ao chatbot. Ambos são mostrados no exemplo abaixo:
addSessionVariable(namespace: string, data: any): Insere uma variável em um determinado namespace dentro da sessão.
addMessage(message: string): Adiciona uma mensagem de texto a ser enviada pelo bot.
ChatlayerResponseBuilder()
.addSessionVariable("user", 'Joachim')
.addMessage("addSessionVariable concluído.")
.send();Para aprimorar ainda mais suas variáveis, você pode armazenar múltiplas variáveis sobre o usuário em um objeto.
ChatlayerResponseBuilder()
.addSessionVariable("user", { firstName: "Joachim", lastName: "Chatbot" })
.send();Se você quiser usar essa informação em uma mensagem do bot, simplesmente digite {user.lastName} e a informação ficará visível no chatbot!
Próximos ou blocos anteriores
Com base em código, variáveis ou outra entrada, você pode direcionar a conversa para outros dialogstates. Com o código abaixo você pode ir para um próximo dialogstate.
setNextDialogState(dialogstateId: string)
Encaminha a conversa para o ID do dialogstate fornecido.
const { introductionDialogstate } = args;
const chatlayer = ChatlayerResponseBuilder();
chatlayer.setNextDialogState(introductionDialogstate);
chatlayer.send();Funcionalidades de Mensagem do Bot
No editor de código, algumas funcionalidades de 'mensagem do bot' também estão disponíveis, como respostas rápidas ou botões. Para funcionalidades mais aprofundadas, essas mesmas opções podem ser criadas usando código.
addCarousel
No Editor de Código também é possível adicionar um carrossel, assim como em Mensagens. Isso pode agregar valor quando conteúdo dinâmico precisa ser exibido ou para combinar um bloco de Mensagem e Ação em um só.
ChatlayerResponseBuilder().addCarousel([
{
title: 'Item 1',
imageUrl: 'https://st.depositphotos.com/1708346/1858/i/600/depositphotos_18582903-stock-photo-carousel-at-night.jpg',
buttons: [
{ type: 'web_url', url: 'https://docs.chatlayer.ai', title: 'Docs' }
]
},
{
title: 'Item 2',
// Isto é opcional
subTitle: 'Legenda do Item 2',
// Isto também é opcional, redirecionará o usuário para um certo site quando clicarem na imagem do carrossel
webUrl: 'https://docs.chatlayer.ai',
imageUrl: 'https://st.depositphotos.com/1708346/1858/i/600/depositphotos_18582903-stock-photo-carousel-at-night.jpg',
buttons: [
{ type: 'web_url', url: 'https://docs.chatlayer.ai', title: 'Docs' }
]
}
]).send();addQuickReplies
Assim como o exemplo acima, Respostas Rápidas também podem ser criadas no editor de código. Ao copiar o código abaixo você pode adicionar quantos botões de Resposta Rápida forem necessários.
const quickReplies = [
[
{
title: "Opção 1",
payload: {
nextDialogstateId: args.setNextDialogstateDs,
params: [
// Isto será definido na sessão.0
{ key: "choice", value: "option1" },
],
},
},
{
title: "Opção 2",
payload: {
nextDialogstateId: args.addHtmlDs,
params: [
// Isto será definido na sessão.
{ key: "choice", value: "option1" },
],
},
},
];
ChatlayerResponseBuilder()
.addQuickReplies({
title: 'Como podemos ajudá-lo?', // este é o título das Respostas Rápidas
quickReplies,
})
.send();addButtonGroup
Com mensagens do bot também podemos adicionar botões, mas com código há mais variedade do que na mensagem do bot.
const invoices = [
"123",
"456",
"789"
]
const buttons = invoices.map((invoiceNumber, index) => ({
type: 'postback',
title: 'Escolher ' + invoiceNumber,
payload: {
nextDialogstateId: args.nextDialogstate,
params: [
{ key: 'chosenNumber', value: invoiceNumber },
],
},
}));
ChatlayerResponseBuilder()
.addButtonGroup({
title: "Estes botões 'postback' podem ser usados para navegar para um determinado diálogo do bot e definir uma variável quando um usuário clicar neles.",
buttons,
})
.addButtonGroup({
title: 'Você também pode adicionar botões de URL.',
buttons: [
{ type: 'web_url', title: 'docs', url: 'https://docs.chatlayer.ai' },
{ type: 'phone_number', title: 'Ligar 1207', payload: '1207'}
]
})
.send();Aqui, os 'invoices' são as diferentes opções de botão exibidas. Com o .addButtonGroup você pode adicionar esses botões ou criar botões de URL.
Adicionar HTML ou Iframe
HTML pode ser adicionado no chatbot para mostrar uma saída mais diversa ao usuário.
ChatlayerResponseBuilder()
.addHtml(`
<h1>Este é um cabeçalho</h1>
<p>Infelizmente, mensagens em html só funcionarão no widget web.</p>
`, { withBalloon: true })
.send();Iframes podem ser usados para incorporar outras páginas no chatbot. Um exemplo perfeito de por que você precisaria de um iframe é incorporar vídeos do Youtube.
ChatlayerResponseBuilder()
.addIframe("https://www.youtube.com/watch?v=yaYzSQn9rL4", {
withBalloon: false,
height: "200px"
})
.send();Adicionar mídia
O addMediaMessage o método suporta o envio de imagens, arquivos de áudio e vídeo através de ações de código.
// Enviar uma imagem
ChatlayerResponseBuilder()
.addMediaMessage({
type: "image",
url: "<IMAGE_URL>"
})
.send();
// Enviar um arquivo de áudio
ChatlayerResponseBuilder()
.addMediaMessage({
type: "audio",
url: "<AUDIO_URL>"
})
.send();
// Enviar um vídeo
ChatlayerResponseBuilder()
.addMediaMessage({
type: "video",
url: "<VIDEO_URL>"
})
.send();Biblioteca utilitária e chamadas de API
A funcionalidade a seguir existe dentro do escopo da Ação de Código:
lodash (_)
Lodash é uma biblioteca utilitária JavaScript. Você pode encontrar mais informações aqui.
const introductionDialogstate = _.get(args, 'introductionDialogstate');
const chatlayer = ChatlayerResponseBuilder();
chatlayer.setNextDialogState(introductionDialogstate);
chatlayer.send();fetch
Fetch permite que você realize chamadas de API. Por favor, consulte sua documentação para saber mais.
const url = 'https://gorest.co.in/public/v1/users';
const response = await fetch(url).then((res) => {
// res.status >= 200 && res.status < 300
if (res.ok) {
return res;
} else {
throw new Error(res.statusText);
}
});
const json = await response.json();
const person = _.get(json, 'results[0]');
const chatlayer = ChatlayerResponseBuilder();
chatlayer.addSessionVariable('profile', userProfile);
chatlayer.send();CryptoJS
CryptoJS é uma coleção de algoritmos criptográficos padrão e seguros implementados em JavaScript. Por favor, acesse seu documentação para saber mais.
Criando um pequeno atraso entre diálogos do bot
Recomendamos usar o bloco de delay para criar um atraso entre diálogos do bot. Você pode aprender mais sobre como isso funciona aqui: Ação
Para criar um atraso entre os segundos inteiros, como 1500 milissegundos ou 1,5 segundos, adicione um widget de Código à sua ação em vez do Delay mostrado acima e cole o código a seguir:
const builder = ChatlayerResponseBuilder();
await new Promise((resolve)=>{_.delay(resolve,1500)});
builder.send();
Você pode ajustar a duração do atraso substituindo 1500 por 2500 (2,5 segundos) etc.
Last updated
Was this helpful?