Automate Your Online Scheduling Using a 2-Step Lightbox in Thrive Leads

In a previous Thrive Themes blog post, we explained how you can use a pre-designed landing page template to get your new online coaching clients to book their own “free consult” appointments with you.

Now, I thought my tutorial was a pretty slick example of how you can integrate an automated scheduling tool with Thrive Architect.

But after publishing, one of our readers quickly showed us an even more efficient way to do it by adding Thrive Leads to the mix:

Fitness & Nutrition Coach Stephen Box left us an awesome comment about how he automates his new client scheduling using Thrive Leads.

So are you ready to follow Stephen’s lead and learn how to upgrade your New Coaching Client generation page with a Thrive Leads ThriveBox (a popup lightbox that’s triggered on text, image or button click)?

Awesome sauce! Read on...

More...

A Quick Shout Out To Stephen Box

One of my favorite things about working for Thrive Themes is seeing how active and switched on our customers and blog readers are.

Case in point, after receiving Stephen’s conversion focused comment on how to improve automated scheduling for online coaches with Thrive Leads, I quickly went to investigate his website to see how he get's it done... let’s just say that I was impressed!

Stephen’s New Client landing page is attractive and quickly streamlines visitors to click on one of his “Free 'Zero Pressure' Consult” buttons:

Stephen Box's New Client Landing Page. Notice how it streamlines visitors to click on his "Free 'Zero Pressure' Consult" scheduling buttons as well as his clever use of a "Pros & Cons" Content Block template.

I even noticed that Stephen deployed one of our “Pros & Cons” Content Block templates to help quickly communicate the value of his offer​!

But what happens when you click on one of Stephen’s “Free Consult” buttons?

BAM! Something so simple, it’s magic:

When a visitor clicks on Stephen's "Free 'Zero Pressure' Consult" button, it opens a lightbox embedded with his Calendly automated scheduling calendar where new clients can self-book their initial consult call.

Stephen just uses a blank Thrive Leads ThriveBox template embedded with his automated scheduling tool (in his case, Calendly).

Now that’s a super simple and slick way for online coaches to set up an automated system for their new clients to self-book without ever having to leave the website!

Want to see how to set this same system up on your own coaching homepage or New Client Generation page? I know you do so here we go...

Improve Your New Client Generation Page Using a ThriveBox

Assuming you already have a New Coaching Client generation page published on your WordPress site, you can deploy this auto-scheduling upgrade by creating a new ThriveBox within your Thrive Leads dashboard.

Choose the “Blank Template” opt-in form lightbox when prompted:

Select the "Blank Template" option when prompted.

When the “Blank Template” loads, you’ll see an empty lightbox positioned in the center of your Thrive Leads editor consisting of just a Thrive Leads Element with a Background Section inside.

The editing steps needed to achieve Stephen’s simple self-booking setup go like this...

First, insert a Custom HTML element into the Background Section of your blank lightbox:

The "Blank Template" will load with a Background Section element inside a Thrive Leads Element. You'll need to add a Custom HTML element inside the Background Section and modify the Margin & Padding settings to be 0 pixels on all sides for each.

Next, do some quick Margins & Padding styling of your Custom HTML element, Background Section element, and Thrive Leads Element:

  • For the Custom HTML element, change each of the Margin & Padding settings to 0 pixels.
  • For the Background Section element, change each of the Margin & Padding settings to 0 pixels as well as the Section Minimum Height option to 910 px (if using Calendly).
  • For the Thrive Leads Element, change each of the Margin & Padding settings to 0 pixels as well as the Minimum Height option to 910 px (if using Calendly).

Once that's done, login to your online scheduling tool account and locate the HTML code you’ll need to embed within your Custom HTML element.

For this post, I’ll showcase how to do this using Calendly (just like Stephen uses on his own coaching site):

How To Find Your Calendly Event HTML Embed Code:

1

Login to your Calendly account and click on the Event Types option in the main navigation bar.

2

Next, click on the cog icon shown in the upper right corner of your Event and select the “Add to Website” option from the dropdown menu:

In your Calendly dashboard, click on the Event Types link in the top navigation bar. When the new page loads, click on the cog icon in your "Free Consult" Event box and select the "Add to Website" option from the dropdown.

3

After that, click the Inline Embed option in the “How do you want to add Calendly to your site?” popup window that appears:

Select the Inline Embed option from the "How do you want to add Calendly to your site?" popup window that appears.

4

