How to add data from Website URL to the embedded YouCanBook.me URL

The previous booking software that I used would get the data from the Website URL without needing to be added to the embedded “Booking Software” URL, and I am struggling so much to send the data from the Website URL to the embedded YouCanBook.me URL.

I am embedding the Youcanbook.me on a Clickfunnels page, and even though I am sending the UTM Contact information through the URL, the embed Youcanbook.me don’t pre-fill the data.

I really want to continue to be using Youcanbook.me, I am a big user but I can’t find a way to fix this, and I have been researching but I don’t see to find a way. I would love if you could just give me guidance on that, so I can continue using it because I really need to make this work.

There is a bit of code you can use within the embedded that will allow you to pull in URL parameters. You will need to change out some of the data to match your booking grid but hopefully this will get you close.

Here is the code:
var params = window.location.href.split('?')[1] || false; if ( params ) { var iframe = document.getElementById("longthintest"); iframe.src = 'https://longthintest.youcanbook.me/?noframe=true&skipHeaderFooter=true'+'&'+params; }

  • Replace longthintest with the referenced ID.
  • Replace the sub domain with your sub domain
  • This will go just after the opening tag

Thank you Ben, have being racking my brain on that for so long…
I just didn’t understand what is the referenced ID… Is it the parameters I want to get from the URL?
I am sending the EMAIL, FNAME e PHONE through the URL, but I don’t if it’s that.
The opening tag is after < script > ?

That is what I try doing to the code, but didn’t work:

<iframe src="https://wkt.youcanbook.me/" id="ycbmiframewkt" style="width:100%;height:1000px;border:0px;background-color:transparent;" frameborder="0" allowtransparency="true"></iframe><script> var params = window.location.href.split('?')[1] || false; if ( params ) { var iframe = document.getElementById("EMAIL"); iframe.src = 'https://wkt.youcanbook.me/?noframe=true&skipHeaderFooter=true'+'&'+params;} window.addEventListener && window.addEventListener("message", function(event){if (event.origin === "https://wkt.youcanbook.me/){document.getElementById("ycbmiframewkt").style.height = event.data + "px";}}, false); </script>

Sorry for any confusion. Your ID is ycbmiframewkt Thank you for sharing your embed code, you can try this:

  <iframe src="https://wkt.youcanbook.me/" id="ycbmiframewkt" 
   style="width:100%;height:1000px;border:0px;background-color:transparent;" frameborder="0" 
   allowtransparency="true"></iframe><script> var params = window.location.href.split('?')[1] || false; 
   if ( params ) { var iframe = document.getElementById("ycbmiframewkt"); iframe.src = 
   'https://wkt.youcanbook.me/?noframe=true&skipHeaderFooter=true'+'&'+params;} 
   window.addEventListener && window.addEventListener("message", function(event){if (event.origin 
   === "https://wkt.youcanbook.me/){document.getElementById("ycbmiframewkt").style.height = 
   event.data + "px";}}, false); </script>

This is helpful. I will try to add this to my embed to see if it will work. @danielrosenbay were you able to get this working on your embed?

1 Like

Hi Kevin!
I try one time and it didn’t work, maybe I did something wrong I didn’t insist… I end up sending direct to the youcanbook.me link instead of embed on the website and I personalized everything on the booking page to look like the website.

Is someone able to clarify please.

I’m using activecampaign and youcanbookme on wordpress site

I have step 1, which is an activecampaign form
This then redirects to Step 2 with an embedded youcanbook.me form

I’m trying to prefill the form.

When I redirect to the youcanbookme form
ht.tp.sURL.youcanbook.m.e/?FNAME=%FIRSTNAME%&LNAME=%LASTNAME%&EMAIL=%EMAIL%&PHONE=%PHONE%
it works fine.

But when I redirect to the embedded version, I can’t get it working.

  1. Do I need to keep the content in the redirect url (that is redirecting from ActiveCampaign)
    i.e. h.t.t.p//URLwithEmbeddedForm.c.om/?FNAME=%FIRSTNAME%&LNAME=%LASTNAME%&EMAIL=%EMAIL%&PHONE=%PHONE%

or do I just leave it going to h.t.t.p//URLwithEmbeddedForm.c.om/

And

  1. I saw that I need to add something to the embed code. But what exactly do I need to add? And where do I add it? (I’ve changed the URL and Form name below).

Thanks

The issue with the embedded booking grid is that you need to add special code to the to bring in the URL parameters.

Add this right after the opening tag: replace IFRAMEID with the id=“THISBIT” in your embed code and SUBDOMAIN with the subdomain of your booking link (THISBIT.youcanbook.me):

var params = window.location.href.split('?')[1] || false; 
if ( params ) { var iframe = document.getElementById("IFRAMEID"); iframe.src = 
   'https://SUBDOMAIN.youcanbook.me/?noframe=true&skipHeaderFooter=true'+'&'+params;} 

I can get you the code you need in a message if you let me know the URL of your booking page.

1 Like

Hi Ben, this works BUT it is case sensitive. I have utm_source configured everywhere, and the param gets passed only if the url has UTM_SOURCE, not utm_source. Anyway to make it case insensitive?

I added .toUpperCase(); and it worked, but it feels hackish haha

At this time all of our URL parameters need to be uppercase. I will talk with the team to see about an option to have it recognize lower case in the future. The .toUpperCase(); is a good workaround for the interim though.

Helpful and useful discussion, thanks, I appreciate that! :handshake: