Botão flutuante

5 min de leituraAtualizado em 26 out. 2026

Um botão pronto no canto da tela que abre o chat. Ele é opcional: o SDK não desenha nada por cima do seu app sem você pedir. Se preferir um botão seu, chame Atalia.open (Android) ou Atalia.present (iOS) nele.

O botão:

• entra na tela com o círculo colorido e abre uma pílula com o título ("Fale conosco") e, embaixo, o nome do atendimento;
• recolhe em círculo depois de 5 segundos;
• puxado, estica como um elástico e volta ao lugar. Puxado até a borda, se esconde numa aba; tocar ou puxar a aba traz o botão de volta;
• volta a abrir, com um pulo, quando chega mensagem nova, e mostra o número de não lidas;
• some enquanto o chat está aberto e entra de novo quando ele fecha;
• abre o chat já carregado (veja Chat pronto no toque).

Entra aberto e recolhe em círculo.

Puxado, estica e volta. Até a borda, vira uma aba.

A aparência vem do painel

Cor, texto e lado da tela são os do botão do site, no canal de webchat (Editar canal › Widget › Botão flutuante): Cor do botão, Texto do botão e Posição. O subtítulo é o nome do atendimento, o mesmo do cabeçalho do chat (sem ele, o nome do canal). Mudou no painel, muda no app sem publicar uma versão nova. O app guarda a última aparência, então o botão não pisca nem troca de lado ao abrir. Na primeira abertura do app, o botão espera a aparência do canal para aparecer.

O Estilo do painel (Círculo ou Pill) vale só para o site. No app, o botão sempre abre com o texto e recolhe do jeito da opção collapse.

Mostrar o botão

Android

Kotlin

Atalia.showLauncher(activity)

Serve para telas com View e com Compose: o botão fica por cima do conteúdo da activity. Chamar de novo só troca as opções. Para tirar: Atalia.hideLauncher(activity).

Para posicionar você mesmo, use a AtaliaLauncherView como qualquer view. No Compose:

Compose

Box(Modifier.fillMaxSize()) {
    // ...a sua tela
    AndroidView(
        factory = { context -> AtaliaLauncherView(context) },
        modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp),
    )
}

iOS

SwiftUI

TabView {
    // ...as abas do app
}
.ataliaLauncher(AtaliaLauncherOptions(bottomPadding: 56)) // acima da barra de abas

Aplique numa view que ocupe a tela inteira (TabView, NavigationStack ou .frame(maxWidth: .infinity, maxHeight: .infinity)): o botão vai para o canto dela.

UIKit

AtaliaLauncherView.attach(to: view)          // nesta tela
AtaliaLauncherView.attach(to: view.window!)  // em todas as telas

A AtaliaLauncherView ocupa a área toda de quem a recebe, mas só o botão recebe toque: o resto passa para o app. Para tirar, removeFromSuperview().

Opções

Android

Kotlin

Atalia.showLauncher(
    activity,
    AtaliaLauncherOptions(
        bottomMarginDp = 72,
        subtitle = "Respondemos em minutos",
        collapse = AtaliaLauncherOptions.Collapse.EDGE,
    ),
)

Opção	Padrão	Para quê
side	o lado do painel	Side.START ou Side.END.
horizontalMarginDp	16	Distância da lateral, em showLauncher.
bottomMarginDp	16	Distância do fim da tela, além da barra de navegação, em showLauncher. Aumente para ficar acima de uma barra de abas.
text	o do painel	Título do botão aberto.
subtitle	o nome do atendimento	Linha de baixo do botão aberto. "" tira o subtítulo.
color	a do painel	Cor do círculo e da aba (@ColorInt).
collapse	Collapse.CIRCLE	Como recolhe: CIRCLE (só o círculo), EDGE (aba encostada na lateral) ou NEVER (sempre aberto).
collapseAfterMs	5000	Tempo aberto antes de recolher.
draggable	false	O usuário arrasta o botão para onde quiser; ao soltar, ele gruda na lateral mais próxima. Só com showLauncher.
dockable	true	Puxar até a borda esconde o botão numa aba.
preloadChat	true	Carrega o chat escondido enquanto o botão está na tela.
onClick	abre o chat	Troca a ação do toque.

iOS

Swift

.ataliaLauncher(AtaliaLauncherOptions(
    bottomPadding: 72,
    subtitle: "Respondemos em minutos",
    collapse: .edge
))

Opção	Padrão	Para quê
side	o lado do painel	.leading ou .trailing.
horizontalPadding	16	Distância da lateral, além da área segura.
bottomPadding	16	Distância do fim da área segura. Aumente para ficar acima de uma barra de abas.
text	o do painel	Título do botão aberto.
subtitle	o nome do atendimento	Linha de baixo do botão aberto. "" tira o subtítulo.
color	a do painel	Cor do círculo e da aba (UIColor).
collapse	.circle	Como recolhe: .circle (só o círculo), .edge (aba encostada na lateral) ou .never (sempre aberto).
collapseAfter	5	Segundos aberto antes de recolher.
draggable	false	O usuário arrasta o botão para onde quiser; ao soltar, ele gruda na lateral mais próxima.
dockable	true	Puxar até a borda esconde o botão numa aba.
preloadChat	true	Carrega o chat escondido enquanto o botão está na tela.
onTap	Atalia.present()	Troca a ação do toque.

Chat pronto no toque

Com o botão na tela, o SDK carrega o chat escondido, um instante depois de o app abrir. O toque abre a folha com o chat pronto, sem esperar a página. Ao fechar, o chat volta a esperar escondido.

O toque abre a folha com o chat já carregado.

Escondido, o chat não conecta, não marca nada como lido e não conta como "no chat": a Atalia continua mandando as notificações push normalmente. Ele só entra no ar quando aparece.

Se o seu app já usa muita memória ou a rede é limitada, desligue com preloadChat = false (Android) ou preloadChat: false (iOS): o chat passa a carregar no toque.

Acessibilidade

O botão tem o texto do painel como rótulo para o leitor de tela (VoiceOver e TalkBack), que também anuncia as mensagens não lidas. A aba da borda é anunciada como "Mostrar fale conosco". Com a opção de reduzir movimento (iOS) ou de remover animações (Android) ligada no aparelho, o botão troca de forma sem animação.