Introdução

O projeto Embeddables consiste em disponibilizar widgets que podem ser personalizados pelos desenvolvedores e incorporados aos seus aplicativos. Ao instalar o script de incorporação no seu aplicativo será exibido um botão flutuante que ao ser clicado expande disponibilizando os recursos configurados. Na versão atual o widget disponibiliza o Chat (entre merchant e consumidor), Notificações, Tracking de Pedidos e o Indicador de Status da Loja, com suporte a multi-lojas.

Requisitos

Para executar o widget é necessário que o seu aplicativo seja uma aplicação web com suporte a JavaScript.

Instalação

Cole o código do widget na <head> das páginas do seu sistema em que o widget deve ser acessível. Após inserir o código, substitua o campo merchantIds com os UUIDs dos merchants do seu usuário.

<!-- Start of iFood Widget script-->
<script async src="https://widgets.ifood.com.br/widget.js"></script>
<script>
  window.addEventListener('load', () => {
    iFoodWidget.init({
      widgetId: 'widgetUUID',
      merchantIds: [
        // list of merchant uuids (up to 5)
      ],
    });
  });
</script>
<!-- End of iFood Widget script -->

É possível obter o UUID do merchant no Portal do Parceiro na tela Minha Loja -> Loja.

Dica

Você pode utilizar uma variável dinâmica que pode variar de acordo com as informações da sessão do usuário do seu aplicativo.

Autenticação e Autorização

No primeiro acesso, é necessário que o usuário autorize o acesso. Ao clicar em "Autorizar" será gerado um código e um link que redireciona para o Portal do Parceiro iFood onde ele deverá fazer a autorização. É necessário logar no Portal do Parceiro para fazer a autorização.

Esse processo de autorização é extremamente importante para garantirmos que somente o usuário com permissão em uma determinada loja tenha acesso às informações dessa loja através do widget. É esse processo que garante que nenhuma pessoa má intencionada tenha acesso aos dados sensíveis/confidenciais do seu cliente no iFood.

Perfis e permissões necessárias para autorizar o widget

Para realizar a autorização no Portal do Parceiro iFood é necessário que o usuário logado tenha acesso a todos os merchants informados no código de incorporação e ter um dos seguintes perfis:

"Administrador(a)"
"Dono(a)"
"Gestão da rede (antigo Master Franqueado)"
"Gestão estratégica de 2 ou mais lojas"
"Dono(a) da franquia (antigo Franqueado)"
"Franqueado Operação"
"Franqueado Gestão de Cardápio"
"Franqueado Gestão de Cardápio e Entrega"
"Financeiro"

Ao clicar no link "Ir para o "Portal do Parceiro" o usuário será redirecionado para o Portal do Parceiro para fazer a autorização. Caso o usuário não esteja logado será necessário fazer o login e depois clicar em "Autorizar". O usuário receberá um código de autorização que precisará ser inserido no widget. Ele deve copiar esse código, voltar na tela do seu aplicativo, colar o código de autorização e clicar em "Autorizar".

Dicas Importantes

Token da sessão do Widget e o Cache Local

Ao autorizar o widget, são gerados um accessToken e um refreshToken que ficarão armazenados no cache local. O próprio widget se encarrega de renovar o token quando ele estiver prestes a expirar, mas é super importante que esse cache local nunca seja apagado. Caso o cache seja apagado, o usuário terá que autorizar o widget novamente.

Validade da Sessão

O refreshToken tem validade de 7 dias. Caso o usuário fique mais de 7 dias sem acessar o Widget ele precisará fazer a autorização novamente

Logoff do usuário no seu aplicativo e a sessão do Widget

Quando um usuário do seu aplicativo faz logoff (numa eventual troca de turno), recomendamos que você mantenha a sessão do widget ativa. Para isso, não remova o código de incorporação da tela de login e não apague o cache. Com isso, quando um novo usuário logar no seu aplicativo ele já tem acesso ao widget sem precisar passar por todo o processo de autorização novamente.

Passo a Passo

Veja no vídeo abaixo como funciona o processo de autorização:

Dúvidas Comuns

Suporte a múltiplos merchants

É possível incluir de 1 a 5 merchants em uma sessão do widget. É necessário que o usuário que faça o processo de autorização tenha acesso a todos os merchants dessa lista, caso contrário não será possível autorizar o widget.

Múltiplas tabs

Não é possivel ter instâncias do widget em várias tabs do mesmo navegador com merchants diferentes. Ao autenticar os merchants em uma instância, todas as outras instâncias (inclusive de todas as tabs do browser) serão desautenticadas automaticamente.

Isso não quer dizer que um widget não possa estar autorizado em vários merchants ao mesmo tempo, um widget pode ter sido autorizado por N merchants, e deve continuar funcionando normalmente para todos eles, desde que em máquinas separadas.

Autenticação em vários dispositivos

Hoje o processo de autorização deve ser feito uma vez por dispositivo, pois o resultado da autorização é apenas persistido localmente, logo ao autorizar o widget em uma máquina A, ao tentar abrir o mesmo widget com o mesmo merchant em uma máquina B, o usuário da máquina B deverá realizar o processo de autorização automaticamente.