# Inputs

### Estructura

* msg: Mensaje que se quiera mostrar por pantalla. Debe ser del tipo string
* type:  Tipo de elemento. Debe ser del tipo string

El texto en el campo msg admite formato tipo markdown y reemplazo de variables: 

* \n: Salto de línea
* \*\* texto \*\*: Texto en negrita

Si la variable @name está declarada y tiene un valor se reemplazará en el mensaje mostrado. 

### Tipos de inputs

#### Input text

Este tipo de input permite al usuario ingresar cualquier tipo de texto, no se validará el formato ni el contenido.

```yaml
{
    "msg": "Bienvenido al bot de **imbee**, puedes decirnos tu nombre?",
    "type": "input_text"
}
```

#### Input email

Este tipo de input permite al usuario ingresar una dirección de correo y se realizará una validación para comprobar el formato. En caso que el formato sea incorrecto se mostrará un mensaje de error por pantalla. No se validará el contenido. 

```yaml
{
    "msg": "Por favor, ingresa tu dirección de correo",
    "type": "input_email"
}
```

#### Input telephone

Este tipo de input permite al usuario ingresar un número de teléfono y se realizará una validación para comprobar el formato. Es posible añadir el código de área de la siguientes maneras +34123456789 o 34123456789. No se validará el contenido.

```yaml
{
    "msg": "Por favor, podrías darnos tu número de teléfono?",
    "type": "input_telephone"
}
```

{% hint style="warning" %}
Los steps solo admiten un elemento de tipo input por acción. Es decir, cada elemento de tipo input tiene que tener su propio step.
{% endhint %}

### Guardado de variables 

Estos elementos permiten guardar el dato ingresado por el usuario en una variable que estará disponible en cualquier punto del flujo del bot. 

Para declarar la variable se utiliza @ como clave y el valor se asigna utilizando &. En el ejemplo se ve como se está guardando el dato introducido por el usuario en la variable @name.

```yaml
{  
  "steps": [
        {
            "name": "welcome",
            "tags": ["init"],
            "actions": [
                {
                    "msg": "Bienvenido al bot de **Imbee**. Puedes decirme tu nombre?",
                    "type": "input_text"
                }
            ],
            "next_step": "step_2",
            "variables": {
                "@name": "&input_text"
            }
        }
    ]
}
```

### Next step

El campo next\_step es indispensable para el flujo del bot, en el caso de los elementos del tipo [input](https://docs.imbee.me/imbee-docs/autobots/elementos/inputs), [quickReplies](https://docs.imbee.me/imbee-docs/autobots/elementos/quick-replies), [buttonMessage](https://docs.imbee.me/imbee-docs/autobots/elementos/button-message), [carousel](https://docs.imbee.me/imbee-docs/autobots/elementos/carousel) y [webservice](https://docs.imbee.me/imbee-docs/autobots/elementos/webservice) puede ser del tipo string o un array de strings con condicionales.

Si solo se indica un string el bot irá al próximo step sin importar el botón que se haya pulsado

```yaml
"next_step": "your_step_name_here"
```

En cambio, es posible variar el flujo del bot dependiendo de la interacción del usuario. Para esto es necesario declarar el valor del next\_step como un array de strings de uno o mas elementos.  La estructura del condicional debe ser: **if nombre\_de\_la\_variable == 'valor\_a\_comparar' : return nombre\_del\_step** 

```yaml
"next_step" : [
                "if @name == 'imbee' or @name == 'autobot': return access_ok", 
                "if @name != 'imbee' and @name != 'autobot': return access_error"
                ]
```

Las condiciones lógicas admitidas son:

* \== : Igual a
* != : Distinto a
* and == Y
* or == O

{% hint style="warning" %}
Si el valor a comparar es un string se deberán incluir comillas simples

**if nombre\_de\_la\_variable == 'valor\_a\_comparar\_string' : return nombre\_del\_step** 

En cambio si el valor a comparar es un integer NO se deberán incluir comillas simples 

i**f nombre\_de\_la\_variable == 10 : return nombre\_del\_step**
{% endhint %}

### Ejemplo de uso

```yaml
{
    "steps": [
        {
            "name": "welcome",
            "tags": ["init"],
            "actions": [
                {
                    "msg": "Bienvenido al bot de **Imbee**. Puedes decirme tu nombre?",
                    "type": "input_text"
                }
            ],
            "next_step": "email_request",
            "variables": {
                "@name": "&input_text"
            }
        },
      	{
            "name": "email_request",
            "tags": null,
            "actions": [
                {
                    "msg": "Perfecto @name, ahora necesitaríamos tu email",
                    "type": "input_email"
                }
            ],
            "next_step": "telephone_request",
            "variables": {
                "@email": "&input_email"
            }
        },
      	{
            "name": "telephone_request",
            "tags": null,
            "actions": [
                {
                    "msg": "Por favor @name, introduce tu teléfono con formato **+34**123456789",
                    "type": "input_telephone"
                }
            ],
            "next_step": "goodbye",
            "variables": {
                "@phone": "&input_telephone"
            }
        },
      	{
            "name": "goodbye",
            "tags": ["finish"],
            "actions": [
                {
                    "msg": "Muy bien @name, ya tenemos los datos necesarios. Te enviaremos un correo a @email y un mensaje de texto a @phone",
                    "type": "text"
                }
            ],
            "next_step": null
        }
    ]
}
```

![](https://1978994637-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKufUKQJLjj5_Yba0XG%2F-LjuFvV2242QN-_kziXi%2F-LjuHtVKzm7Jws5jGsA6%2Felement_input.png?alt=media\&token=dc10de06-6069-4b69-a142-cccadbdbdc3d)

![Resultado del ejemplo de uso](https://1978994637-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LKufUKQJLjj5_Yba0XG%2F-LjuFvV2242QN-_kziXi%2F-LjuHw63uHvuoe1gdLja%2Felement_input_2.png?alt=media\&token=6aabc512-f634-4b9d-b368-b983c17319fc)