Incorporar o widget do Motor de reservas Guesty em um site externo

O Motor de Reservas Guesty funciona como um portal de reserva estático que permite aos hóspedes consultar a disponibilidade e finalizar suas estadias sem precisar acessar plataformas de terceiros. Ao incorporar este portal como um widget em um site pessoal, como Wix, WordPress ou Squarespace, você mantém uma experiência de marca consistente e elimina as taxas de distribuição de terceiros.

Se você tiver seu próprio domínio, poderá conectá-lo ao seu Motor de Reservas Guesty e usar o endereço do seu site.

Pré-requisitos

O widget de busca do Motor de Reservas Guesty utiliza JavaScript para funcionar. Certifique-se de que a plataforma do seu site e o plano de assinatura suportem JavaScript ou injeções de código personalizado antes de incorporar o widget. Por exemplo, o Squarespace exige o plano Business ou superior para usar injeções de JavaScript.

Integrar seu Motor de Reservas Guesty

Siga as instruções abaixo para integrar o widget do Motor de Reservas Guesty em um site externo.

Passo a passo:

1. Faça login na sua conta Guesty.
2. No menu de navegação lateral, clique em Marketing e vendas para abrir o menu suspenso.
3. Em Gestão de Canal, selecione Distribuição.
4. Clique na miniatura do Motor de Reservas Guesty.
5. Na linha correspondente do Motor de Reservas, clique em .
6. No menu suspenso, selecione Conectar ao seu próprio site.
7. Clique no ícone para copiar o trecho de código e colá-lo em seu site externo.

Estilização e comportamento de cores do widget

O widget de busca do Motor de reservas Guesty permite controlar as cores de destaque e seleção dos elementos de design por meio de um parâmetro color . Essa cor é definida automaticamente com base nas suas configurações de design do Motor de reservas .

Você pode editar manualmente o valor color no código de integração para personalizar a sua marca.

Formato de código de integração recomendado

Para manter a consistência nas cores, use sempre o código de integração mais recente. O código de integração será semelhante ao exemplo abaixo (seu código conterá suas configurações específicas):

<div id="search-widget_IO312PWQ">
  <script>
    !function(e,t,a,n,c,r){
      function s(t){e.console.log("[Guesty Embedded Widget]:",t)}
      var i,d,l,o,y,m,g,h,p,u;
      n&&(i=n,d=t.getElementsByTagName("head")[0],
      (l=t.createElement("link")).rel="stylesheet",
      l.type="text/css",l.href=i,l.media="all",d.appendChild(l)),
      o=function(){
        try{e[a].create(r).catch(function(e){s(e.message)})}
        catch(e){s(e.message)}
      },
      h=!1,y=c,
      m=function(){h||this.readyState&&"complete"!=this.readyState||(h=!0,o())},
      (g=t.createElement("script")).type="text/javascript",
      g.src=y,g.async="true",g.onload=g.onreadystatechange=m,
      p=g,(u=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,u)
    }(
      window,
      document,
      "GuestySearchBarWidget",
      "https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.css",
      "https://s3.amazonaws.com/guesty-frontend-production/search-bar-production.js",
      {
        "siteUrl":"libelulahomes.guestybookings.com",
        "color":"#e2c2a1"
      }
    );
  </script>
</div>

Solução de problemas