Making it easy for customers to book a meeting can be a big time saver. By integrating your booking page or meeting type into your own website, Wordpress, Webflow or Wix, it's possible to achieve just that.

In this help article

• General
  • Own website
  • Wordpress
  • Webflow
  • Wix
• Embed a booking page in a contact widget

General

After you've created meeting types, basically all you have to do is copy the code from the meeting type page and paste in the code base of your website on the right location.

• Go to Meeting types
  
  • If you want to copy the personal or team booking page, click on Booking links in the top right-hand corner and click on the preferred embedded HTML link (personal or team). 
  • If you want to copy the meeting type, click on the Share icon and choose Copy embedded HTML.

Example:

If you choose one of the embedded HTML's, then the embedded booking link (e.g. https://www.vectera.com/embed/book/vectera/u/vectera-matthias/) gets added into an iframe code block. This will look like this

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

Note: The part after /book/ (=vectera) is the team-name, while the last part (=/u/vectera-matthias) is the editable part of the booking link in your scheduling configuration.

2. Paste the embedded HTML iframe in your website's codebase in the section you want the booking page to display. 

3. Adjust the height and width according to your website (in our suggestion the height is fixed to 600px).

4. Enjoy an upgrade in the scheduling of your meetings!

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>

If you want to automatically prefill booking page questions you can add data in the parameter behind the URL as in this example:

https://www.vectera.com/embed/book/vectera/u/vectera-matthias/?questions.id=value
Visit this help article for more information.

Own website

Basically all you have to do is copy the embedded HTML iframe and paste it in the code base of your website on the right location.

Wordpress

Wordpress.com

It's not possible to embed a booking page in a Wordpress.com website. You can add a hyperlink behind text, to forward your clients to a booking page.

Wordpress.org

Once you've copied the codeblock with the embedded booking page (see general), you can now embed it in your Wordpress website.

1. Open the page where you want to add the codeblock
   
   
2. Click on the Plus and select Custom HTML
   
   
   
3. Paste the iframe code in the custom HTML block
   *note: Depending on your layout, you might want to put the iframe in a paragraph.
   
   
4. Test and edit the height so the iframe displays perfectly on your website.
   
   
5. Publish your website
   

Webflow

Copy and paste the embedded HTML iframe in your Webflow website.

1. Open the page where you want to add the codeblock
   
   
2. Click on the Plus and in Advanced select Embed, drag and drop the Embed box into your page
   
3. Paste the iframe code in the custom HTML block.
   
   
4. Test and edit the height so the iframe displays perfectly on your website.
   
   
5. Publish your website

Wix

Embed booking page

To embed a booking page in your Wix website, click on Copy embedded HTML.

1. Open the page where you want to add the codeblock
   
   
2. Click on the Plus and Embed Code -Embed HTML
   
   
3. In the HTML settings, select Website address and paste the embedded booking page code in the field Website address. Click on Apply/Update.
   
   
   
4. Edit the height so the iframe shows perfectly on your website.
   
   
5. Publish your website
   
   

Redirect URL

In scheduling it's possible to add a redirect URL to your meeting types. Unfortunately this is blocked by WIX meaning that if you've setup a redirect URL an error will appear after a client books a meeting. 

We recommend to remove the redirect URL for the meeting types which are shown on your embedded booking page or contact WIX support.

1. Go to the Meeting types page in Vectera
   
   
2. In the meeting type card, click on the 3 dots and select Edit
   
   
3. In 'Powerful extensions', go to Redirecting
   
   
4. Remove the URL in the field below 'Redirect URL'
   
   
   
   
5. Save the page

Embed a booking page in a contact widget

If you don't want to show an entire booking page on your website but you want to put it behind a button, then you can use the contact widget. Optionally, you can choose if the booking page should open in a pop-up window on your website or in a different tab.

1. Go to Contact widgets
   
   
2. Click on Create a widget
   
   
3. Design your button
   
   
4. Select whether the booking page should open in a new tab or on the same page
   
   
5. In 'Link contact type' select Meeting type and choose your meeting type or booking page
   
6. Hit Save and embed the contact widget in your website.
   

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!