Skip to main content

Embed Your Booking Page in a Website

Updated

Use one of our embed options to add your YCBM page to a site. When an embed type is selected, a script will be dynamically generated based on your preferences. The scripts can then be directly copied and pasted right onto your website. 

This feature is available on all our plans (including the Free plan). 

 

Watch a quick video demonstration on embedding your YCBM page in a website. 

In the article: 

How to use your YCBM Embed Script 

1. To locate your embed script, click on Share in the booking page settings or directly from the dashboard, and then navigate to the embed tab.Share

This will bring up three options: Inline embed, Inline link or Floating button. 

Embed options.png

2. The Inline embed option provides a script to share your booking page availability directly on your website. Simply copy the code in the modal. You'll paste this code into the area of your website that supports embedding content. 

3. To use a text line or a button link, use the Inline link embed option. inlinelink.png Or, you can use the use the Inline button embed option. inlinebutton.png

4. Use the Floating button option to add a floating button that opens your booking page as a pop-up on your website. 

Floatingbutton.png

In most cases, that's all you need to do. If you'd like to configure the embed further, keep reading! 

 

About the embed script

The embed script is customizable to suit your website and your display preferences.

The basic script, which includes a full display of your whole booking page look like this:

<script
  src="https://embed.youcanbook.me"
  async="true"
  data-domain="mysubdomain"
  data-content="all">
</script>

There are some attributes that can't be changed as they are integral to how the embed works. They are:

src="https://embed.youcanbook.me" async="true"

 

Additional Attributes

To further optimize and customize the elements added to the user's webpage, we created some additional attributes. Most of these attributes can be easily added using the new embed settings, which we will explore further in this section.

