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:
- Open your 1&1 MyWebsite Editor. Once you're logged in, hit the Edit your 1&1 MyWebsite button.
- In the right-side panel, choose Settings > Edit Head Section. This is where you'll place the first part of the Bookedin code.
- In a new window, log in to your Bookedin web account then go to Settings > Integrate > Website Booking Calendar. 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. When you're happy with the fonts/colors, click Get code then select and copy the first part of the code.
- Switch back to 1&1 and paste the Bookedin code into the Edit Head Section then click Save.
- Now for that second part of the code. In 1&1, 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.
- Switch back to your Bookedin page, go to Settings > Integrate in the top menu. Select and copy the second portion of the Bookedin code.
- 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.)
- 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".