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 Widget/HTML icon, then drag it on to your page where you want the booking widget to appear. When it is in the right spot, release your mouse button.
- Get your BookedIN Widget Code:
In a new browser window, sign in to your BookedIN account. Go to Settings > Integrate in the top menu.
Under Website Widget, you'll see a widget 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 widget HTML to your clipboard.
- Now go back to your 1&1 window. In the Widget / 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 widget code to center the widget on your webpage.)
- You will now see a message "The widget is only displayed in the page view, not in the editing mode." To view your widget in action, just hit the preview menu above.
- Nice work! Now go check out your fancy new booking calendar widget.
Having trouble with mobile?
You may need to adjust your 1&1 template settings to ensure the widget 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".