{"id":1257,"date":"2024-11-23T04:58:01","date_gmt":"2024-11-23T04:58:01","guid":{"rendered":"https:\/\/support-landing.altegio.cloud\/support\/4897209017757-customizing-the-new-online-booking-widget\/"},"modified":"2026-03-25T11:42:02","modified_gmt":"2026-03-25T11:42:02","password":"","slug":"4897209017757-customizing-the-new-online-booking-widget","status":"publish","type":"docs","link":"https:\/\/alteg.io\/en\/support\/knowledge-base\/4897209017757-customizing-the-new-online-booking-widget\/","title":{"rendered":"Online booking design customization"},"content":{"rendered":"\n

In Altegio, you can set any interface color, customize the widget design to match your brand, and add a logo and images.<\/strong><\/p>\n\n\n\n

Color settings<\/h2>\n\n\n\n

To set widget colors in Altegio:<\/p>\n\n\n\n

    \n
  1. In the Administration<\/strong> mode, go to Online booking > Online booking links<\/strong>.<\/li>\n<\/ol>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
      \n
    1. Select the required online booking link<\/strong> and click its name or the Set up<\/strong> button to open editing mode.<\/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 Online booking design<\/strong> section.<\/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. Choose the preferred widget theme \u2014 light<\/strong> or dark<\/strong>.<\/li>\n\n\n\n
        2. Select a suitable color for buttons and icons from the palette, or enter a HEX color value.<\/strong><\/li>\n<\/ol>\n\n\n\n

          By default, the widget is set to black #060F07<\/strong>. You can always restore it by clicking Restore default color<\/strong>.<\/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

          If the selected color has low contrast, text and UI elements may be hard to see. In that case, an error warning will appear: \u201cLow contrast of elements. Choose a lighter or darker shade.\u201d<\/strong> You won\u2019t be able to save and apply that color in the widget.<\/p>\n\n\n\n

          Uploading an image to the first screen<\/h2>\n\n\n\n

          To upload an image to the first screen of the widget:<\/p>\n\n\n\n

            \n
          1. Go to Online booking > Online booking links<\/strong>.<\/li>\n\n\n\n
          2. Select the required link and click its name or Set up<\/strong> to open editing mode.<\/li>\n\n\n\n
          3. To upload an image for the first screen, click Upload image<\/strong>. In the window that opens, find the Online booking design<\/strong> section.<\/li>\n\n\n\n
          4. In the upload form, select an image from your device, adjust the size if needed, then click Save<\/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

            Uploading a logo<\/h2>\n\n\n\n

            To upload a logo that will be displayed in the online booking link:<\/p>\n\n\n\n

              \n
            1. Go to Online booking > Settings<\/strong> and open the Brand<\/strong> block.<\/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. Upload an image in the logo field and save changes.<\/li>\n<\/ol>\n\n\n\n
                  \n
                1. Recommended resolution: 500\u00d7500 px<\/strong>. Maximum file size: 12 MB<\/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

                  The image format for the widget\u2019s first screen is 16:9<\/strong>.<\/p>\n\n\n\n

                  The uploaded image will be shown in the header for any online booking scenario (Menu, Step-by-step, Short step-by-step for individual booking, as well as group and mixed booking) on the first page.<\/p>\n<\/blockquote>\n\n\n\n

                  For mixed booking, the image will appear on the booking type selection page, on the first page of individual booking, and on the event selection page.<\/p>\n\n\n\n

                  After finishing the setup, open your widget using the link at the top of the page and check how the uploaded images are displayed.<\/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

                  <\/p>\n","protected":false},"excerpt":{"rendered":"

                  In Altegio, you can set any interface color, customize the widget design to match your brand, and add a logo and images. Color settings To set widget colors in Altegio: By default, the widget is set to black #060F07. You can always restore it by clicking Restore default color. If the selected color has low… Continue reading Online booking design customization<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[66],"doc_tag":[1609],"class_list":["post-1257","docs","type-docs","status-publish","hentry","doc_category-new-online-booking-widget","doc_tag-online-booking-en","entry"],"aioseo_notices":[],"year_month":"2026-04","word_count":380,"total_views":"309","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":"New online booking widget","term_url":"https:\/\/alteg.io\/en\/support\/knowledge-base\/categories\/new-online-booking-widget\/"}],"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\/1257","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=1257"}],"version-history":[{"count":3,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1257\/revisions"}],"predecessor-version":[{"id":310480,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/docs\/1257\/revisions\/310480"}],"wp:attachment":[{"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/media?parent=1257"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_category?post=1257"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/alteg.io\/en\/support\/wp-json\/wp\/v2\/doc_tag?post=1257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}