{"id":1398,"date":"2024-11-23T04:58:24","date_gmt":"2024-11-23T04:58:24","guid":{"rendered":"https:\/\/support-landing.altegio.cloud\/support\/4904709174173-adding-an-online-booking-button-to-your-website-customized-button\/"},"modified":"2026-03-25T16:38:09","modified_gmt":"2026-03-25T16:38:09","password":"","slug":"4904709174173-adding-an-online-booking-button-to-your-website-customized-button","status":"publish","type":"docs","link":"https:\/\/alteg.io\/en\/support\/knowledge-base\/4904709174173-adding-an-online-booking-button-to-your-website-customized-button\/","title":{"rendered":"Adding an online booking button to your website (customized button)"},"content":{"rendered":"\n

When all the online booking settings<\/strong> <\/a>are completed, add the online booking widget to the website. <\/span><\/p>\n\n\n\n

If you have already customized the online booking button design and want to open an online booking form by clicking the button, then this option is for you.<\/span><\/p>\n\n\n\n

\"web1.png\"\/\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n

<\/span>The online booking widget can be attached to any button on the company\u2019s website. Therefore, first of all, you need to paste the code of the button itself on the site:<\/span><\/p>\n\n\n\n

<code><a href=\"#\" class=\"ms_booking\">Online booking<\/a><\/code><\/span><\/code><\/pre>\n\n\n\n
Setup<\/h1>\n\n\n\n
    \n
  1. In the Administration <\/strong>mode go to <\/span>Online booking > Online booking links <\/strong>section.<\/span><\/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. Select the required form and click Set up <\/strong>button. If needed, create a new online booking form (learn more about in this article<\/a>).<\/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. In the window that opens, find the If you have your own website<\/strong> section and click Add a button <\/strong> \u2014 the button settings will appear.<\/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. Find the button code below. Copy the button code and place it before the closing <\/body> tag<\/strong> on every page of your 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
          The code looks like this:<\/p>\n\n\n\n
          <script type=\"text\/javascript\" src=\"https:\/\/w11782.alteg.io\/widgetJS\" charset=\"UTF-8\"><\/script>\n<\/code><\/pre>\n\n\n\n
          In this example, 11782<\/strong> is the unique identifier of a specific form.<\/p>\n\n\n\n
          <script type=\"text\/javascript\" src=\"\/\/w11782.alteg.io\/widgetJS\" charset=\"UTF-8\"><\/script>\n<\/code><\/pre>\n\n\n\n
          However, you need to make a small change to the code: remove https:<\/code><\/strong> and use the resulting version on the website.<\/p>\n\n\n\n
          You can also find the identifier for a specific form on the page Online Booking > Online booking links<\/strong> (more details in the article How to find the number (ID) of the online booking form (widget)<\/a><\/strong>). In your website template, the booking form code must be placed below<\/strong> the button code.<\/p>\n\n\n\n
            \n
          1. Uncheck Display button on the website<\/strong>. This setting controls the display of the standard round button. It is not required for a custom button. The checkbox is enabled automatically when you click Add a button to the website<\/strong>. If the checkbox is not enabled, the button settings menu will be hidden. After saving the settings and copying the code, you need to uncheck it.<\/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
            Important
            <\/strong>
            Do not use the sample code to install on your website. You must generate the code using the instructions above. Each code includes the unique ID of your online booking link.<\/p>\n<\/blockquote>\n\n\n\n
            <\/p>\n","protected":false},"excerpt":{"rendered":"
            When all the online booking settings are completed, add the online booking widget to the website.  If you have already customized the online booking button design and want to open an online booking form by clicking the button, then this option is for you. The online booking widget can be attached to any button on… Continue reading Adding an online booking button to your website (customized button)<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[70],"doc_tag":[1609],"class_list":["post-1398","docs","type-docs","status-publish","hentry","doc_category-adding-an-online-booking-to-website","doc_tag-online-booking-en","entry"],"aioseo_notices":[],"year_month":"2026-04","word_count":400,"total_views":"294","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 an online booking to website","term_url":"https:\/\/alteg.io\/en\/support\/knowledge-base\/categories\/adding-an-online-booking-to-website\/"}],"doc_tag_info":[{"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\/1398","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=1398"}],"version-history":[{"count":3,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1398\/revisions"}],"predecessor-version":[{"id":311227,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1398\/revisions\/311227"}],"wp:attachment":[{"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/media?parent=1398"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_category?post=1398"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_tag?post=1398"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}