The attributes that can be used for this use cases are as follow:

  • data-type

    • inline: This is also the default embed when no data-type attribute is set. It replaces the script in the customer's HTML with an embedded YouCanBookMe script, displaying it directly on their website.

    • text-link: This replaces the script in the customer's HTML with a link. When clicked, a modal opens on their website, displaying the booking page.

      • The created link will have minimal CSS styles, allowing for customization to better fit the desired appearance.

    • button-link: This replaces the script in the customer's HTML with a button. When clicked, a modal opens on their website, displaying the booking page.

      • The created button will have minimal CSS styles (border-radius, default color $\colorbox{2a9d8f}{\#2a9d8f}$ ) allowing for customization to better fit the desired appearance.

    • button-floating: This replaces the script in the customer's HTML with a floating button that has a fixed position. When clicked, a modal opens on their website, displaying the booking page.

      • The created button will have minimal CSS styles (border-radius, default color $\colorbox{2a9d8f}{\#2a9d8f}$ , boxShadow ) allowing for customization to better fit the desired appearance.

    • data-innertext

      • When not provided the text will default to Schedule a meeting. This text will be text used for the created link or button, according to the data-type attribute in use.

      • It only accepts valid characters for different languages. No special characters such as <>.!$%… are accepted and will be sanitized.

  • data-buttonposition

    • This attribute only has any effect when used along the data-type attribute button-floating . Depending on this attribute, the button will be fixed at different positions on the webpage. When no attribute is set the default value will always be considered bottomRight. The accepted values are as follows:

      • bottomLeft

      • bottomRight

      • topLeft

      • topRight

  • data-buttonicon

    • This attribute only has any effect when used along the data-type attribute button-floating or button-link. Depending on this attribute, the button will have a different icon. When no attribute is set no icon will be displayed.

    • ycbm

    • calendar

    • time

    • none

  • data-buttoncolor

    • This attributes should be used with hexadecimal colors only. For example #FFE01B or #000 . When no attribute is set the color #2a9d8f will be displayed. When the color is too dark the color of the text will be white

A few examples of embeds using data-type:

  • Creating a fixed button with the ycbm logo and with a custom color, that should appear in the top-left corner of the page. The button should say Book now:

    <script src="<https://embed.ycbmstaging.com>"	
		async="true"
		data-domain="booking-demo"
		data-innertext="Book now"	
		data-type="button-floating"	
		data-buttonicon="ycbm"	
		data-buttonposition="topLeft"	
		data-buttoncolor="#715077"></script>

  • Creating a link button. The link should say Book now:

    <script src="<https://embed.ycbmstaging.com>"	
		async="true"
		data-domain="booking-demo"
		data-innertext="Book now"	
		data-type="text-link"></script>

  • Creating an inline button with a custom color. The link should say Book now:

    <script src="<https://embed.ycbmstaging.com>"	
		async="true"
		data-domain="booking-demo"
		data-innertext="Book now"	
		data-type="button-link"	
		data-buttoncolor="#715077"></script>

Other Attributes

Other attributes that can be configured to change the behavior or appearance of the embed are:

data-domain: This is the subdomain of your booking page, it's the same as the one you use to access your booking page. For example, if your booking page is at https://mysubdomain.youcanbook.me, then your subdomain is mysubdomain. This data-domain value will be different for every booking page that you embed.

data-content: There are 2 different modes for embedding your booking page:

  • schedule (by default). This is the default mode, it shows only the part of the page needed to complete the booking process. It won't display extra information like headers or footers that your booking page has. Use this mode when your website already has that information.

  • all. This mode will display your booking page as it is, with all the information and controls. Use this mode when you want to display your booking page as a standalone page.

 

Advanced embed script usage

Here's an example of the script with all the available options:

<script
  src="https://embed.youcanbook.me"
  async="true"
  data-domain="mysubdomain"
  data-content="schedule|all"
  data-intent="itt_37bd8bbf-8c78-405c-9e85-b5af51437x12"
  data-flow="book|cancel|reschedule"
  data-copyparameters
  data-autoscroll
</script>

data-showtitle: This setting can be change to show or hide the header instructions (for example "Choose an Appointment Type" or "Choose a Team Member")  on your booking page. This is set by default for certain scenarios:

  • false by default if data-content is all
  • true by default if data-content=schedule

data-intent: Use this attribute if you want to display a specific booking process in the embed. This is usually not needed, but it's required  when we want to cancel or reschedule a specific booking. You can pass in the {INTENT-ID} for your bookers to allow them to reschedule or cancel. 

data-flow: There are 3 different flows that can be embedded:

  • book (by default). This is the default flow, it will display the booking process, and will allow the customer to create a new booking.
  • cancel (advanced). This flow will display the cancel process, and will allow your customer to cancel an existing booking. You need to use it along with the `data-intent` attribute to specify what booking to cancel.
  • reschedule(advanced). This flow will display the reschedule process, and will allow your customer to reschedule an existing booking. You need to use it along with the `data-intent` attribute to specify what booking to reschedule.

data-copyparameters: When using this option, the embed will copy the parameters from the URL to the booking page. This is useful when you want to pass parameters from your website to your booking page. For example, if you want to pass the name of the customer, you can use the URL https://yourwebsite.com/?FNAME=John%20Doe, and the embed will copy the name parameter to the booking page, so it will be pre-filled when the customer is creating a new booking. See prefilling parameters for more information.

data-autoscroll: When this option is used, your embed will automatically scroll to the top of each new view as the user progresses through the booking process, while the page’s main scroll is adjusted to maintain the visibility of the embed. For booking pages with lots of text, it can provide a consistent starting point for each new booking step and keeps the booking interface always in sight. 

data-selections: You can embed your booking page so it pre-selects a team member or an appointment type using this option. The embedded booking page will already have the values selected, skipping any selection screen that has already been defined by this parameter. This option only accepts valid JSON objects. Here is an example script that includes the pre-selected variables:

<script
  src="https://embed.youcanbook.me"
  async="true"
  data-domain="your-subdomain"
  data-selections='{
    "appointmentTypeIds": ["jsid6266401"],
    "teamMemberId": "m71784",
    "startsAt": "1689812100000",
    "duration": "PT1H30M",
    "units": 2,
    "form": {
      "FNAME": "Anne",
      "EMAIL": "anne_doe@ycbm.com"
    }
 }'>
</script>

 

Embedding into Wix and Google Sites

Using the embed script may cause display issues in a Google Sites website. 

If you'd like to embed your YouCanBookMe page into a Google Sites website, we recommend using this embed code instead (just replace the  yourdomain for the subdomain of your booking page in YouCanBookMe): 

<iframe src="https://yourdomain.youcanbook.me/?
embed=true"   
	id="ycbm"

style="width:100%;height:1000px;border:0px;background-color:transparent;"
frameborder="0"   allowtransparency="true"></iframe> 

<script>   
window.addEventListener && window.addEventListener("message", function(event){     if (event.origin === "https://yourdomain.youcanbook.me"){


document.getElementById("ycbm").style.height = event.data + "px";  
	}}, false); 
</script>

Please note this iframe embed code has fewer customization options than using the script. 

 

Cookie Policy Responsibility for Embedded Booking Pages:

YouCanBookMe will use essential cookies required for the service to correctly function when you embed your booking page on your site. For improved user experience, we do not display a cookie banner on embedded booking pages and do not use any unessential cookies. 

Note: Please note that tracking integrations like Google Analytics cause the cookie banner to appear for your bookers. If you wish to disable it, you will need to turn off these integrations on the page where it is embedded.

To remain compliant with global privacy regulations, it is your responsibility to inform your site visitors about the YouCanBookMe essential cookies by adding these to your site's cookie policy:

  • YouCanBookMe - required for application authentication
  • Stripe (only used if payments are enabled on your booking page) - required to handle payments within our service

 

For further questions, contact our team at support@youcanbook.me.

Join YCBM's Community Forum

Access your YCBM Dashboard

Related articles

Comments

0 comments

Please sign in to leave a comment.