Personalizar o widget de reservas

O MenuOrb gera o código recomendado em Reservas > Configurações. Você pode colar sem alterações ou editar os atributos data-* compatíveis antes de adicionar ao site.

Referência completa de atributos

Atributo	Obrigatório	Padrão	O que controla
data-menuorb-reservation	Sim	—	Marca o elemento onde o MenuOrb monta o widget.
data-key	Sim	—	Chave pública que envia as reservas para um restaurante.
data-display	Não	form	form exibe incorporado; button abre um popup.
data-width	Não	100%	Largura do iframe no modo formulário. Aceita 100%, 680px ou min(100%, 800px).
data-height	Não	720	Altura inicial em pixels. Depois o widget ajusta automaticamente entre 480 e 1400 pixels.
data-radius	Não	16	Arredondamento externo do iframe ou botão em pixels. Use 0 para cantos retos.
data-color	Não	#4f46e5	Fundo do botão no modo button. A cor do formulário é configurada no MenuOrb.
data-label	Não	Reserve a table	Texto do botão no modo button.
data-language	Não	idioma do site	Idioma inicial: en, pt-BR, es ou fr. Valores incompatíveis usam inglês.
data-title	Não	Restaurant reservations	Título acessível do iframe para leitores de tela.

Nota

As configurações salvas de Cor principal, Fundo, Texto, Cantos arredondados e Layout compacto controlam o formulário. Os atributos do código controlam o iframe externo ou o botão. Por isso, data-color altera o botão, mas não a cor principal salva do formulário.

Formulário incorporado

<div
  data-menuorb-reservation
  data-key="SUA_CHAVE_PUBLICA"
  data-display="form"
  data-width="100%"
  data-height="720"
  data-radius="16"
  data-language="pt-BR"
  data-title="Reservar mesa no Restaurante Porto"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

O formulário informa sua altura ao carregador automaticamente. data-height reserva o espaço inicial durante o carregamento das configurações e horários.

Botão que abre o formulário

<div
  data-menuorb-reservation
  data-key="SUA_CHAVE_PUBLICA"
  data-display="button"
  data-color="#ea580c"
  data-radius="999"
  data-label="Reserve sua mesa"
  data-language="pt-BR"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Nesse modo, o MenuOrb cria um popup centralizado, bloqueia a rolagem enquanto estiver aberto e permite fechar pelo controle, fundo ou tecla Escape.

Alterar cor, largura e alinhamento inline

Use os atributos para valores do widget e style para posicionar o contêiner:

<div
  data-menuorb-reservation
  data-key="SUA_CHAVE_PUBLICA"
  data-display="form"
  data-width="100%"
  data-height="680"
  data-radius="24"
  data-language="pt-BR"
  style="max-width: 760px; margin: 32px auto; padding: 0 16px;"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Para alinhar um botão à direita:

<div
  data-menuorb-reservation
  data-key="SUA_CHAVE_PUBLICA"
  data-display="button"
  data-color="#4f46e5"
  data-label="Reservar agora"
  style="display: flex; justify-content: flex-end;"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

CSS avançado para o botão

O carregador cria um <button> dentro do contêiner. Adicione um ID e selecione o filho direto. Como o botão recebe estilos inline, use !important somente no que deseja substituir.

<style>
  #reserva-menuorb > button {
    min-width: 220px !important;
    padding: 16px 28px !important;
    font-size: 16px !important;
    letter-spacing: 0.01em;
  }
</style>

<div
  id="reserva-menuorb"
  data-menuorb-reservation
  data-key="SUA_CHAVE_PUBLICA"
  data-display="button"
  data-color="#0f766e"
  data-label="Consultar disponibilidade"
></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>

Trocar a chave pública

A chave começa com rw_live_ e foi criada para aparecer no código público do site. Ela identifica o restaurante, mas não concede acesso ao painel do proprietário.

Para conectar o código a outro restaurante:

1. Abra esse restaurante no MenuOrb.
2. Acesse Reservas > Configurações.
3. Copie a chave ou o código gerado.
4. Substitua somente o valor dentro de data-key="...".
5. Confirme que o site está autorizado no novo restaurante.
6. Limpe caches do site/CDN e teste uma reserva.

data-key="rw_live_CHAVE_DO_RESTAURANTE_ANTIGO"
data-key="rw_live_CHAVE_DO_NOVO_RESTAURANTE"

Cuidado

Girar chave é uma redefinição de segurança, não a forma normal de copiar a chave. A rotação invalida imediatamente todos os códigos e links antigos. Depois de girar, substitua a chave em todos os locais publicados.

Vários widgets na mesma página

É possível montar vários contêineres, mas carregue o script apenas uma vez e use a chave correta em cada um.

<div data-menuorb-reservation data-key="PRIMEIRA_CHAVE" data-display="button" data-label="Reservar no Centro"></div>
<div data-menuorb-reservation data-key="SEGUNDA_CHAVE" data-display="button" data-label="Reservar na Orla"></div>
<script async src="https://www.menuorb.com/widgets/menuorb-reservations.js"></script>