How do I put multiple Scheduling Calendar Widgets on my website?

Attract more bookings by placing a scheduling calendar widget right on your website! You can use the general widget code found in your vcita account (in Online Presence > Website Widgets) to add a scheduling calendar widget. However, you will notice that updating the widget in your account will affect all the widgets on your website. But what if you want multiple different scheduling calendars on your website? For example, scheduling calendars for your multiple services, each on their own dedicated web page. This tutorial will show you how to create multiple widgets for specific services, categories and staff members. You can use either the Direct Link method, or the Widget method.

Direct Link Method

To get your direct link:

1. Begin in your vCita account.

2. Navigate to Online Presence > Client Portal > Create Direct Links

3. In the section Invite clients, select Schedule

4. At this point, you can specify if this calendar widget should only show a specific service, category of services or staff member. 

Tip: Expand Advanced Options if you would like to set a specific date as the starting point for scheduling on your custom widget.

5. Click Get link and copy the link that is generated in the popup.  

To generate your custom code:

1. Find an iframe generator on the internet. I found this one with a quick web query.

2. Paste the link you copied from vCita into the iframe URL field and generate the iframe code.

3. Proceed to Add to Your Website. 

Widget Method

We will be editing the code you copied above to create a custom scheduling calendar widget. First, you will need the service ID of the service you are creating a custom widget for. 

To get the service ID

1. In your vcita account, navigate to Settings > My Services.

To get your widget code:

1. In your vcita account, navigate to Online Presence > Website Widgets.

2. Click Add to Website in the Client Portal Widget section.

3. Choose Other Websites from the menu on the left and copy your widget HTML code.

To generate your custom code:

1. Paste your widget code into your preferred text editor. It should look something like this:

<iframe src="https://www.vcita.com/widgets/scheduler/[ACCOUNT_ID]?service_id=[SERVICE_ID]&frontage_iframe=true" width="100%" height="508" frameborder="0" style=" ">
<p>Use my online scheduling page by vCita to schedule an appointment with me:</p>
<a href='https://www.vcita.com/v/[ACCOUNT_ID]/online_scheduling?frontage_iframe=true&invite=vr_sched_pb-[SERVICE_ID]'>Online Scheduling with My Business</a>
</iframe>

2. Replace [SERVICE_ID] with the service ID you copied earlier.

3. Proceed to Add to Your Website.

Add to Your Website

Now that you've generated your code, you'll want to add it to your website as an iFrame. 

1. Log into your website builder and either add a custom HTML block, iframe, or navigate to the HTML editor. This process is going to vary based on your website building platform.

2. Copy the code from the previous step and add it to your website in the desired location. 

3. Edit the height and width parameters as needed to better fit your web page. 

Please Note: WordPress users should use a plugin that will allow you to add iFrame code to your website.

Still have questions? Contact us.