Introdução

Widget

Requisitos

Criação do Widget

Instalação

<!-- 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 10)
      ],
    });
  });
</script>
<!-- End of iFood Widget script -->

Cuidados com a Integração do Widget

Integrações com Bibliotecas e Framework

C# / Blazor Framework

1. Carregar o script do widget e criar uma função global que o Blazor possa invocar para inicializar o widget.

• Load a script in body markup

<script src="https://widgets.ifood.com.br/widget.js"></script>
<script>
  window.startIfoodWidget = (merchantId) => {
      iFoodWidget.init({
          widgetId: widgetUUID,
          merchantIds: [merchantid],
      });
  };
</script>

2. Criar métodos usando JSInterop para invocar startIfoodWidget do lado do C#.

• ASP.NET Core Blazor JavaScript interoperability (JS interop)
• JSRuntime Class

using System.Threading.Tasks;
using Microsoft.JSInterop;

public class IFoodWidgetInterop
{
  [Inject]
  public IJSRuntime JSRuntime { get; set; }

  public async Task IniciarWidget(string merchantId)
  {
    await JsRuntime.InvokeVoidAsync("window.startIfoodWidget", merchantId);
  }
}

Electron

win.webContents.setWindowOpenHandler((event) => {
  const newURL = new URL(event.url);

  if (newURL.origin.endsWith('ifood.com.br')) {
    shell.openExternal(newURL.href);
    return { action: 'deny' };
  }

  return { action: "allow" };
});

• webContents.setWindowOpenHandler link
• shell.openExternal link

Problemas com Content Security Policy (CSP)

<meta http-equiv="Content-Security-Policy" content="default-src https://*.ifood.com.br">

• Mozilla MDN: Content Security Policy
• Mozilla MDN: default-src

Autenticação e Autorização

Dicas Importantes

Passo a Passo

Dúvidas Comuns

Suporte a múltiplos merchants

Autenticação em vários dispositivos

Problemas com perda de autorização

Configurações de Privacidade

Chrome

• A opção Bloquear cookies de terceiros na navegação anônima deve estar habilitada.
• As opções Bloquear cookies de terceiros e Bloquear todos os cookies (não recomendado) irão impedir que o widget se mantenha autorizado. Por este motivo devem permanecer desabilitadas.
• A opção Limpar cookies e dados de sites quando você fechar todas as janelas deve estar desabilitada.

Safari

• A opção Bloquear todos os cookies deve estar desabilitada.

Edge

• A opção Permitir que os sites salvem e leiam dados de cookies (recomendado) deve estar habilitada.
• A opção Bloquear cookies de terceiros, deve estar desabilitada.

• A opção Cookies e dados do site deve estar desabilitada.

Firefox

• Nas opções de privacidade, a opção Normal deve estar habilitada.

• A opção Apagar cookies e dados de sites quando o Firefox for fechado deve estar desabilitada.

Limpeza de cache

Problemas na inicialização do widget

<script>
  // Errado: Widget é inicializado com parâmetros 
  // inválidos, excluindo a sessão do usuário:

  window.addEventListener('load', () => {
    // 1. Inicializar com parâmetros em branco 
    iFoodWidget.init({
      widgetId: '',
      merchantIds: [],
    });
  });

  // 2. Aguardar algum processo async para carregar
  // os dados do usuário no seu sistema...

  user.login().then(user => {
    // 3. Inicializar uma segunda vez com os parâmetros corretos
    // agora que o user está carregado.
    iFoodWidget.init({
        widgetId: user.widgetId,
        merchantIds: user.merchants,
    });
  });
</script>

<script>
  // Correto: widget é inicializado apenas uma vez com  
  // os parâmetros corretos.

  user.login().then(user => {
    iFoodWidget.init({
        widgetId: user.widgetId,
        merchantIds: user.merchants,
    });
  });
</script>

Outros possíveis problemas

• Verifique se o dispositivo rodando o widget possui scripts ou processos automatizados que fazem limpeza de dados após uso.
• Caso sua aplicação não seja web, mas usa uma WebView para fazer a integração com o widget, verifique se a implementação de WebView escolhida suporta ou está configurada para salvar cookies.
• Verifique se o usuário está sempre usando o mesmo perfil/conta no navegador.