As funcionalidades da categoria "Bubbles" são essenciais para criar uma experiência de conversa mais interativa e fluida. Elas representam os tipos de mensagens que o bot pode enviar para o usuário e podem ser usadas para exibir mensagens de texto, botões de ação, imagens e outros elementos interativos, tornando a interação mais intuitiva e eficiente.

Nos bubbles podem ser encontrados blocos de funcionalidades:

Neste artigo, vamos explorar como configurar e utilizar essas funcionalidades.

Em vários campos dos bubbles você vai se deparar com o botão com desenho de uma pessoa. Esse botão serve para inserir ou criar variáveis. As variáveis são dados, como o nome, respostas a perguntas específicas ou qualquer informação relevante coletadas ao longo da conversa com o usuário.

Ao clicar neste botão é possível inserir uma variável já existente. Também há como criar uma variável digitando seu nome no campo de busca e depois clicando no botão "Criar".

As variáveis poder podem ser usadas nos bubbles para acrescentar informações personalizadas aos itens adicionados ao bot.

Na imagem, usamos como exemplo o bubble de imagem:

O bloco de texto é usado para exibir mensagens de texto simples, em formato de balões, ao usuário. Ele serve para transmitir informações, fazer perguntas ou guiar a conversa dentro do bot.

Ao criar um bubble de texto, você pode inserir o conteúdo desejado e personalizar a mensagem para que ela se encaixe no contexto da conversa.

Os blocos de texto podem ser encadeados, ou seja, ligar uma mensagem de texto à próxima automaticamente. Isso cria uma transição suave entre diferentes partes da conversa, facilitando a leitura e compreensão das informações.

Exemplo na visão do usuário:

Passo a passo

1º passo: insira um bloco de texto no fluxo do bot. Para isso, clique no bubble "Texto" e arraste para a tela de edição do bot.

2º passo: dê um nome para o novo grupo (isso ajuda na identificação) e escreva o texto que será enviado para o usuário.

3º passo: por meio dos botões na barra de edição do bloco de texto, é possível formatar o texto.

Ao clicar no texto vinculado ao link o usuário será redirecionado para a URL configurada.
​

4º passo: para inserir mais blocos de textos e encadear as mensagens, basta clicar no bubble texto e arrastar para o grupo criado anteriormente.

O bloco de vídeo permite que você incorpore vídeos diretamente na conversa do bot. Ele serve para compartilhar conteúdo visual, como tutoriais, demonstrações de produtos ou mensagens informativas, de maneira mais envolvente. Ao adicionar um vídeo, você pode proporcionar uma experiência mais rica e dinâmica, ajudando a capturar a atenção do usuário e transmitir informações de forma clara e eficaz.

Você pode colar a URL de um vídeo de várias fontes, incluindo YouTube, Vimeo, Gumlet, Tik Tok, entre outros.

Exemplo visão do usuário de um bloco de texto + um bloco de vídeo:

Passo a passo:
​

1º passo: insira um bloco de vídeo no fluxo do bot. Para isso, clique no bubble "Vídeo" e arraste para a tela de edição do bot.

2º passo: dê um nome para o novo grupo (isso ajuda na identificação). Clique no campo "Clique para editar" e insira a URL do vídeo no campo "Colar o link do vídeo".

3º passo: defina a proporção e largura máxima de como o vídeo será exibido.

Repare que, do lado direito, é possível visualizar uma prévia de como o vídeo aparecerá para o usuário.

Ao clicar no "play" do vídeo o usuário assistirá o vídeo incorporado sem precisar sair do bot.

O bloco áudio permite que você incorpore e reproduza arquivos de áudio diretamente na conversa do bot. Ele serve para transmitir informações auditivas, como mensagens de voz, músicas ou sons explicativos. Ao usar o bubble de áudio, você pode oferecer uma experiência auditiva enriquecedora, ajudando a comunicar mensagens de maneira mais diversificada e atraente para o usuário.

Você pode carregar um arquivo de áudio ou inserir a URL do áudio.

Exemplo visão do usuário bloco de texto + bloco de áudio:

Passo a passo:

1º passo: insira um bloco de áudio no fluxo do bot. Para isso, clique no bubble "Áudio" e arraste para a tela de edição do bot.

2º passo: dê um nome para o novo grupo (isso ajuda na identificação). Clique no campo "Clique para editar".

3º passo: na aba "Incorporar link", insira a URL do áudio (MP3s e WAVs). Se desejar, ative a opção "Ativar reprodução automática" para o áudio iniciar automaticamente.

Repare que, do lado direito, é possível visualizar uma prévia de como o áudio aparecerá para o usuário.

4º passo: na aba "Carregar", clique no botão "Escolher um arquivo" para fazer o upload de um arquivo de áudio do seu computador. Se desejar, ative a opção "Ativar reprodução automática".

