Adicionando um botão de reserva online personalizado ao Tilda

 

1. Adicione um botão para reserva online e publique o site.

Botão geral

  • Na biblioteca de blocos selecione o formulário e o botão, adicione um botão.
  • No bloco Content, altere o nome do botão, por exemplo, “Marcar um compromisso”.
  • No campo de link button especifique o sinal #. Salve e feche o bloco.

Configurando um botão do bloco zero

2. Na Biblioteca de Blocos selecione um bloco Zero, clique no botão Editor de bloco.

  • Em seguida, clique + botão no canto superior esquerdo e selecione Adicionar botão.
  • Configure o botão. Clique nele e usando a barra lateral direita defina todos os parâmetros necessários: nome, cor, fonte, etc.
  • No campo URL, insira o sinal #. Salve e feche a janela de edição do bloco.

3. Quando o bloco necessário para o botão for adicionado, adicione o bloco HTML. No bloco de conteúdo cole o seguinte código e salve.

<script type="text/javascript">

$(document).ready(function() {

$('.CLASS').addClass('ms_booking');

var scriptService = document.createElement('script');

scriptService .src = "Link da guia Código do botão";

scriptService .type = "text/javascript”;

scriptService .charset = "UTF-8”;

document.documentElement.appendChild(scriptService );

});

</script>

“CLASS” é o valor do campo de classe do código do botão. “Link da guia Código do botão” é o valor do formulário de reserva on-line do Altegio (leia mais abaixo).

4. Vá ao site publicado e clique no botão para reserva online, selecione o item Ver código. Copie o conteúdo do campo de classe:

Exemplo: t-btn t142__submit

Cole-o no código HTML que você adicionou anteriormente em vez da palavra CLASS. Adicione não apenast-btn t142__submit, mas.t-btn.t142__submit

O valor do campo de classe do seu botão pode ser diferente do exemplo nesta instrução.

5. Em Altegio go to Online booking > Widget de reserva online. Selecione o formulário de reserva online necessário. Na janela recém-aberta vá para a aba Configurações do botão e desative a criação de um botão redondo por padrão, para isso, desmarque a caixa Ativação do botão (veja mais detalhes em Configurações do botão).

Vá para a guia de código do botão e copie o link (como mostrado no exemplo abaixo), cole-o em vez das palavrasLink da guia de código do botão no código HTML que você adicionou anteriormente.

Clique em Salvar e feche, publique o site.

Observação

Se o botão Altegio estiver no menu principal (por exemplo, o bloco ME403 tem a capacidade de exibir um botão no menu expandido), então o valor no campo de classe provavelmente será bet-btn. Tudo funcionará corretamente.

Mas se você adicionar um botão para Altegio em qualquer bloco zero, o valor do campo de classe será betn-atom. O sametn-atomvalue estará em todos os outros botões e hiperlinks em todos os blocos zero. Isso significa que se além do botão Altegio no bloco zero houver, por exemplo, um número de telefone, e-mail ou outro link, o widget Altegio também estará neles, e não o que deveria estar.

O problema pode ser resolvido por fatiamento: retire os botões dos blocos zero e coloque o bloco nativo com o botão BF101 imediatamente abaixo deles.

Comentários