# Write formats

A conversation is also accompanied by graphic components. We can create formats with the `format` property.

In `main.js`

```javascript
import code from './main.converse'

export default {
    code,
    formats: {
        smiley(text) {
            return text + ' :)'
        }
    }
}
```

In ConverseScript, let's use the `@Format()` decorator

```typescript
@Event('start')
start() {
    @Format('smiley')
    > Hello
}
```

The decorator applies to the message to be sent. The result will be `Hello :)`

### With parameters

Here is another example, more in depth:

```javascript
import code from './main.converse'

export default {
    code,
    formats: {
        buttons(text, params) {
            return {
                buttons: params[0],
                size: params[1],
                text
            }
        }
    }
}
```

Here is the format

```typescript
@Event('start')
start() {
    @Format('buttons', [
        {
            title: 'share',
            url: 'my.url.com'
        }
    ], 'medium')
    > Hello
}
```

At the exit, we will have:

```javascript
{
    buttons: {
        title: 'share',
        url: 'my.url.com'
    },
    size: 'medium'
    text: 'Hello'
}
```

> We can test it with `newbot emulator`

### Return a promise

A format can return a promise if asynchronous notions are executed

```javascript
import code from './main.converse'

export default {
    code,
    formats: {
        buttons(text, params) {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve({
                        buttons: params[0],
                        size: params[1],
                        text
                    })
                }, 2000)
            })
        }
    }
}
```

### API

```javascript
converse.format(nameFormat, (text, params, data, user) => {

})
```

| Parameter    |                          Type                          |                                       Description |
| ------------ | :----------------------------------------------------: | ------------------------------------------------: |
| `nameFormat` |                        `String`                        |                                       Format name |
| `text`       |                        `String`                        |                                       Text output |
| `params`     |                         `Array`                        | Parameter table sent by the decorator `@Format()` |
| `data`       |                        `Object`                        |                Object sent in the `exec()` method |
| `user`       | [User](https://app.gitbook.com/docs/avanced/user.html) |                     The user who reads the script |