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, for example, “Make an appointment”. 
• In the Button link field specify the # sign. Save and close the block.

Setting a button from the zero block

• In the Block Library select a Zero block, click the Block editor button. 
• Then click + button in the top left corner and select Add Button. 
• Configure the button. Click it and using the right sidebar set all the necessary parameters: name, color, font, etc. 
• In the URL field, enter the # sign. Save and close the block editing window.

2. When the required block for the button is added, add the HTML block. In the Content block paste the following code and save.

<script type="text/javascript">

$(document).ready(function() {

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

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

scriptService .src = "Link from the Button code tab”;

scriptService .type = "text/javascript”;

scriptService .charset = "UTF-8”;

document.documentElement.appendChild(scriptService );

});

</script>

“CLASS” is the value of the class field from the button code. “Link from Button code tab” is the value from the Altegio 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:

Example: t-btn t142__submit

Paste it in the HTML code that you have added earlier instead of the word CLASS. Add 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 Altegio go to Online booking > Online booking widget. Select the required online booking form. In the newly opened window go to the Button settings tab and disable the creation of a round button by default, to do this, uncheck the Button activation box (see more details in 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 tab in the HTML code you added earlier.

Click Save and close, publish the site. 

Note

If the Altegio 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 Altegio 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 means if in addition to the Altegio button in the zero-block there is, for example, a phone number, e-mail, or another link, then the Altegio 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.