Finally, copy the HTML code Calendly provides you with (so you can paste it into your Thrive Leads ThriveBox Custom HTML element):

Copy the HTML code that appears by clicking the blue "Copy Code" button in the bottom right corner of the popup window.

Now paste your calendar tool event code into the Custom HTML element you dropped within your ThriveBox.

NOTE: You must also modify the height specifications (directly inside the HTML code) to match the Minimum Height pixel setting you set your Background Section and Thrive Leads Element to above (if using Calendly, I recommend changing the code to show height:910px):

Paste your automated scheduling tool HTML code into your Custom HTML element and change the pixel height of the embedded calendar to match the Minimum Height settings you changed your Background Section element and Thrive Leads Element to.

(Don’t forget to press the save button in the bottom right corner of the Custom HTML element to continue).

Press the “Save Work” button in the bottom left corner of your Thrive Leads editor window to complete your ThriveBox setup.

Now, if you preview your new ThriveBox, it should look something like this:

When you preview your ThriveBox, it should look something like this when it loads.

Update Your New Client Landing Page CTA Buttons

Finally, open up your New Coaching Client landing page with the Thrive Architect editor and scroll down to your first CTA button. For this post, I’ll use the example landing page I showcased in my previous automated scheduling post.

Highlight your “Free Consult” scheduling button and link it to your newly created ThriveBox in the left hand sidebar:

Load up your New Client Generation page in Thrive Architect and scroll down to your "Schedule Your Free Consult" button. Change the Action of the button to open your newly created ThriveBox on click.

You can do this by clicking on the Animation & Action tab, selecting the Popup icon, checking the “Open Thrive Leads ThriveBox” option, choosing your new ThriveBox’s name in the search bar, and clicking “Apply”.

Make sure to repeat this step for all the “Free Consult” CTA buttons on your landing page and then finalize the changes by clicking the green “Save Work” button in the bottom left corner of your Thrive Editor.

That’s It... Your ThriveBox Is Scheduling New Clients for You!

After completing the steps above, your New Coaching Client landing page should now show the following lightbox popup when visitors click on one of your “Free Consult” scheduling buttons:

Your ThriveBox should look something like this when one of your new clients clicks your landing page scheduling button.

Without being directed away from your landing page, potential coaching clients can select one of your available coaching times and confirm their appointment:

Your new client can then select one of your available dates and confirm a time that works for them without ever leaving your website!

Once your new client clicks the confirm button, the embedded scheduling display will change to collect their information and finalize the appointment:

As a final step, clients will enter the information you require for your meeting like their name, email, Skype handle, etc. as well as any intake questions you may want them to answer (setup from your scheduling tool dashboard).

If you follow these steps, you’ll have your own conversion optimized, new client self-booking system up and running in just a few minutes, just like Stephen did for his online coaching business!

Now It’s Your Turn

So what do you think of this upgrade to the automated scheduling system we showed you back in this post?

If you’re an online coach, will you take what you learned here to further streamline your own new client booking process with Thrive Architect + Thrive Leads?

Let us know in the comments below!

P.S. If you’re using any of the Thrive Themes plugins in innovative ways, please share it with us in the comments so we can feature your site on the blog!

Author: Matt Totten

