1&1 Booking Button
Easily add an online appointment booking button to your 1&1 website in just a few steps. This is done by copying and pasting 2 parts of code into your 1&1 website.
(Click here for how to embed your full calendar.)
- First up, log in to your Bookedin account or create a new one
- Go to Settings > Integrate in the top menu. Then under Website Button you'll see some options. Choose a button size and color from the drop-downs.
If you choose the custom color option, you can use any color you wish, or input a HEX color value. Ex #fe5000.
- When you're happy with the look of your button, click Get Code. You'll see the below screen with 2 boxes containing code. Select and copy the first part of the code.
- In a new browser window, 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 1st part of the Bookedin code.
- Now paste the 1st part of Bookedin code into the Edit Head Section then click Save.
- Now for the 2nd part of the Bookedin button code. In 1&1, 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 button to appear.
- Switch back to your Bookedin window, then select and copy the 2nd part of the code.
- Now go back to your 1&1 editor window. In the Widget / HTML text area you just created, paste the 2nd part of the code from Bookedin, then hit save.
- You will see a message "The widget is only displayed in the page view, not in the editing mode." To view your button, just hit the preview menu above.
- Nice work! You will now see your fancy new booking button.
Having trouble with mobile?
You may need to adjust your 1&1 template settings to ensure the button 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".