Contact widget: how does it work?

When you have your own website, you want your leads or customers to get in touch with you as smoothly as possible. With the contact widget in Vectera you can let your visitors schedule a time in your calendar that suits them best, fill in a contact form or direct them to your waiting room.


It's not needed to embed an entire booking page, contact form or hyperlink in your text, just create a booking button with your own design, copy the widget and paste it in your website. The whole process is really fast, making sure you can focus on the results: attracting customers. Read all about it here.


In this help article


1. Create a new contact widget

1.1 Design your button

1.2 Set button behaviour

1.3 Link contact type

1.4 Save the contact widget

2. Contact widget overview

3. Embed the widget in your website

1. Create a new contact widget

To create a contact widget, go to Contact widgets in the sidebar. When it's the first time you create a contact widget, you will arrive on the information page. Click on 'Get started' to continue.



The creation of a contact widget consists of 4 parts:

  1. Design your button
  2. Set the button behaviour
  3. Link the correct booking page
  4. Save the contact widget


1.1 Design your button

By default the contact widget will have the standard Vectera colors and icon and the text Book a meeting. You can edit all the options* to have a more customized button. 


You can change both the Button color and Button text color by filling in a hex color code or by clicking the box and selecting a color manually.


You can change the Button text to a custom text of max 30 characters. 

Next to colors and text, every contact widget can consist of an Icon. You can choose to deactivate the icon, use the default icon or upload a custom icon*.

    Click on the slider to deactivate the icon, click again to activate the icon.


    Click on 'Upload icon ...' and select your own logo or icon to customize it. The file must be JPG or PNG!


Click on Clear icon to remove the custom icon.


All the changes are immediately visible in the preview on the right side:


*note: the Pro, Business or Enterprise plan is required to update the icon.


1.2 Set the button behaviour

When setting the button behaviour, you define what needs to happen when a client or lead clicks on the button on your website. You can select one of these options.

  • Open in a pop-up in the same browser tab
  • Open in a new browser tab

In this step you select which contact type will be behind the button. This can be a meeting type, a contact form or a waiting room.

Meeting type

You can select which booking page or meeting type is linked to the specific widget. 


In order to make this possible, your calendar needs to be connected. If your calendar is not connected, you will see a button 'Connect your calendar'. Click on it and connect your calendar to continue.



If your calendar is connected you’re able to select: 

  1. Team booking page
  2. Personal booking pages
  3. Team and personal meeting types


Click on the booking page or meeting type that you want the contact widget to link to. This will be visible in the field.


Contact forms 

You're also able to link a Contact form in your Contact widget, next to a booking page. 

Select it here or create one if you haven't already. If you create a new contact form, be sure to save your contact widget first as a meeting type or you'll lose your progress.


Waiting room

When you select Waiting room you can choose to send leads/clients to your team waiting room (if active in the team settings) or a personal waiting room of one your team members.

1.4 Save the contact widget

Click on Save to save the contact widget and go to the overview page. If you are editing an existing contact widget, click on Update to update the changes.


2. Contact widget overview

On the contact widget page, you'll now see an overview of all your widgets. On the top right-hand corner you can click on 'Create a widget' to create a new widget.



When you have created a second widget, all the Widgets will be shown below each other:



You are now able to Delete and Edit the widgets. Or Copy the code and add the widget to your website (see '3. Embed the widget in your website' below).


To delete a widget, click on the bin icon in the top right-hand corner of a widget. Confirm by clicking on Delete in the pop-up.


Click on the pencil icon to edit a contact widget. Once you have made the changes, click on Update to save all the changes. The changes will be visible in the overview page.


3. Embed the widget in your website

Now it's time to embed the widget in your website. For every widget you can see the code, which you can either send to your webmaster or copy and embed it in your website yourself.



For more information on how to do this click on the tooltip below the code block or read this help article! Make sure to check the help article if you have a WIX, Webflow or 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!


Was this article helpful?