{
    text: "Hello"
}
`$([Environment]::NewLine)
Você também pode especificar algumas opções:

** tipo** campo: opcional. o valor 'text' é o padrão. Use este campo para alterar o tipo de mensagem (por exemplo, '[image](#message- with-image)').

**senderFullname** field: opcional, porque ChatCase sabe com quem está falando. Mas este campo é útil para definir se você deseja alterar o nome do remetente por alguma razão.

# # Respostas rápidas

![Respostas rápidas](https://user-images.githubusercontent.com/32564846/95662490-abe5c100-0b37-11eb-8621-bfb7f324845c.png)

*Respostas rápidas* (geralmente enviadas por chatbots) permitem que os usuários respondam rapidamente com uma opção proposta e pré-construída. Pressionar o botão simplesmente envia o texto contido no rótulo do botão para o destinatário (na maioria das vezes o chatbot) do outro lado.

JSON

{
    type: "text",
    text: "Hello with buttons (blank)",
    attributes: {
        attachment: {
            type:"template",
            buttons: [
                {
                    type: "url",
                    value: "SITE 1",
                    link: "http://www.chatcase.com",
                    target: "blank"
                }
            ]
        }
    }
}
`$([Environment]::NewLine)
# # Modo "pai" JSON

{
    type: "text",
    text: "Hello with buttons (self)",
    attributes: {
        attachment: {
            type:"template",
            buttons: [
                {
                    type: "url",
                    value: "Dante",
                    link: "https://en.m.wikipedia.org/wiki/Dante_Alighieri",
                    target: "self"
                }
            ]
        }
    }
}
`$([Environment]::NewLine)
# # Botões de ação

Quando um usuário pressiona um botão de ação, uma mensagem de “ação” é enviada para o chatbot. Seu chatbot receberá o valor de campo "ação" que você pode usar para executar algumas ações específicas. Ao receber o valor da ação, o chatbot pode simplesmente responder com uma mensagem de resposta relacionada à ação. Se a opção **show\ echo** for definida como true o widget também mostrará no chat a mensagem no campo **value**, dando evidência ao usuário de que uma mensagem real foi enviada para o chatbot.

JSON

{
    type: "text",
    text: "This is an action for the backend",
    attributes: {
        action: "my-action-name"
    }
}
`$([Environment]::NewLine)
# # Anexo da imagem

Se quiser enviar uma imagem do seu chatbot externo, deve incorporar a imagem http source na resposta esquema JSON mostrado abaixo.

** tipo** campo deve ser definido como ** imagem**

** texto** campo é opcional

** campo metadata.src** é obrigatório e deve apontar para uma imagem válida

** Metadata.width** e ** Metadata.height** campos são opcionais. Se definirem, irão reduzir o tamanho da imagem de acordo com a mensagem de resposta.

JSON

{
    type: "file",
    text: "My document is sent as attachment",
    metadata: {
    name: "sales-report.pdf",
        src: "http://www.mywebsite.com/sales-report.pdf",
    type: "application/pdf"
    }
}
`$([Environment]::NewLine)
## mensagens de conteúdo iframe

Você pode enviar conteúdo para o widget web que pode ser facilmente incorporado em um HTML *iframe*. Por exemplo, você pode enviar um vídeo do youtube, um mapa externo, e também um mini jogo de vídeo HTML5!

** tipo** deve ser definido como 'frame'

** texto** é opcional.

**metadata.src** é obrigatório e deve apontar para um conteúdo http válido embaddable em um iframe HTML5

** Metadata.width** e ** Metadata.height** são opcionais. Se definido, eles reduzirão o tamanho do iframe de acordo com a mensagem de resposta.

JSON

{
    type: "text",
    text: "Do you agree? Please press one of the buttons to proceed",
    attributes: {
        disableInputMessage: true,
        inputMessagePlaceholder: 'Press a button to continue',
        attachment: {
            type:"template",
            buttons: [
                {
                    type: "text",
                    value: "Yes, I do"
                },
                {
                    type: "text",
                    value: "No, I do not"
                }
            ]
        }
    }
}
`$([Environment]::NewLine)
Na imagem seguinte, a caixa de texto de entrada está desativada, até que a próxima mensagem chegue.

