You can easily embed an online booking calendar into your 1&1 website. Clients can then book appointments and pay an up-front payment directly within your site.
- Open your 1&1 MyWebsite Editor. Once you are logged in, hit the Edit your 1&1 MyWebsite button.
- Choose the Insert Elements button from the right-side menu
- Click & hold the Website Booking Calendar/HTML icon, then drag it on to your page where you want the booking Website Booking Calendar to appear. When it is in the right spot, release your mouse button.
- Get your BookedIN Website Booking Calendar Code:
In a new browser window, sign in to your BookedIN account. Go to Settings > Integrate in the top menu.
Under Website Booking Calendar, you'll see a website booking calendar preview. Choose a theme, font, and background, using the drop-down menus. If you want to use a custom color, just choose the custom theme and use the color-picker or enter a HEX value.
Hit Get Code, then Copy Code to copy the website booking calendar HTML to your clipboard.
- Now go back to your 1&1 window. In the Website Booking Calendar / HTML text area you just created, paste the code that you copied from BookedIN, then hit save.
(Bonus tip! You may want to add a <center> tag before and a </center> tag after the website booking calendar code to center the website booking calendar on your webpage.)
- You will now see a message "The website booking calendar is only displayed in the page view, not in the editing mode." To view your website booking calendar in action, just hit the preview menu above.
- Nice work! Now go check out your fancy new booking calendar website booking calendar.
Having trouble with mobile?
You may need to adjust your 1&1 template settings to ensure the website booking calendar appears on mobile devices. Go to your 1&1 website Settings (gear icon in right-hand menu) then Mobile Website, then un-check the option called "only display optimized content on smartphones and tablets".