How to Position your “Book Now” button on a website to maximize engagement

It takes a lot to drive visitors to your website. People who do arrive reportedly spend 6-8 seconds deciding whether to stick around, so it’s critical that you create a strong positive impression while inside that window. This article will cover two of the best ways to maximize engagement with Call To Action buttons.

What is a Call To Action?

Nobody wants to read an essay when they arrive at your website. The imagery on your page will speak to them instantly and a value judgment will be made. After that, you have a few seconds to hit them with words that identify their problems and provide a solution. If they can’t take immediate action to solve that problem with the click of a button, they’ll probably give up and go elsewhere.

A call to action button can solve this problem if it’s well implemented.

The Front and Center Approach

This screenshot comes from an Appointlet demo for an imaginary digital agency. The call to action button has several features that make it effective:

  1. Color: Relative to the orange and gray hues of the background image, the blue call to action provides enough contrast to make it POP.
  2. Wording: The language includes a verb (request) and an incentive (free consultation).
  3. Size: Both the width of the button and its word length are short relative to the header and sub-header.
  4. Clickable: When you click on the button, the solution immediately appears as an Appointlet booking page
  5. Repeats at the bottom of the page: For visitors who scroll down the page to learn more, you want to be sure to reiterate the call to action at the bottom.

When visitors click on the button, the scheduler will pop up, lowering the opacity of your landing page without navigating away. Here is what it looks like visually:

You can click here to view this demo site in real time and test it for yourself.

The Sidebar Form Approach

This second screenshot is also an Appointlet demo (located here), however you’ll notice that the landing page is formatted in a different way. With a series of form fields, you can collect data and pass it to Appointlet using form pre-population so users don’t have to enter their information twice.

  1. Sidebar Form: The header and sub-header are positioned off to one side, making space for a short vertical form.
  2. Repeat Color Themes: At the top of the form, we’ve highlighted the words Sign Up and Your in orange. The same color is attributed to the CTA button at the bottom of the form.
  3. Wording: Again we find an action (Sign up) but this time the reader is given an imperative. When should I do it? Now!
  4. Readable + Clickable: The first call to action is simply a form header, but it primes the reader for the clickable CTA button at the bottom.

This final example presents a slight variation on the sidebar form. It makes use of the incentive approach (free demo), but the language is less urgent. A single sentence of help text is presented under the form’s header, explaining what an attendee will get from the demo. The words “book my demo” give the visitor ownership, in contrast to “book a demo”.

How to generate an Appointlet CTA

If you’re new to Appointlet or have never used our sharing tool, you may be wondering how to make this approach work for your team. Fortunately, setting up a CTA button is incredibly easy. All you need to do is log in to your Appointlet account, click on the share tool, and select the website tab:

Hit the blue copy button to copy to your clipboard. You can paste the code snippet directly into your website’s html and you’ll be good to go. That’s all there is to it!

To learn more about how to set up these two examples using the same content management system that we used, see this article on connecting Appointlet to Unbounce.

 

Ezra Bell