![imagem] (https://user-images.githubusercontent.com/32564846/144202116-3035b6e0-ba89-4fbb-b15c-fa24ec7825bb.png)

# # Atualizar metadados do usuário

Às vezes, enquanto interage com o chatbot, você pode pedir ao usuário para atualizar suas informações como seu nome completo. Neste caso, o widget fornece atributos especiais para atualizar suas informações de usuário, para que ele possa enviar novas mensagens com o nome completo correto do usuário. Você pode atualizar o nome completo do usuário e e-mail usando as seguintes propriedades da mensagem:

**atributes.updateUserFullname**: Use este atributo para atualizar o novo usuário do Widget *nome completo*

**atributes.updateUserEmail**: Use este atributo para atualizar o novo usuário do Widget *email*

## # Exemplo de JSON

{
    text: "Thanks Andrea, we got your data and will take care of it!",
    attributes: {
        "updateUserEmail": "redacted@example.invalid",
        "updateUserFullname": "Andrea"
    }
}

{
    type: "text",
    text: "start",
    attributes: {
        subtype: "info"
    }
}
`$([Environment]::NewLine)
# # Mensagens divididas

É uma tendência comum para quebrar mensagens longas do chatbot em várias mensagens. Isso pode acontecer no lado do servidor, mas existem alguns problemas com esta abordagem, como às vezes mensagens não-wished desordenadas na conversação, cliente "live" reordenando (isso acontece porque ChatCase não pode assegurar que "muito timestamp perto" mensagens ordem de chegada é preservada na longa "cadeia de entrega de mensagens".

Nestes casos, a divisão "Lado Widget" é uma abordagem preferencial. Você pode enviar todas as mensagens em um único "pacote" para o Widget, especificando o "atraso" entre elas. Será o Widget ChatCase para renderizar as mensagens na ordem exata, preservando o timing exato entre as mensagens.

Vejamos um exemplo:

Suponha que você queira enviar estas mensagens como uma mensagem exclusiva do chatbot, mas dividida em várias mensagens:

![imagem] (https://user-images.githubusercontent.com/32564846/169641648-4271e7bf-0e20-4356-ab58-e61391ee25f7.png)

JSON

Você tem que enviar uma única mensagem como a seguinte:

{
    "attributes": {},
    "recipient_fullname: ...
    ...
    ...
    "type": "html",
    "text": `<html>
                <head>
                    <style>

                        .text-html {
                            font-size: 14px;
                        }

                        .button-html {
                            font-size: 10px !important;
                        }
                    </style>

                </head>
                <body>

                    <div>
                        <p class="text-html"><b>This is an HTML message type example</b> </p>
                        <p class="text-html"> Place any html tag to be loaded here...  </p>
                    </div>
                    <br><br>
                    <div><p class="text-html"> Button example below 👇🏻</p></div>
                    <button type="button" class="button-html url" onclick="window.open('https://www.chatcase.com', '_blank')">Button 1</button>
                    <button type="button" class="button-html url" onclick="window.open('https://developer.chatcase.com/widget/web-sdk', '_blank')">Button 2</button>
                    <button type="button" class="button-html url " onclick="window.open('https://developer.chatcase.com/widget/advanced', '_blank')">Button 3</button>
                    <br><br>
                    <div><p class="text-html"> Image example below 👇🏻</p></div>
                    <div class="img-container">
                        <img src="https://chatcase.com/wp-content/uploads/2020/08/chatcase-logo_x4_vpadding.png" width="200px">
                    </div>
                </body>
            </html>`,
    ...
    ...
}
```Como especificado no exemplo apresentado, também é possível, como uma página HTML normal, especificar o estilo dentro do **`<style></style>`** Tag.

O widget interno renderiza três tipos de estilos, atribuídos respectivamente às classes css *text-html*, *button-html* e *image-container*.

O exemplo mostra uma substituição dessas classes css para personalizar o estilo dos elementos como desejado.