Instalar em outros sites

HTML comum

Coloque o contêiner onde a experiência deve aparecer e carregue o script uma vez, de preferência depois do contêiner.

<section aria-labelledby="titulo-reserva">
  <h2 id="titulo-reserva">Reserve sua mesa</h2>
  <div
    data-menuorb-reservation
    data-key="SUA_CHAVE_PUBLICA"
    data-display="form"
    data-width="100%"
    data-height="720"
    data-language="pt-BR"
  ></div>
</section>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Next.js

Renderize o contêiner primeiro e use next/script para executar no navegador depois que a página estiver interativa.

import Script from 'next/script';

export default function PaginaDeReservas() {
  return (
    <>
      <div
        data-menuorb-reservation
        data-key="SUA_CHAVE_PUBLICA"
        data-display="form"
        data-width="100%"
        data-height="720"
        data-language="pt-BR"
      />
      <Script
        src="https://www.menuorb.com/widgets/menuorb-reservations.js"
        strategy="afterInteractive"
      />
    </>
  );
}

Se o carregador já está no layout raiz, não adicione novamente na página.

Aplicações React SPA

O carregador procura os contêineres quando é executado. Monte o script depois que o contêiner estiver renderizado:

import { useEffect } from 'react';

export function WidgetDeReservas() {
  useEffect(() => {
    if (document.querySelector('script[data-menuorb-loader]')) return;
    const script = document.createElement('script');
    script.src = 'https://www.menuorb.com/widgets/menuorb-reservations.js';
    script.async = true;
    script.dataset.menuorbLoader = 'true';
    document.body.appendChild(script);
  }, []);

  return (
    <div
      data-menuorb-reservation
      data-key="SUA_CHAVE_PUBLICA"
      data-display="button"
      data-color="#4f46e5"
      data-label="Reservar mesa"
      data-language="pt-BR"
    />
  );
}

Nota

Em navegação no cliente, se o carregador executou antes do componente existir, ele não encontrará automaticamente o novo contêiner. Carregue o script depois da montagem ou mantenha o widget em uma rota renderizada pelo servidor.

Webflow, Wix, Squarespace e outros

Use um bloco Embed, Código personalizado ou HTML. Cole o código padrão e publique. Alguns construtores não executam scripts no editor, então verifique a URL pública.

Se a plataforma remover scripts externos, crie um botão comum apontando para o link hospedado:

<a href="https://www.menuorb.com/widgets/reservations/SUA_CHAVE_PUBLICA?language=pt-BR" target="_blank" rel="noopener">
  Reservar mesa
</a>

Alternativa com iframe direto

Use somente quando o construtor aceita iframe, mas não o carregador:

<iframe
  src="https://www.menuorb.com/widgets/reservations/SUA_CHAVE_PUBLICA?language=pt-BR"
  title="Reservas do restaurante"
  width="100%"
  height="760"
  loading="lazy"
  style="border:0;border-radius:16px;background:#fff"
></iframe>

O iframe direto não usa o ajuste automático do carregador. Aumente a altura fixa se o conteúdo ficar cortado.

Sites permitidos

Para incorporações externas, adicione esquema e host exatos:

https://restaurante.com
https://www.restaurante.com

Não adicione caminhos como /reservas. http e https são origens diferentes, assim como www e sem www. Para desenvolvimento local, adicione a origem exata, como http://localhost:3000.

Deixar a lista vazia permite incorporação por qualquer site. Em produção, a lista explícita é mais segura.