How to add your booking page as a button in your email signature?

In this help article we guide you in creating a button via HTML for your booking page so you can add it to your Outlook or Gmail signature. In the first step we'll create the button and add the booking page URL to it and in the second step we'll add it to your Outlook or Gmail signature. We do recommend to ask your IT'er to help you set this up.

*Note: In this help article John Doe at XYZ accountancy is a fictional person and company created to show as an example. Any resemblance is purely coincidental.
 

In this help article:

  1. Create the button
  2. Add it into your email signature
    1. Outlook (via the browser!)
    2. Gmail

1.  Create the button

  1. Copy your booking page link on the meeting types page.
    This could be a team booking page, a personal booking page or a meeting type link.

  2. Paste it in the following code
     

    <a href="BOOKING PAGE LINK" style="background-color:#FFFFFF; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Button Text </a>
     

  3. Change the button background color to the Hex code you prefer. eg Black: #000000
     

    <a href="BOOKING PAGE LINK" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Button Text </a>
     

  4. Change the button text color to the hex code you prefer. eg. white: #FFFFFF
     

    <a href="BOOKING PAGE LINK" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Button Text </a>
     

  5. Add the text of the button. Eg. Book a meeting
     

    <a href="BOOKING PAGE LINK" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Book a meeting </a>

 

So an example of a button could be:

<a href="https://www.vectera.com/book/my-team-name/u/username/t/meetingtype" style="background-color:#000000; color:#FFFFFF; padding:10px 20px; text-decoration:none; border-radius:5px; display:inline-block; font-family:sans-serif;" target="_blank"> Book a meeting </a>


Which would look like

 

 

2. Add it into your email signature

Once the button is created you can add it to the email signature. We recommend to let your IT'er help you but in case you want to do it yourself we've added the steps below.

  1. Outlook (via the browser!)
  2. Gmail

Outlook (via the browser!)

  1. Open Outlook in your browser and login
  2. Go to https://outlook.live.com/mail/0/options/accounts-category/signatures-subcategory or via the Gear icon ==> Account ==> Signatures
  3. On the location where you want to add the button type aaa

     
  4. Right click outside(!) the signature box and select Inspect. The dev tools will now open in your browser.
     
  5. In the dev tools click on the Left top icon (arrow pointing inside a screen)
     
  6. Click in the Signature field where you've typed aaa. This should now be visible in the dev tools code. If you don't see 'aaa' click on the arrow next to the code and it should become visible

     
  7. Right click on the code part in blue and select Edit as HTML
     
  8. Double click on aaa, remove the text and paste the code from your button

  9. Click somewhere next to that code in the dev tools and then you should see the button appear in your signature field.
  10. Click on Save and send a test mail to yourself. In the mail that you've sent double check that the button redirects you to your booking page when clicking on it.

*Note: if the above information is not clear, we recommend to have a look at this youtube video. The owner of the video is not related in any way to Vectera, but the information is useful.

 

Gmail

  1. Open Gmail in your browser and login
  2. Click on the Gear icon ==> See all settings ==> General ==> Signature (you will have to scroll down)
  3. On the location where you want to add the button type aaa

     
  4. Right click outside(!) the signature box and select Inspect. The dev tools will now open in your browser.
     
  5. In the dev tools click on the Left top icon (arrow pointing inside a screen)
     
  6. Click in the Signature field where you've typed aaa. This should now be visible in the dev tools code. If you don't see 'aaa' click on the arrow next to the code and it should become visible.

     
  7. Right click on the code part in blue and select Edit as HTML
     
  8. Double click on aaa, remove the text and paste the code from your button
  9. Click somewhere next to that code in the dev tools and then you should see the button appear in your signature field.
  10. Click on Save and send a test mail to yourself. In the mail that you've sent double check that the button redirects you to your booking page when clicking on it.

*Note: if the above information is not clear, we recommend to have a look at this youtube video. The video is in Outlook but the actions are the same in Gmail. The owner of the video is not related in any way to Vectera, but the information is useful.

The Vectera team looks forward to your feedback. Our goal is to continually improve your online meeting experience! Ready to get started? Log in to your account or start your free trial of Vectera!

 

Was this article helpful?