Widget Modifications and iFrames

How to add a widget to your website and/or make modifications to it

This is a very high level over view of iFrames and how they work, If you do not manage your website yourself, please hand this information on to you web developer.

Guide for widget modifications and iFrames

iFrames allow for you to surface the booking or gift card widget with in your own website. The widget only has a number of editable functions available, these are listed below;

In the Now Book It Admin console you can edit your over all Theme and Colour

Via your own website and in the iFrame you can edit the below

Height and width
Background colour of widget
RGB colours

Changing Height and Width:

To change the height and width of your iFrame see the below examples:

<iframe src="https://[ nowbookit widget link]" width="[WIDTH OF IFRAME]" height="[HEIGHT OF IFRAME]" style="border:none;"></iframe>

Example code:

<iframe src="https://booking-uat.nowbookit.com/booking?accountid=f9e261ca-cb75-43e7-be8e-f5b920dd1a77&venueid=000&theme=light&accent=254,193,7" width="60%" height="730" frameborder="0"></iframe>

iFrame sizing chart:

Because there are various sizes and configurations of the make a reservation widget the iFrame should have dimensions similar to the following values.

Below are some recommended dimensions for the iFrame itself:

Standard - 840 x 440
Tall - 840 x 560
Wide - 890 x 300 (Note: Do not use this setting if you care about the mobile responsiveness of your website)

Changing RGB code of widget:

To change the colour of your widget you can also edit the RGB numbers that are at the end of your widget link shown below:

<iframe src="http://[ nowbookit widget linktheme=light&accent=[These numbers that are here will change the RGB of your widget]" width="100%" height="484" style="border:none;"></iframe>

Example code:

<iframe src="https://booking-uat.nowbookit.com/booking?accountid=f9e261ca-cb75-43e7-be8e-f5b920dd1a77&venueid=000&theme=light&accent=193,1,7" width="60%" height="730" frameborder="0"></iframe>

Changing background colour of widget:

You can change the background colour of the widget also to match your websites colour scheme by adding the below code to the iFrame:

Backgrounds can also be transparent and take on the theme of your website.

<iframe allowtransparency="true" style="background:[ insert Hex colour];" src="[nowbookit it widget link]" frameborder="0" height="484" width="100%"></iframe>

Example:

iFrame Scroll bars

If scroll bars are not appearing automatically with your widgets iFrame, you may need to add the following code to your iFrame:

You can always remove the scroll bars also by changing the code to "No".

<p>An iframe where scrollbars are always shown:</p>
<iframe src="/default.asp" width="200" height="200" scrolling="Yes">
</iframe>

<p>An iframe where scrollbars are automatically added if required due to size:</p>
<iframe src="/default.asp" width="200" height="200" scrolling="auto">
</iframe>

RGB and Hex Colour Picker - This can help you select the RGB and Hex colour you would like for your widget

Code Editor -Test your code in here to view all modifications