{"id":1356,"date":"2024-11-23T04:58:17","date_gmt":"2024-11-23T04:58:17","guid":{"rendered":"https:\/\/support-landing.altegio.cloud\/support\/4904706917661-adding-an-online-booking-button-to-your-website-button-from-altegio\/"},"modified":"2026-03-25T16:05:45","modified_gmt":"2026-03-25T16:05:45","password":"","slug":"4904706917661-adding-an-online-booking-button-to-your-website-button-from-altegio","status":"publish","type":"docs","link":"https:\/\/alteg.io\/en\/support\/knowledge-base\/4904706917661-adding-an-online-booking-button-to-your-website-button-from-altegio\/","title":{"rendered":"Adding an online booking button to your website"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">When all the <\/span><a href=\"https:\/\/alteg.io\/support\/support\/en\/knowledge-base\/categories\/online-booking-settings\/\" target=\"_blank\" rel=\"noopener noreferrer\"><strong>online booking settings<\/strong><\/a><span style=\"font-weight: 400;\"> <\/span><span style=\"font-weight: 400;\">are completed, add the online booking widget to the website. There are several ways to set up a button.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Here you can learn how to set up a standard round button with the <\/span><strong>Online booking<\/strong><span style=\"font-weight: 400;\"> <\/span><span style=\"font-weight: 400;\">header. The color, animation, and location of the button can be edited and customized. <\/span><em><span style=\"font-weight: 400;\">\u00a0<\/span><\/em><span style=\"font-weight: 400;\">\u00a0<\/span><\/p>\n\n\n\n<h1 class=\"wp-block-heading\" id=\"h_01HJ6AKE2DG9EQPN71M2MKB3NN\">Setup<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">In the <strong>Administration<\/strong> mode go to <strong>Online booking > Online booking links<\/strong>. <\/span><\/li>\n<\/ol>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ddf19c91fb7&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ddf19c91fb7\" class=\"wp-block-image size-full wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"390\" height=\"356\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.45.11.png\" alt=\"\" class=\"wp-image-226579\" srcset=\"https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.45.11.png 390w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.45.11-300x274.png 300w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.45.11-360x329.png 360w\" sizes=\"auto, (max-width: 390px) 100vw, 390px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Select the required form <\/span>and click <strong>Set up <\/strong>button. If needed, create a new online booking form (learn more about in this <strong><a href=\"https:\/\/alteg.io\/en\/support\/knowledge-base\/4903629490205-online-booking-setup-and-options\/\">article<\/a>).<\/strong><\/li>\n<\/ol>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ddf19c92825&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ddf19c92825\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"580\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07-1024x580.png\" alt=\"\" class=\"wp-image-226600\" srcset=\"https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07-1024x580.png 1024w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07-300x170.png 300w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07-768x435.png 768w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07-1536x871.png 1536w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07-360x204.png 360w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07-1568x889.png 1568w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.48.07.png 1810w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Scroll to the <strong>Website b<\/strong><\/span><strong>utton section<\/strong><span style=\"font-weight: 400;\">&nbsp;and make the necessary settings:<\/span><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\"><strong>location;<\/strong><\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>colour;<\/strong><\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\"><strong>check\/uncheck animation<\/strong><\/span><\/li>\n<\/ul>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ddf19c93013&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ddf19c93013\" class=\"wp-block-image size-large wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"389\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-1024x389.png\" alt=\"\" class=\"wp-image-226624\" srcset=\"https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-1024x389.png 1024w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-300x114.png 300w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-768x292.png 768w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-1536x584.png 1536w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-2048x778.png 2048w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-360x137.png 360w, https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/11\/Screen-Shot-2025-12-23-at-12.49.41-1568x596.png 1568w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Locate the <strong>Button code<\/strong> field within this section. Copy the button code and place it before the closing <strong>&lt;\/body&gt; tag <\/strong>on each page of the website.&nbsp;<\/span><\/li>\n<\/ol>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69ddf19c93198&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69ddf19c93198\" class=\"wp-block-image wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/alteg.io\/support\/wp-content\/uploads\/2024\/12\/15624620868637-1000x659.png\" alt=\"\"\/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Code example:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">&lt;script type=\"text\/javascript\" src=\"https:\/\/w334915.alteg.io\/widgetJS\" charset=\"UTF-8\"&gt;&lt;\/script&gt;<\/span><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Installation example:<\/strong><\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\"><span style=\"font-weight: 400;\">&lt;html&gt;<\/span><br><br><span style=\"font-weight: 400;\">&lt;head&gt;<\/span><br><span style=\"font-weight: 400;\">&lt;title&gt;Website name&lt;\/title&gt;<\/span><br><span style=\"font-weight: 400;\">&lt;meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\"\/&gt;<\/span><br><span style=\"font-weight: 400;\">&lt;\/head&gt;&lt;p&gt;<\/span><br><br><span style=\"font-weight: 400;\">&lt;body&gt;<\/span><br><span style=\"font-weight: 400;\">&lt;&lt;span class=\"speller-hint\" data-toggle=\"popover\" data-hint=\"2\" data-original-title=\"\" title=\"\"&gt;span&lt;\/span&gt; class=\"wysiwyg-color-red\"&gt; &lt;script type=\"text\/javascript\" src=\"https:\/\/w12348.alteg.io\/&lt;span class=\"speller-hint\" data-toggle=\"popover\" data-hint=\"3\" data-original-title=\"\" title=\"\"&gt;widgetJS&lt;\/span&gt;\" charset=\"UTF-8\"&gt;&lt;\/script&gt;&lt;\/span&gt;<\/span><br><span style=\"font-weight: 400;\">&lt;\/body&gt;<\/span><br><br><span style=\"font-weight: 400;\">&lt;\/html&gt;&lt;\/p&gt;<\/span><\/pre>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li>At the end, be sure to click the <strong>Save<\/strong> button at the bottom to apply all your changes.<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><span class=\"wysiwyg-font-size-large\"><strong>Important<\/strong><\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\"><strong>Do not use the code from the example to install on your website.<\/strong> The code could be obtained according to the instructions above.<\/span><\/p>\n<\/blockquote>\n\n\n\n<p>Uncheck <strong>Show button on the website<\/strong> if you want to disable the default floating round button. For example, if you\u2019ve already customized the design of the online booking button yourself or want to place multiple online booking buttons on the same page.<\/p>\n\n\n\n<p>Read more in these articles:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong><a href=\"https:\/\/alteg.io\/en\/support\/knowledge-base\/4904709174173-adding-an-online-booking-button-to-your-website-customized-button\/\">Placing online booking on a website (custom button)<\/a><\/strong><\/li>\n\n\n\n<li><strong><a href=\"https:\/\/alteg.io\/en\/support\/knowledge-base\/4904712088477-adding-several-online-booking-widgets-to-one-page\/\">Adding multiple widgets to one page<\/a><\/strong><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>When all the online booking settings are completed, add the online booking widget to the website. There are several ways to set up a button. Here you can learn how to set up a standard round button with the Online booking header. The color, animation, and location of the button can be edited and customized.&hellip; <a class=\"more-link\" href=\"https:\/\/alteg.io\/en\/support\/knowledge-base\/4904706917661-adding-an-online-booking-button-to-your-website-button-from-altegio\/\">Continue reading <span class=\"screen-reader-text\">Adding an online booking button to your website<\/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-1356","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":354,"total_views":"317","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\/1356","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=1356"}],"version-history":[{"count":3,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1356\/revisions"}],"predecessor-version":[{"id":311224,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1356\/revisions\/311224"}],"wp:attachment":[{"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/media?parent=1356"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_category?post=1356"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_tag?post=1356"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}