When you have your own website you want your leads or customers to get in touch with you as smoothly as possible, and let them book meetings with you or your colleagues. With the contact widget in the Customer Meeting add-on, you can let your visitors schedule a time in your calendar that suits them best.
It's not needed to embed an entire booking page or a 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
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:
- Design your button
- Set the button behaviour
- Link the correct booking page
- Save the contact widget
1.1 Design your button
By default the contact widget will have the standard Customer Meeting add-on colours and icon and the text Book a meeting. You can edit all the options* to have a more customised button.
* Only if you're on the Beyond package of the Customer Meeting add-on will you be able to change and customize the icon.
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 colour manually.
You can change the Button text to a custom text of max 30 characters.
Next to colours 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 customise 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 left side:
1.2 Set 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
1.3 Link booking page
In this step 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:
- Team booking page
- Personal booking pages
- 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.
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 contact 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 Wordpress.com website.