---
title: Conteúdo - Carrossel
slug: helper-new/conteudo-carrossel
description: Learn how to use carousels in Botpress to display cards horizontally or vertically. Utilize the Postback feature to send custom data to the server and enable the Botpress server to act on the received data. See an example of sending a payload with a city 
createdAt: 2022-08-29T20:34:33.000Z
---

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.

:::BlockQuote
<u>**Exemplo**</u>**:**
&#x20;Quando nosso usuário de bate-papo clica em um botão no carrossel, enviamos uma carga útil com um código de cidade ( `mtl`\[Montréal] ou `nyc`\[New York City] ).
:::

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

1. Acesse o Conversation Studio do bot selecionado;
2. Clique na guia **Editor de código**;
3. Ao lado da guia **Ganchos**, clique no botão "**+**";
4. No menu **Suspenso**, passe o mouse sobre **Event Hooks** e clique em **After Incoming Middleware**.
5. Digite o nome do seu gancho.

:::hint{type="info"}
🖊️ <u>**Nota**</u>**:&#x20;**&#x4E;ão se esqueça de adicionar `.jsapós` o nome que você digitou.
:::



6\. Cole o seguinte trecho dentro do seu arquivo de gancho:

```javascript
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.