Passar para o conteúdo principal
Como adicionar o chat no aplicativo?

Saiba como adicionar o chat no seu aplicativo!

Caio Cesar Garcia avatar
Escrito por Caio Cesar Garcia
Atualizado há mais de um ano

IMPORTANTE: Essa configuração exige apoio do seu time de desenvolvedores!


Você sabia que pode utilizar o Chat da OmniChat no seu aplicativo?

Como funciona?

Nosso chat pode ser exibido em aplicativos através de recursos de Webview em modo tela cheia no navegador!

Para essa exibição os parâmetros são enviado via query string dentro de uma URL.

Exemplo de uso:

Os parâmetros disponíveis são:

Parâmetro

Descrição

Obrigatório

retailerId

Informa o Id da Loja dentro da OmniChat

Sim

text

Mensagem pronta que será exibida automaticamente no campo destinado ao texto em uma conversa.
O Conteúdo do texto deverá ser codificado via formato URL-encoded

Não

externalId

Identificador externo do consumidor na plataforma de CRM da Loja. Será usado para o vínculo com a base de Cliente (Customer) interna da OmniChat.

Importante para manter histórico.

Sim.

name

Nome do Consumidor.

Não

email

E-mail do Consumidor.

Não

phoneCountryCode

DDI do Consumidor.

Não

areaCode

DDD ou Código de Área do Consumidor.

Não

phoneNumber

Número do Telefone do Consumidor.

Não


Como implementar?

Exemplo de utilização via webview

O embedded chat funciona para qualquer aplicação mobile utilizando webview.

É importante testar se o componente padrão do framework/linguagem utilizado suporta abertura de arquivos usando o explorador de arquivos para upload nativo. Esse recurso é importante para que o usuário consiga inserir anexos na conversa.

Exemplo em Flutter:

Para a implementação da WebView em Flutter na aplicação é necessário utilizarmos um plugin externo chamado flutter_webview_plugin, pelo fato do oficial ainda não ter upload de arquivos para o chat.


1 - Adicione o plugin nas dependências da aplicação:

pubspec.yaml 
```
...
dependencies:
flutter_webview_plugin: ^0.4.0


2 - Agora basta criar o Widget da página Web no projeto.


@override
Widget build(BuildContext context) {
return WebviewScaffold(url: _getUrl(), withLocalStorage: true, withJavascript: true);
}
String _getUrl() {
final userInfo = //informações do usuário;
return "https://devel-static.omni.chat/web-chat/send?"
"retailerId=${userInfo.retailerId}"
"&text=${userInfo.text}" "&name=${userInfo.name}"
"&externalId=${userInfo.externalId}"
"&email=${userInfo.email}"
"&phoneCountryCode=${userInfo.phoneCountryCode}"
"&phoneAreaCode=${userInfo.phoneAreaCode}"
"&phoneNumber=${userInfo.phoneNumber}";
}

O WebviewScaffold pode receber parâmetros como appBar e bottomNavigationBar para deixar a página mais integrada no Design do aplicativo do cliente.

E ai, está pronto para iniciar o uso do Chat no seu aplicativo?

Qualquer dúvida, conte com o nosso time!

Obrigado!

Respondeu à sua pergunta?