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

[danielrosenbay]

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.

[Ben]

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

[danielrosenbay]

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>

[Ben]

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>

[Kevin]

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?

[danielrosenbay]

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.

[learningstuff]

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

2. 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

[Ben]

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.

[woyago]

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

[Ben]

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.

[warrenblack]

Helpful and useful discussion, thanks, I appreciate that!

[devwithgrowth]

Hey everyone,

After three years, I was just looking for a solution and came across this thread. I resolved my issue and I thought it would be good to share this update. The issue of upper case parameters persists, but I’ve figured out how to apply this to the script embed rather than the iframe, which has limited customization.

Here is the code needed to add the UTMs. and thanks @woyago for the .toUpperCase(); tip!

DOMAINNAME = put your subdomain

Also, feel free to add the custom attributes to customize your embed as usual

<script src="https://embed.ycb.me" async="true" data-domain="DOMAINNAME" data-content="all"
    onload="executeSecondScript()"></script>

<script>
    function executeSecondScript() {
        var params = window.location.href.split('?')[1] || false;
        if (params) {
            // Split the params into individual key-value pairs
            var paramArray = params.split('&');

            // Map over the array and convert the key names to uppercase
            paramArray = paramArray.map(function (param) {
                var keyValue = param.split('=');
                return keyValue[0].toUpperCase() + '=' + keyValue[1];
            });

            // Join the modified key-value pairs back into a single string
            var modifiedParams = paramArray.join('&');

            var iframe = document.querySelector('iframe'); //MAKE SURE YOU ONLY HAVE THIS IFRAME ON THE PAGE
            iframe.src = 'https://DOMAINNAME.ycb.me?embed=true&contentMode=all&showTitle=false' + '&' + modifiedParams;
        }
    }
</script>

[Ben]

@devwithgrowth thank you for sharing the this. We recently released an update to allow for lower case Shorthand codes, are you not seeing those populate your embed?

Also our new embed script can allow for capturing URL parameters by adding:
data-copyparameters

Information here.

I tested with a lowercase parameter coming through after adding the data-copyparameters and things came through.