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. | 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 |
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!