Installing a customized online booking button to Tilda

1. Add a button that will be a button for online booking and publish the site.

General button

In the Block Library, select the form and button, add a Button.

In the block Content, change the name of the button, specify, for example, make an appointment. In the Link for button field, specify the # sign. Save and close the block.

Setting a button from the zero block

Add a Zero block, click the Edit block button, and then add the Add Button. Configure the button, for this click on it and in the menu that opens on the right, set all the necessary parameters: name, color, font, etc. In the Link field, enter the # sign. Save and close the block editing window.

2. After the last block, add the HTML block. In the Content block, add the following code, save.

<script type="text/javascript">
$(document).ready(function() {
$('.CLASS').addClass('ms_booking');
var scriptService = document.createElement('script');
scriptService .src = "ссылка из меню Код кнопки";
scriptService .type = "text/javascript";
scriptService .charset = "UTF-8";
document.documentElement.appendChild(scriptService );
});
</script>

where CLASS is the value of the class field from the button code, the link from the menu Button code is the value from the YCLIENTS online booking form (read more below).

3. Go to the published site and click on the button for online booking, select the View code item. Copy the contents of the class field

t-btn t142__submit

and paste in the HTML code that you added earlier, instead of the word CLASS, not just t-btn t142__submit, but

.t-btn.t142__submit

The value of the class field of your button may differ from the example in this instruction.

4. In YCLIENTS, in the main menu, go to Online booking - Website. Select the desired online booking form. In the new window that opens, go to the Button Settings tab and disable the creation of a round button by default, to do this, uncheck the Enable button box (for more details, see Button settings).

Go to the Button Code tab and copy the link (as shown in the example below), paste it instead of the words Link from the Button Code menu in the HTML code you added earlier.

Click Save and close, publish the site. 

Note

If the YCLIENTS button will be in the main menu (for example, the ME403 block has the ability to display a button in the expanded menu), then the value in the class field will most likely be t-btn. Everything will work correctly. 

But if you add a button for YCLIENTS in any zero-block, then the value of the class field will be tn-atom. The same tn-atom value will be on all other buttons and hyperlinks in all zero-blocks. That is, if in addition to the YCLIENTS button in the zero-block there is, for example, a phone number, e-mail, or another link, then the YCLIENTS widget will also be on them, and not what was supposed to be.

The issue can be solved by slicing: remove the buttons from the zero-blocks and put the native block with the BF101 button immediately below them.

 

 

 

 

 

 

 

 

 

 

 

Have more questions? Submit a request

Comments