Isso é esperado. A maioria dos navegadores da web possui uma política que impede a reprodução automática do áudio. O usuário precisa interagir com a página antes que o áudio possa ser reproduzido.

Provavelmente, significa que seu arquivo de áudio está corrompido. Dependendo da origem do arquivo, é importante garantir que a codificação foi feita corretamente. Você pode verificar se o arquivo está codificado da maneira correta baixando-o e reproduzindo-o localmente em seu computador.

O boco "imagem" permite que você exiba imagens diretamente na conversa do bot. Ele serve para compartilhar conteúdo visual, como gráficos, fotos de produtos ou ilustrações, para complementar as informações textuais e tornar a interação mais atraente. Usar imagens ajuda a captar a atenção do usuário e pode tornar a comunicação mais clara e impactante.

Você pode inserir o link da imagem, fazer upload dela, escolher um GIF, uma imagem do Unsplash ou um ícone.

Exemplo visão do usuário bloco de texto + bloco de imagem:

Passo a passo:

1º passo: insira um bloco de imagem no fluxo do bot. Para isso, clique no bubble "Imagem" e arraste para a tela de edição do bot.

2º passo: dê um nome para o novo grupo (isso ajuda na identificação). Clique no campo "Clique para editar".

3º passo: é possível inserir uma imagem no seu bot de quatro maneiras diferentes.

Na aba "Link", insira a URL da imagem que deseja incorporar ao bate-papo do bot.

Se desejar, ative a chave da opção "Link ao clicar", assim, ao clicar na imagem, o usuário será redirecionado para este link.

No primeiro campo que apareceu insira a URL de redirecionamento. O segundo campo é para inserir um texto alternativo. Ele serve para descrever o conteúdo da imagem para usuários que não podem vê-la, como aqueles que utilizam leitores de tela. Além disso, o texto alternativo é exibido quando a imagem não pode ser carregada, proporcionando contexto sobre o que a imagem representa.

Repare que, do lado direito, é possível visualizar uma prévia de como a imagem aparecerá para o usuário.

A funcionalidade "Link ao clicar" aparece em todas as opções de inclusão de imagem no bot, e, em todas elas, é configurada da mesma forma como detalhamos acima.

Acesse a aba "Upload". Clique em "Escolha uma imagem", e faça o upload de uma imagem do seu computador.

Se quiser, ative e configure a funcionalidade "Link ao clicar".

​

Acesse a aba "Giphy" e use a barra de busca para encontrar um GIF. Depois é só clicar na imagem deseja para que ela seja inserida no bot.

Se quiser, ative e configure a funcionalidade "Link ao clicar".

Acesse a aba "Unsplash" e use a barra de busca para encontrar uma imagem neste banco de dados. Depois é só clicar na imagem deseja para que ela seja inserida no bot.

Se quiser, ative e configure a funcionalidade "Link ao clicar".

Acesse a aba "Icon" e selecione o ícone que desejar. É possível buscar ícones de cores diferentes, para isso clique no ícone de círculo colorido, localizado ao lado da barra de busca, e selecione uma cor clicando nas cores já disponíveis, cores avançadas ou incluindo o código da cor.

O bloco incorporar permite que você integre conteúdo externo diretamente na conversa do bot, como PDF, iframes, sites, mapas do Google, postagens de redes sociais, entre outros. Ele serve para enriquecer a interação com conteúdo dinâmico e interativo, proporcionando aos usuários acesso direto a informações ou funcionalidades adicionais sem sair da conversa.

Exemplo visão do usuário bloco de texto + bloco de incorporar:

Passo a passo:

1º passo: insira um bloco de incorporar no fluxo do bot. Para isso, clique no bubble "Incorporar" e arraste para a tela de edição do bot.

2º passo: dê um nome para o novo grupo (isso ajuda na identificação). Clique no campo "Clique para editar".

3º passo: insira o link ou código no primeiro campo de texto.

No campo "Altura", defina a medida da altura, em pixels, que o conteúdo será mostrado.

Alguns sites não permitem a incorporação. Se você encontrar um espaço em branco, isso significa que o site que está tentando incorporar não autoriza essa função.

Testar o funcionamento dos bubbles na pré-visualização do bot é essencial para garantir que todos os elementos, como texto, imagens, vídeos e links, funcionem corretamente e proporcionem uma boa experiência ao usuário. Na pré-visualização, você pode verificar se as interações fluem como esperado, identificar e corrigir erros, e ajustar o conteúdo antes de lançar o bot ao público.

Selecione o grupo criado. Alguns botões aparecerão logo acima do bloco. Clique no primeiro botão, com o ícone de uma seta.

Ao lado direito aparecerá a pré-visualização, simulando a conversa do chat. Veja se todos os bubbles adicionadas ao fluxo estão funcionando corretamente.

Pronto! Agora você já sabe como utilizar os bubbles do bot.