1&1 Website Booking Calendar

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 website. This is done by copying & pasting in 2 parts of code. Here are the steps:

1. First up, log in to your Bookedin web account
2. Go to Settings > Integrate then under Website Booking Calendar you'll see some options. Choose a font and theme/background color 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.
   
3. When you're happy with the fonts/colors, select and copy the first part of the code. See below.
   
4. In a new browser window, open your 1&1 MyWebsite Editor. Once you're logged in, hit the Edit your 1&1 MyWebsite button. 
5. In the right-side panel, choose Settings > Edit Head Section. This is where you'll place the first part of the Bookedin code. 
   
7. Switch back to 1&1 and paste the 1st part of Bookedin code into the Edit Head Section then click Save.
   
8. Now for the 2nd part of the code. In 1&1, choose the Insert Elements button from the right-side menu
9. Click & hold the Widget/HTML icon, then drag it on to your page where you want the booking Website Booking Calendar to appear. 
   
10. Switch back to your Bookedin window, then select and copy the 2nd part of the Bookedin code. See below.
    
11. Switch back to 1&1. In the Website Booking Calendar / HTML text area you just created, paste the code that you copied from Bookedin, then hit save. (Bonus tip! Add a <center> tag before and a </center> tag after the Bookedin code to center things nicely on your webpage.)
    
12. 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. 
    
13. Nice work! Now go check out your fancy new booking calendar website booking calendar. 

Mobile preview:

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". 
Desktop preview: