# Keyboard types, building keyboard

## underTheChat keyboard (or keyboard)

![underTheChat keyboard](https://3560755491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHts9egaBIQFAK8US18Eu%2Fuploads%2FlPLigetPTJti319RCiED%2FIMAGE%202022-05-31%2017%3A32%3A24.jpg?alt=media\&token=794bfd4c-bfe2-40e1-a7e6-d1679f0d9079)

The **keyboard underTheChat** is the keyboard you can always see. You can scroll up, but this keyboard won't be removed. The user can only hide it with the button next to the input, or you can remove it in code using the removeUnderTheChat keyboard type. This type of keyboards, when pressed, simply sends a message from the user

## underTheMessage keyboard (or inline\_keyboard)

![underTheMessage keyboard example](https://3560755491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHts9egaBIQFAK8US18Eu%2Fuploads%2FQhWq7UZruanb1PHP46bM%2F%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202022-05-31%20%D0%B2%2017.32.52.png?alt=media\&token=4b3e37d0-b963-4c07-8534-dd6a2a4f2353)

The **keyboard underTheMessage** is a keyboard under the message, with some buttons that you can click to perform some actions in the code.

## Building keyboard

### Create keyboard and add it to the message

You can create a keyboard using Keyboard class and pass keyboard type as constructor argument using KeyboardTypes enum. Then you can add buttons to the keyboard using button type as method name (e.g. text, btn, url. You can see list of supported button types below). Then, if you want to add a new row, call .row method and continue creating new buttons. In some buttons you can pass "hidden" argument as the last, and if it will be true, button will be hide. You can do this in .row method too.

{% code title="app.controller.ts" %}

```typescript
import { Controller, Keyboard, KeyboardTypes, MessageSend, OnCommand } from 'nestgram';
import { AppService } from './app.service';

@Controller()
export class AppController {
  constructor(private readonly appService?: AppService) {}

  @OnCommand('start')
  async start(): Promise<MessageSend> {
    return new MessageSend(
      'underTheMessage (or inline_keyboard) keyboard example',
      new Keyboard(KeyboardTypes.underTheMessage) // keyboard type
        .btn('First button', 'first') // creates a button. 1st argument is text, 2nd argument is button id
        .btn('Second button', 'second')
        .row() // creates a row with newly added buttons
        .btn('Third button', 'third') // for the last buttons row is created automatically
    );
  }
}
```

{% endcode %}

### underTheChat keyboard params

You can set the placeholder for the underTheChat keyboard using the **.setPlaceholder** method

You can add keyboard once (one time keyboard) using **.oneTime** method

## Supported button types

| Supported button type | Supports keyboard types       | Arguments                                             |
| --------------------- | ----------------------------- | ----------------------------------------------------- |
| text                  | underTheChat                  | text: string, hidden?: boolean                        |
| btn                   | underTheMessage               | text: string, buttonId: string, hidden?: boolean      |
| url                   | underTheMessage               | text: string, url: string, hidden?: boolean           |
| contact               | underTheChat                  | text: string, hidden?: boolean                        |
| location              | underTheChat                  | text: string, hidden?: boolean                        |
| switch                | underTheMessage               | text: string, switchQueryId: string, hidden?: boolean |
| pay                   | underTheMessage               | text: string                                          |
| webApp                | underTheMessage, underTheChat | text: string, url: string, hidden?: boolean           |

## Handling click on underTheMessage keyboard button

If you want to handle when user clicks on **underTheMessage keyboard button**, you can use `@OnClick` decorator for method and pass button id to it. More about this [here](https://degreetpro.gitbook.io/nestgram/keyboards/handle-underthemessage-keyboard-button-click-by-alert-or-toast)