{"id":1525,"date":"2024-11-23T04:58:47","date_gmt":"2024-11-23T04:58:47","guid":{"rendered":"https:\/\/support-landing.altegio.cloud\/support\/4904989192733-adding-a-customized-online-booking-button-to-tilda\/"},"modified":"2025-12-30T10:47:00","modified_gmt":"2025-12-30T10:47:00","password":"","slug":"4904989192733-adding-a-customized-online-booking-button-to-tilda","status":"publish","type":"docs","link":"https:\/\/alteg.io\/en\/support\/knowledge-base\/4904989192733-adding-a-customized-online-booking-button-to-tilda\/","title":{"rendered":"Adding a customized online booking button to Tilda"},"content":{"rendered":"\n

Setting up a regular button<\/strong><\/p>\n\n\n\n

    \n
  1. In the Block Library, choose the Form and Button<\/strong> type and add a Button<\/strong>.<\/li>\n\n\n\n
  2. In the block Content<\/strong>, change the button name to, for example, Book<\/strong>. In the Button link<\/strong> field, enter the #<\/strong> sign.<\/li>\n\n\n\n
  3. Save and close<\/strong> the block.<\/li>\n<\/ol>\n\n\n\n
      <\/ol>\n\n\n\n
      \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

      Setting up a button from a Zero Block<\/strong><\/p>\n\n\n\n

        \n
      1. Add a Zero Block<\/strong>, click Edit block<\/strong>, and then add a button (Add Button<\/strong>).<\/li>\n\n\n\n
      2. Configure the button: click it and, in the menu that opens on the right, set all required parameters (name, color, font, etc.).<\/li>\n\n\n\n
      3. In the Link<\/strong> field, enter the #<\/strong> sign.<\/li>\n\n\n\n
      4. Save and close the block editing window (Save > Close<\/strong>).<\/li>\n<\/ol>\n\n\n\n
        \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
          \n
        1. After the last block, add an HTML<\/strong> block. In the block Content<\/strong>, add the following code and save it.<\/li>\n<\/ol>\n\n\n\n
          <script type=\"text\/javascript\">\n$(document).ready(function() {\n$('.CLASS').addClass('ms_booking');\nvar scriptService = document.createElement('script');\nscriptService .src = \"link from the Button code menu\";\nscriptService .type = \"text\/javascript\";\nscriptService .charset = \"UTF-8\";\ndocument.documentElement.appendChild(scriptService );\n});\n<\/script>\n<\/code><\/pre>\n\n\n\n
            \n
          1. Where CLASS<\/strong> is the value of the class<\/strong> field from the button code, and link from the Button code menu<\/strong> is the value from the Altegio online booking form (how to find this data is explained below).<\/li>\n<\/ol>\n\n\n\n
            \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
              \n
            1. Go to the published website and right-click the online booking button, then select Inspect<\/strong> (or View page source \/ Inspect code<\/strong>). Copy the contents of the class<\/strong> field:
              t-btn t142__submit<\/code>
              and paste it into the HTML code you added earlier, replacing the word CLASS<\/strong> \u2014 not as just t-btn t142__submit<\/code>, but as:<\/li>\n<\/ol>\n\n\n\n
              .t-btn.t142__submit<\/code><\/p>\n\n\n\n
              The class<\/strong> value for your button may differ from the example in this instruction.<\/p>\n\n\n\n
              \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
                \n
              1. In Altegio, in the main menu go to Online Booking > Online booking links<\/strong>. Select the required online booking form. More details on where to find the online booking button code are available in the Button settings<\/strong> <\/a>article<\/a>.<\/strong><\/li>\n<\/ol>\n\n\n\n
                In the Button code<\/strong> field, copy the link (as shown in the example below) and paste it instead of the words \u201clink from the Button code menu\u201d<\/strong> in the HTML code you added earlier.<\/p>\n\n\n\n
                  \n
                1. Click Save and close<\/strong>, then publish the website.<\/li>\n<\/ol>\n\n\n\n
                  \"\"\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n
                  \n
                  If the Altegio widget is triggered by a button from the main menu (for example, the ME403<\/strong> block can display a button in the dropdown menu), then the value in the class<\/strong> field will most likely be t-btn<\/strong>. In this case, everything will work correctly.<\/p>\n\n\n\n
                  But if you add an Altegio button in any Zero Block, the class<\/strong> value will be tn-atom<\/strong>. The same tn-atom<\/strong> value will be used for all other buttons and hyperlinks in all Zero Blocks. That means if, besides the Altegio button, a Zero Block contains, for example, a clickable phone number, email, or another link, clicking them will also trigger the Altegio widget instead of the intended action.<\/p>\n\n\n\n
                  This can be solved with layout changes: remove buttons from Zero Blocks and place a native block with the BF101<\/strong> button directly under them.<\/p>\n<\/blockquote>\n\n\n\n
                  <\/p>\n","protected":false},"excerpt":{"rendered":"
                  Setting up a regular button Setting up a button from a Zero Block .t-btn.t142__submit The class value for your button may differ from the example in this instruction. In the Button code field, copy the link (as shown in the example below) and paste it instead of the words \u201clink from the Button code menu\u201d… Continue reading Adding a customized online booking button to Tilda<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[71],"doc_tag":[2071,1609],"class_list":["post-1525","docs","type-docs","status-publish","hentry","doc_category-adding-online-booking-to-popular-cms","doc_tag-integrations-en","doc_tag-online-booking-en","entry"],"aioseo_notices":[],"year_month":"2026-04","word_count":485,"total_views":"279","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"ivan.k","author_nicename":"altegio","author_url":"https:\/\/alteg.io\/en\/author\/altegio\/"},"doc_category_info":[{"term_name":"Adding online booking to popular CMS","term_url":"https:\/\/alteg.io\/en\/support\/knowledge-base\/categories\/adding-online-booking-to-popular-cms\/"}],"doc_tag_info":[{"term_name":"Integrations","term_url":"https:\/\/alteg.io\/en\/support\/knowledge-base\/docs-tag\/integrations-en\/"},{"term_name":"Online Booking","term_url":"https:\/\/alteg.io\/en\/support\/knowledge-base\/docs-tag\/online-booking-en\/"}],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1525","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/comments?post=1525"}],"version-history":[{"count":6,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1525\/revisions"}],"predecessor-version":[{"id":233686,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1525\/revisions\/233686"}],"wp:attachment":[{"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/media?parent=1525"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_category?post=1525"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_tag?post=1525"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}