Script iFood Widget

Para instalar o iFood Widget na sua aplicação web, basta inserir o seguinte script no HTML:

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

O campo widgetId será preenchido automaticamente ao copiar o código.

É recomendado chamar iFoodWidget.init apenas após o evento load, pois o download do script é feito de forma assíncrona, logo o objeto global iFoodWidget e seus métodos e propriedades só serão definidos após o carregamento completo do script.

Atualmente iFoodWidget.init só pode ser chamado uma vez por sessão.

Exemplos:

Dado um widget com ID '59ce0211-7575-4665-b91e-0ee1d71c6181':

• Para ativar em um único merchant:

<!-- Start of iFood Widget script-->
<script async src="https://widgets.ifood.com.br/widget.js"></script>
<script>
  window.addEventListener('load', () => {
    iFoodWidget.init({
      widgetId: '59ce0211-7575-4665-b91e-0ee1d71c6181',
      merchantIds: ['857abd0d-54b6-4a8b-b891-92715510e92a'],
    });
  });
</script>
<!-- End of iFood Widget script -->

• Para ativar em vários merchants:

<!-- Start of iFood Widget script-->
<script async src="https://widgets.ifood.com.br/widget.js"></script>
<script>
  window.addEventListener('load', () => {
    iFoodWidget.init({
      widgetId: '59ce0211-7575-4665-b91e-0ee1d71c6181',
      merchantIds: [
        '37db3d08-baf6-4aac-b808-7c702989a055',
        'be804c24-0ced-4719-bac7-b01e2c3bbadc',
        '20b948fa-2876-4e04-a3e9-61e573753a49',
        '8c320d40-8604-47f5-8d53-4667ddbd248d',
        'b80b3a5e-a058-49ce-92a6-71e7b979e891',
      ],
    });
  });
</script>
<!-- End of iFood Widget script -->

API JS do Widget

O objeto iFoodWidget contém métodos que permitem controlar o widget. Sistemas com JavaScript client-side podem usar essa API para decidir por exemplo, quando exibir o widget.

iFoodWidget.init(config)

Inicializa o widget no contexto do restaurante especificado.

• config.merchantIds (array) Os IDs dos merchants.
• config.widgetId (string) O ID do widget.
• config.autoShow (boolean) Indica se o widget deve ser exibido imediatamente após a inicialização, opcional, true por padrão.
• config.containerSelector (string) Um selector CSS indicando o elemento que deve ser usado como o container do iframe usado pelo Widget, opcional, por padrão document.body será usado.

Exemplo:

// Nesse caso o widget será inicializado mas não será exibido.
iFoodWidget.init({
  merchantIds: ['...'],
  widgetId: '...',
  autoShow: false,
  containerSelector: '#my-container',
});

iFoodWidget.show()

Exibe o widget na tela, caso já não esteja em exibição.

iFoodWidget.hide()

Esconde o widget, caso já esteja em exibição.

iFoodWidget.ready

Uma Promise que é resolvida quando o widget terminou de ser baixado e foi inicializado com sucesso, pode ser usado para rodar JavaScript apenas após o widget ter sido instalado.

Exemplo:

await iFoodWidget.ready;

console.log('Widget inicializado');