Knowledge Base/Support Topics/Add buttons or widgets to your email and web site
Embed a personal appointment booking widget on your own web page
Rupert Schmidtberg
posted this on March 04, 2011 17:48
The attached documents provide details on how to embed the TimeTrade appointment booking screens in a page on your web site. Use this technique when you want your web site visitors to feel like they are still on your site while they book appointments with you.
Related Articles:
Pre-fill invitee contact information on appointment booking pages
Comments latest first
Would really like to use my Time Trade Account with my iCal and iCloud on all my iOS Apple devices ... Right now I have to subscribe to a google calendar as well to get my appointments ... When will you be able to work with iCal and with iCloud ... which I love . Thanks !
the instructional pdf documents do not open and/or corrupted.
Hi LXA Coaching,
Can I have you submit a support ticket request supplying the URL to the schedule link on your website? To submit a ticket, click the tab labeled "submit a request", fill out the form and then click submit
Need some help here. Can't get rid of the scrollbar within the iframe. It looks sloppy. Please help.
Still nothing. Please post up what needs to be done in order to clean the look with our site with TimeTrade.
By the way, I am using Wordpress on a self hosted site.
I followed the instructions on embedding the booking widget and it says Error. I also noticed that James who posted on Aug 14th has the same error on the page he shared. Mine is http://yoursuccessclinic.com/appointments/.
I'm confused. I have a Wordpress.com website. How do I insert a widget so my clients can book a appointment while on my website?
Hi James,
Thank you for your posting. The procedures you have defined work with Wordpress users who are using Wordpress.org; however, will not work for Wordpress.com users.
We are in the process of providing some additional FAQ's regarding embedding widgets and some will be geared for Wordpress users. We hope to have those available and posted within the next day.
Hey folks,
For those of you who are using WordPress and need the embed code it looks something like this <iframe style="margin: -45px 0pt 0pt 100px;" src="https://my.timedriver.com/L4ZTG" frameborder="0" scrolling="no" width="700" height="600"></iframe>
By setting the margin, width and height (you may have to make adjustments) I was able to hide everything but the scheduling window.
If you just want it done for you or want to see an example, go to my schedule page here: http://bigredcouchwebdesign.com/support/phone-consultation/
JC
We are looking into being able to add a widget to Wordpress. Will provide additional information as it becomes available.
Could someone let me know how to remove the scrollbars for the embedded widget? Using wordpress, the widget size is much smaller than the dimensions provided and scrollbars appear. I've tried adding code such as scrolling="no" and scrollbars="no", but to no avail. All other code I've found seems to be related to the source document for the widget.
One more thing.
I just published the Calendar on a page on my website and it is bleeding over into the right-hand column of my site. Again, using WordPress
I just signed up for the 30 day free trial and have some feedback. I'm use WordPress for all of our sites.
1) As already mentioned, it takes a long time to load the calendar on the page
2) It is difficult to figure out how to modify the embed code so that it works on my site. 99% of your customers know nothing about HTML AND have No desire to learn.
My suggestion is that you create a separate area (within the Activity Link section) that automatically generates the embed code for each activity. I do not want to learn how to do coding and this is a big red flag for me.
Hi Juli,
Thank you for your feedback and additional information you have provided for other Joomla users.
As mentioned in our support ticket correspondence, we are aware of the time required to load the page and are looking into that issue.
Again, thanks.
Hi Everyone ....
the issue with IFRAME in Content Management Systems such as WordPress and Joomla - is that they really dont work that well. In the case of Joomla - it has a built in module function called a WRAPPER - which acts/works like an iframe. However this built in function - pulls the page EXACTLY as it appears on the my.timetrader.com/xxxx page. This includes the OVERLY WIDE grey margins on the left and right of the page.
Just attempting to embed <iframe> code into a Joomla articles does not work - as Joomla does not like this method of iframing ... and strips it out of any page or module code.
The solution in JOOMLA is to install a small add-on called JUMI - which allows you to embed any and all code (javscript. iframe etc etc) into a module - which can then be embedded into a page.
Not sure what the solution is for Word Press ....
However TIME TRADE - your GREY MARGINS ARE TOOOOOO WIDE .... it may look pretty when you go to the page standalone - but does not work with embedding in other web development environments.
my other issue is that it TAKES A REALLY LONG TIME to load the page .... up to 11 seconds before event the Time Trader loading icon appears ....
Juli
Hi Raquel,
Great, I was just responding to your request and saw that you found the option. Branding was a popular request from users who wanted the benefit of being able to apply their own branding, but didn't have the need of the other featured in the Workgroup Edition. Because of the popularity of the branding, we decided to offer it as an option within the Professional Edition
Rupert, I found where to upgrade to the branding option (addtl $29yr.). Thanks!
Julie, your iframe width is not set wide enough. the TimeTrade page is rather wide and begins within the iframe tag at the top left coordinates of the page. You might be able to edit the page with the workgroup option. not sure.
Thanks Rupert. So, if we want the 'learn more' and other stuff on the right side bar gone, we have to go from our original $49/year (pro) to $249/yr (workgroup)? Yikes! I tried and couldn't find where to "add the branding option". is this a less expensive alternative? Thanks
Hi Guys, this works well, the instructions are clear and concise and i was able to create a Wrapper (iframe) in my Joomla site. However there is one small problem, the iframe brings with it a huge chunk of border on the left side ... how can this be removed... see attached image, which pushed the widget beyond the edge of the page area. The page area is over 800 pixels wide so it has plenty of room to incorporate the widget.
The "learn more" links appear if you are using our Professional Edition. You can remove these by adding the "Branding" option to your subscription or by upgrading to a WorkGroup Edition subscription. Both are available online when you log in to your account and click on Admin -> MySubscription.
btw, for those who couldnt get it to work, make sure you are coding correctly. use the following by copying and pasting. you can adjust the width and height accordingly.
<iframe src="https://my.timedriver.com/GY4JM" frameborder=”0” width=”700” height=”600”></iframe>
making the iframe is easy. I wouldnt exactly call it a widget, but it was simple. thank you Rupert.
My client who is using this service set up a trial account and noticed that her activity page was different than yours. much wider, therefore more difficult to "frame" into her website. do you know how to remove the learn more and contact links on the right of her page so we can actually frame this thing in properly? https://my.timedriver.com/TZJTM
Hi Marty.
The link "https://my.timedriver.com/GY4JM" is provided as an example for reference. You will need to place your link, which looks just like this URL with the exception of the last 5 characters, as each activity has a unique URL. For procedures to locate the URL for your activity, click here.
Let me know if this does not resolve your question.
You give two different instructions - which is it?
Use this link and then make it is my link????? which is it?
Thanks
Using your web page editor, add the following code into the HTML for your web page.
<iframe src=https://my.timedriver.com/GY4JM?sh=1 frameborder=”0” width=”750” height=”525”>
Make sure that the URL is the link to your activity page that you copied from your timetrade account.
The iframe code is not working on my Wordpress blog. The dimensions of the appointment box are not working out.
The page is blank when I click the link provided. Is there another source for finding how to embed this widget?
Is it possible to add multiple activities to one widget???
I don't know what the heck "Tom m" is tallking about. The instructions to embed the timetrade into my website was perfect. It took me 7 minutes. I think you guys did a great job making this process very simple. I was expecting to have to do a lot more work.
Hello Tom,
I noticed that you posted a comment saying "sucks" for our FAQ titled "Embed a personal appointment booking widget on your own web page". I'd be very interested in understanding why you think the FAQ sucks. We strive to provide helpful information for our customers. Would you mind elaborating on your comment so we can improve the FAQ to be clearer and more helpful?
sucks