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

If you have the scheduling calendar widget deployed on your website, you might notice that updating the widget in your account will affect all the instances of the widget 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. Or a different scheduling calendar widget for each of your staff members. This tutorial will show you how to create multiple widgets for specific services. 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. You will find the service ID in 

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. Your [ACCOUNT_ID] should already be filled in when you copied it, so do not replace or delete that.
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.