The integration of your booking page into your Wordpress website depends on the version of your Wordpress website (Wordpress.com or Wordpress.org).


To check your version, log into your Wordpress account and hover over the Wordpress logo at the top left of the page. If no drop-down menu appears, you are on a Wordpress.com website. If you see a drop-down menu, you are on a Wordpress.org website.




Follow these steps to integrate the booking page on your own website. If you have a Wordpress or Wix website, click on one of the following links: your Wix website or your own website.



Embedding for Wordpress.com

Navigate to the page where you want to allow visitors to schedule a meeting with you. Now select the appropriate text, click on the hyperlink logo (see gif below), and fill in your embeddable booking url. You can find this url at vectera.com/scheduling/, after you've connected your calendar.


That's it!




Embedding for Wordpress.org

To integrate your booking page into your Wordpress.org website, you'll need to add a Custom HTML block to your page. This is important: not a url embed but a Custom HTML block. 


Now enter your embeddable booking url in the next line of code. You can find this url at vectera.com/scheduling/, after you've connected your calendar.



<iframe 
      style="width: 100%; height: 600px;" 
      src="EMBEDDABLE_BOOKING_URL" 
      frameborder="0"
></iframe>


You'll need to replace EMBEDDABLE_BOOKING_URL by the copied URL from the previous step.


Example:

My embeddable booking page is https://www.vectera.com/embed/book/vectera/u/vectera-oliver/..


If I want to embed this booking page into my website, I would change the code to:


<iframe 
       style="width: 100%; height: 600px;" 
       src="https://www.vectera.com/embed/book/vectera/u/vectera-oliver/" 
       frameborder="0"
></iframe>


Enter this line of code in your Wordpress.org's code base in the section you want the booking page to display. Make sure to use your personal URL. 


Note: if you use a theme on your website, this could affect the appearance of the embedded scheduling page.


Tip: you can adjust the dimensions in the code snippet by defining a specific width and height. Example: 

<iframe 
       style="width: 640px; height: 480px;" 
       src="EMBEDDABLE_BOOKING_URL" 
       frameborder="0"
></iframe>

Important: If you have set up a redirect url after a meeting is booked, you will need to add an extra line in your iframe code:


<iframe 
      style="width: 100%; height: 600px;" 
      src="EMBEDDABLE_BOOKING_URL" 
      sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation"
      frameborder="0"
></iframe>


Vectera is looking forward to your feedback so we can offer you the best scheduling and customer meeting experience. Set up your next customer meeting right away by logging into your account or sign-up for a free, fully-featured trial of Vectera!