Conteúdo - Carrossel
Um carrossel é um conjunto de cartões, que podem ser apresentados horizontalmente ou verticalmente.
O carrossel possui o recurso Postback, que permite enviar dados personalizados para o servidor Botpress quando o usuário clica em um botão no carrossel. Usando um gancho, você pode fazer seu servidor Botpress agir sobre os dados recebidos.
Em seguida, criamos um gancho que salva esse código de cidade na memória. O bot então flui para um nó específico, dependendo do valor na memória.
Como você pode ver, o bot exibe primeiro um carrossel e, em seguida, um nó diferente com base no valor de temp.cityClicked. As transições atuais ainda não funcionam, vamos ver o gancho.
Implementando o Gancho
- Acesse o Conversation Studio do bot selecionado;
- Clique na guia Editor de código;
- Ao lado da guia Ganchos, clique no botão "+";
- No menu Suspenso, passe o mouse sobre Event Hooks e clique em After Incoming Middleware.
- Digite o nome do seu gancho.
🖊️ Nota: Não se esqueça de adicionar .jsapós o nome que você digitou.
6. Cole o seguinte trecho dentro do seu arquivo de gancho:
function hook(bp: typeof sdk, event: sdk.IO.IncomingEvent) {
/** Your code starts below */
async function hook() {
const backs = ['callback', 'postback']
if (backs.includes(event.type)) {
let payload = ''
switch (event.type) {
case 'callback': // For Facebook Messenger
payload = event.payload.text
break
case 'postback': // For Web
payload = event.payload.payload
}
switch (payload) {
case 'mtl':
event.state.temp.cityClicked = 'mtl'
break
case 'nyc':
event.state.temp.cityClicked = 'nyc'
break
default:
console.log('Unexpected payload')
}
}
}
return hook()
/** Your code ends here */
}7. Salve clicando no pequeno disco no canto inferior esquerdo.