Code/CSS
      Back to home
      1. Help Centre
      2. Widget
      3. Code/CSS

      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;

       

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

         1-Sep-27-2024-01-54-21-1696-AM

      2-Sep-27-2024-01-54-21-1901-AM 

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

      1. Height and width
      2. Background colour of widget
      3. 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>
      3
       
      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>

       4 

      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>

       

      5

       

      Example:

      <iframe allowtransparency="true" style="background: #ffff00;" src="https://booking-uat.nowbookit.com/booking?accountid=f9e261ca-cb75-43e7-be8e-f5b920dd1a77&venueid=000&theme=light&accent=254,193,7" frameborder="0" height="484" width="100%"></iframe>

      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>

      Related articles

      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