Matt's a geologist turned online marketer and digital nomad. He's a Modern Manimal on a mission to cultivate a wild lifestyle – by design. When away from his tech, you can find him studying movement through practices like Aikido, AcroYoga and Barefoot Running.

  • Bjarne says:

    Where to get the name and email of the potential?

    • Matt says:

      Hey Bjarne, your online scheduling tool (a.k.a. Calendly) will do that for you when the client clicks the “Confirm” button. The lightbox will change a final time to collect the info you require (this info collection setup is done within your scheduling tool’s dashboard).

      • Trent B says:

        Does thrive leads count the schedule appointment as a lead in the thrive leads tracking dashboard?

      • Matt says:

        Hi Trent. No, Thrive Leads will only count email signups as conversions in the Thrive Leads dashboard.

  • Rebecca says:

    This is very cool! Thanks for sharing. Can you add the specifications for ScheduleOnce (OnceHub) as well?

    • Matt says:

      Thanks Rebecca! I think the process for the other Automated Scheduling tools should be very similar as long as there’s a place where they provide you the embed code to copy in their tool dashboard.

  • Randy Elder says:

    Can this be done using the free version of Calendly? Or is a paid version required?

    • Matt says:

      Yup, this can be done with the free version of Calendly Randy!

  • Anna says:

    Hey, Matt, I had set that up with booklikeaboss a while back and it killed my page speed. I was just wondering, whether you checked any effects on page speed with the Calendly solution and what the results were.

    Thanks, Ann.

    • Matt says:

      Hey Anna, thanks for your comment!

      I just did my own little page load speed test: first with the Calendly embed ThriveBox turned on and second with it turned off.

      The Calendly ThriveBox version did slow the page speed down a bit, but only by 0.2 seconds on the most important metrics (the Start Render Time & Document Complete Time). As far as I know, that shouldn’t effect your conversions too much for a personal brand online coaching site.

      Let us know how it goes for you if you decide to start using Calendly instead of BookLikeABoss!

      • Randy Elder says:

        My page was slowed to a crawl using Google Page Speed and my home page has 1 picture in the header and the button linking to Calendly.

  • Michael Adewale says:

    Really great piece . Thanks Matt

  • Alla Kos says:

    Thank you for this case study and helpful tutorial. Any tips for setting up a similar system for clients who pay for the consultation/session? I don’t schedule free discovery calls but have e.g. quick 30 min paid sessions. As for payments, I use TT pricing forms and simple ‘buy now’ buttons: Stripe and WP Simple Pay plugin (mostly for its nice payment form).

    • Walter S says:

      Alla, I think with Calendly paid version of 8 USD/month you payment checkout is directly integrated within the form. If you connect to e.g. Zoom, then entire process is automated and client will be reminded to join his appointment as well. ;)

      • Matt says:

        Thanks for jumping in Walter! Yes, payment integrations with Stripe and PayPal are included in the paid version of Calendly.

  • Kat Sturtz says:

    Very cool. Going to try idea with my Acuity Scheduling .

    • Matt says:

      Good stuff Kat… let us know how it works for you!

  • Jorge R says:

    Hello. Can I have the app go to a landing page after signing up? Or does the pop up just closes? I was thinking of sending the potential client to a page with a video and a download freebie

    • Matt says:

      Hey Jorge, I’m pretty sure you can set up a post signup redirect link for your clients. Cheers for the question!

  • Jorge R says:

    Nevermind my last question. Just tried it. Works great.

  • caleb.bouma says:

    Does a redirect still work? If you want to redirect them to an application form page after they have scheduled a phone call using the popup? that would be important for me. Thanks.

    • Megan W says:

      I use calendly on my site and the answer to your question is… YES! You can redirect to a form after they’ve booked ;)

      • Matt says:

        Thanks for the info Megan!

  • Stephen B says:

    Hey Matt,

    First and foremost, thank you for the shout out. Seeing pictures of my site on my favorite blog is definitely the highlight of my week.

    Good call on the 910px too – just updated mine.

    Now I’m working on a custom thank you page for my redirect to add that extra bit of value before their call.

    • Matt says:

      Hey Stephen, thanks again for inspiring this post and congrats on such a slick looking website!

      And great idea with the Thank You page redirect… that sounds like an awesome way to boost your overall client experience!

    • Melissa says:

      Stephen,
      I implemented the Calendly lightbox.

      Great idea and thank you for sharing!

      Can you share how you are redirecting to the thank you page once they schedule?

      I would like to add a pixel as well as give additional value.

      Any guidance would be greatly appreciated.

  • John says:

    Matt, do you guys have a Coaching/Client landing page in the Templates section??? I dont want to have to build one from scratch!

  • Stefan I says:

    Hi all,
    This is a really cool hack and I tried it out immediately. :-)
    Unfortunately, it carries quite a bit of overhead in terms of the calendly script: 170 KB :-(
    Google Pagespeed did not like that at all, so I went back to opening the calendly app in a new tab.
    Have you any tips on minifying the script?
    Cheers, Stefan

    • Hanne says:

      No sorry, maybe ask Calendly?

  • Viola says:

    Hello Matt, great post!
    I used to send my leads to Calendly directly which didn’t allow for tracking – or remarketing. Based on your tutorial I embedded the calendar in my website (on a page, not a pop-up).
    It worked like a charm!
    flow-seo.com/calendar/
    Looking forward to the new behavior insights and remarketing campaigns!

  • Fantastic!!!!!!!
    Thank you very, very much.
    You make it so easy, that even an old dog like me, can build complicated websites and features like this ……easily.

  • Melissa says:

    This was amazing! I implemented it and it looks fantastic.
    Is there a way that I can direct them to a thrive themes thank you page after they schedule within the lightbox?

    Any assistance would be great!

  • >