<ws-motor>

Instalação

Inclua o script do widget e adicione a tag <ws-motor> na página. O elemento se posiciona automaticamente fixo na base da janela.

<!-- Carrega o custom element (registra <ws-motor>) -->
<script type="module" src="/caminho/para/ws-motor.js"></script>

<ws-motor
  api-key="SUA_API_KEY"
  hotel-id="23099"
  webhook="ID_DO_WEBHOOK"
  engine="omnibees"
  collect-contact-data
></ws-motor>

Atributos

Configuração via atributos HTML. Todos são opcionais, mas api-key, hotel-id e webhook são necessários para o fluxo completo de reserva.

Engines de reserva

A engine define para onde o hóspede é redirecionado após a reserva. Cada engine monta a URL a partir dos dados preenchidos.

omnibees (padrão)

Usa hotel-id e o código promocional digitado. Redireciona para o motor Omnibees.

https://book.omnibees.com/hotelresults?q={hotel-id}&CheckIn=DDMMYYYY
    &CheckOut=DDMMYYYY&ad={adultos}&ch={criancas}&ag={idades}&Code={promo}

foco

Usa engine-url como base. Barra final duplicada é removida.

{engine-url}/search/{checkin}/{checkout}/{adultos-idade1-idade2}
# ex.: https://chapadaindaia.com.br/search/2026-06-10/2026-06-12/2-3-5

hbook

Usa hotel-id como companyId. Datas em DD/MM/YYYY e um parâmetro childrenage por criança.

https://hbook.hsystem.com.br/Booking?companyId={hotel-id}
    &checkin=02/07/2026&checkout=03/07/2026
    &adults=2&children=2&childrenage=8&childrenage=2

Evento

Ao confirmar a reserva, o widget dispara reservation-submit (com bubbles e composed), permitindo interceptar o payload completo.

document.querySelector('ws-motor').addEventListener(
  'reservation-submit',
  (event) => {
    console.log(event.detail)
    // { name, email, phone, checkin, checkout, adults,
    //   childrens, ages, utm_source, utm_medium, utm_campaign,
    //   utm_term, utm_content, source_page, source_form, shubid }
  }
)

Os parâmetros utm_*, source_page e shubid são coletados automaticamente da URL e dos cookies da página.

Estilização

Toda a aparência é controlada por CSS Custom Properties definidas no seletor ws-motor. Sobrescreva apenas as que quiser — as demais mantêm o padrão.

Barra e controles — --ws-element-*

Popover de hóspedes — --ws-popover-*

Calendário — --ws-calendar-*

Exemplo de tema

O tema aplicado no widget ao vivo (fixo na base desta página). Copie e ajuste as cores para a sua marca.

ws-motor {
  --ws-element-bg: #002925;
  --ws-element-border: #003b35;
  --ws-element-divider: #003b35;
  --ws-element-control-bg: #ffffff26;
  --ws-element-control-border: #414141;
  --ws-element-control-text: #ffffff;
  --ws-element-input-bg: #ffffff;
  --ws-element-button-bg: #ff7a00;
  --ws-element-button-text: #ffffff;
  --ws-element-icon-color: #ffffff;
  --ws-element-text: #f3f3f3;
  --ws-calendar-selected-bg: #ff7a00;
  --ws-calendar-selected-text: #341e0a;
  --ws-calendar-range-bg: #fbdcbf;
}