Como enviar Copia e Cola pelo BLiP Chat? – Blip | Blip Help

Índice:

Este é um componente exclusivo para o BLiP Chat, seu conteúdo não será renderizado por outros canais nas conversas com os usuários.

Com esse componente você pode configurar dados para serem exibidos com título, corpo, rodapé e o botão para ação de copiar o valor que é definido na configuração do componente.

Pré-requisitos

A seguir temos os pré-requisitos para o uso do Copia e Cola no BLiP Chat para algumas das formas de integração.

Caso a sua integração inclua o uso de um iframe que englobe o BLiP Chat de alguma forma, mesmo que não seja recomendado para todos os casos (usando nossos métodos que já possuem um iframe, como o uso do blip-chat-widget ou nossos pacotes mobile nativos), por garantia você pode liberar o uso do clipboard adicionando a propriedade ‘allow’ com pelo menos o valor ‘clipboard-read; clipboard-write’ como nos exemplos abaixo:

iframe.setAttribute('allow', 'clipboard-read; clipboard-write')

Url e chave do bot

Uma integração direta com a url e chave do bot, seu próprio website deve permitir o uso do microfone. Se o uso inclui algum iframe, conferir os pré-requisitos gerais.

Pacote blip-chat-widget

Caso a sua integração com o BLiP Chat se deu através da instalação do pacote node do blip-chat-widget (blip-chat-widget - npm), deve se usar a versão mínima 1.10.1.

Script do blip-chat-widget

Se sua integração ocorreu através da injeção do script como na documentação: Como adicionar um bot em um site utilizando o Blip Chat?.

Se a rota para o seu script já estiver como https://unpkg.com/blip-chat-widget não é necessário nenhuma ação, ele já está sempre com a versão mais atualizada. Porém se foi especificado uma versão na sua url deve ser pelo menos a 1.10.1 como a seguir: https://unpkg.com/blip-chat-widget@1.10.1.

Android Nativo

Para a integração com Android Nativo (Como adicionar um bot em um aplicativo Android utilizando o BLiP Chat?), seu aplicativo deve estar preparado para requisitar a permissão de uso do clipboard.

Documentação de desenvolvedor do Android explicando o que são e como requisitar as permissões: Permissões no Android.

iOS Nativo

Para a integração com iOS Nativo (Como adicionar um bot em um aplicativo iOS utilizando o BLiP Chat?), seu aplicativo deve estar preparado para requisitar a permissão de uso do clipboard.

Documentação de desenvolvedor do iOS explicando o que são e como requisitar as permissões: Requesting authorization to capture and save media | Apple Developer Documentation.

Configurando o Copia e Cola no Builder

Na tela do builder de seu bot que vai ser usado somente para o BLiP Chat você começará adicionando um componente novo.

Selecione a opção 'Adicionar bloco’.

Então você pode selecionar a opção ‘Componentes exclusivos’.

Um modal aparecerá com as opções de canais disponíveis.

Após selecionar ‘Blip Chat’ a tela do modal irá exibir os componentes exclusivos disponíveis para aquele canal.

Ao selecionar o componente do ‘Copia e cola’ um novo bloco será adicionado ao builder.

Ao clicar em editar o componente na aba que abriu à direita, as primeiras opções de edição aparecerão. Nessa tela é possível alterar o título, corpo e rodapé.

Para editar o texto do botão e o valor que será copiado para a área de transferência do usuário deve-se clicar no botão que fará a ação. Assim uma nova janela de edição será aberta.

Caso seja necessário somente alterar o valor do botão, deve-se clicar em ‘Salvar’ e posteriormente clicar no ícone de salvar o componente como um todo.

Você pode deixar um valor fixo ou configurar um valor através das variáveis disponíveis no builder igual qualquer outro componente.

Componente Lime do Copia e Cola

Para configurar o componente de forma dinâmica ou enviar por conta própria a message, ele tem o seguinte padrão Lime:

{

        to: 'to@msging.net',

        from: 'from@msging.net',

        type: 'application/vnd.lime.copy-and-paste+json',

        content: {

          header: 'Segue o código',

          body: 'Clique no botão abaixo para copiar o código Pix.',

          footer: 'O código expira em 10 minutos.',

          button: {

            text: 'Copiar código Pix',

            value: 'Value'

          }

        }

      }

Copia e Cola no BLiP Chat

Com seu componente corretamente preenchido e o fluxo funcionando, ele aparecerá da seguinte forma no BLiP Chat

Se o usuário clicar no botão ‘Copiar código Pix’ do exemplo, o conteúdo do valor definido no componente será copiado para a sua área de transferência.

Para mais informações, acesse a discussão sobre o assunto em nossa comunidade ou os vídeos no nosso canal. 😃