Add the online booking calendar to your website is vital for maximising your number of online reservations.
To do this, please follow the instructions below or in your Dineplan account. Alternatively, you can forward this email on to your webmaster.
If you have any questions regarding the instructions below, please don't hesitate to reach out to us at support@dineplan.com.
In all the examples below, the XXX is a placeholder and would need to be replaced with the unique widget key for your restaurant account. You can find this and similar instructions at Settings > Booking Widget Settings in your Dineplan dashboard.
.png?width=1200&upscale=true&name=Screenshot%202022-08-24%20at%2009.58.05%20(1).png)
Add the floating "Book Now" button to your website
Copy and paste the code snippet below into your website's header.
The first <script> tag is required and adds the Dineplan javascript file to your site.
The second <script> tag is optional and loads the floating "book now" button on every page.
<script src="https://public-prod.dineplan.com/widget/dineplan.widget.min.js">
</script>
<script type="text/javascript">
Dineplan.key = "XXX";
Dineplan.bgcolour = "#aaaaaa"; // Set the background colour of the button. Must be a 6 character hex colour.
Dineplan.fontcolour = "black"; // (black/white) font colour is automatically calculated based on the background colour but you can override this by using this setting.
Dineplan.ypos = "top"; // (top/bottom) align the button on the top or bottom of the page. Default is bottom.
Dineplan.xpos = "left"; // (left/right) align the button to the left or right of the page. Default is right.
Dineplan.xoffset = "100px;"; // sets an offset from the left/right side of the page. Default is 20px;
</script>
.png?width=1200&upscale=true&name=Screenshot%202022-08-24%20at%2012.39.12%20(1).png)
Add an inline calendar to any webpage
If you'd like to embed your booking calendar on to a webpage, copy and paste the snippet below onto the page where you'd like to display your booking calendar.
The required script tag from the step above must be added to the <head> tag of your website.
The snippet must be pasted into a custom code/HTML block.
The inline calendar requires a space of 260 x 365px.
<div class="dineplan-widget" data-key="XXX"></div>
.png?width=1200&upscale=true&name=Screenshot%202022-08-24%20at%2013.50.21%20(1).png)
Add a Dineplan "Book Now" button to any webpage
If you'd like to add our "Book Now" button to a page, copy and paste the snippet below wherever you'd like the button to display.
To change the button font and background colours, use the following data attributes and any hex codes of your choice:
data-color="#ffffff"
data-bgcolor="#000000"
<div class="dineplan-widget" data-key="XXX" data-type="button"></div>
Hyperlinking your own styled button or text link
You can also simply hyperlink with this URL: https://www.dineplan.com/widgetframe/XXX
You can also share this URL with anyone - it links directly to your online booking calendar.
Add your booking link to social media, Google and WhatsApp
Facebook
Go to your Facebook page.
Click on the 3 dots right below your cover photo.
Click "Edit Action Button", then click "Change Button".
Select the "Contact Us" option from the list. (Facebook has recently disabled the ability to have a "Book Now" button that links to a URL and this is, unfortunately, outside of our control.)
Paste this link into the box: https://www.dineplan.com/widgetframe/XXX?source=Facebook
Instagram
Go to your Instagram profile.
Click "Edit Profile"
Click "Links
In the "Website URL" field, paste the link below: https://www.dineplan.com/widgetframe/XXX?source=Instagram
Google Business Profile:
Sign in to your Google Business Profile Manager.
Open the "Info" tab in the main menu.
Scroll down to the URL section, where you will find a "Reservations URL" field.
Insert the below URL into that field.
https://www.dineplan.com/widgetframe/XXX?source=Google
Click "Apply".
WhatsApp Business:
Open the WhatsApp Business app.
Tap Settings > Business Tools > Away Message.
Turn on "Send away message".
Under "Message", edit the text to include a short message and your booking link: https://www.dineplan.com/widgetframe/XXX?source=WhatsApp
Tap "Save".
Tap "Schedule" to schedule your away message. Choose from the following options: Always send, custom schedule, or outside of business hours.
Tap "Recipients" to determine who should receive your away message.
Choose "Everyone"