{"id":2483,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-calendar-widget\/"},"modified":"2022-06-09T09:27:13","modified_gmt":"2022-06-09T09:27:13","slug":"landing-page-calendar-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/landing-pages\/builder\/calendar\/","title":{"rendered":"Landing Page Calendar Widget"},"content":{"rendered":"
\n

The Calendar <\/strong>widget helps you share a Calendly meeting invite with your customers and invites them to book their calendars as per their convenience from your landing page itself.<\/p>\n

The Upside: <\/strong><\/p>\n

Your customers can book meetings and appointments with you directly from your landing page, doing away with the need for you to separately manage your calendar and invitations.<\/p>\n

For example:<\/strong><\/p>\n

Suppose you are a business that wants to set an appointment for in\/knowledge-base\/person visits with your customers, or you want to intimate your customers and block their calendar for an exclusive showcase event. In that case, this widget will come in very handy! You can also use this widget on your thank\/knowledge-base\/you landing pages after visitors have signed up and invite them for a product walkthrough and onboarding session. The possibilities are endless!<\/p><\/blockquote>\n

The widget currently supports meeting links generated on Calendly<\/a>. Calendly is a free meeting scheduler tool widely used by marketers worldwide to schedule meetings with their team members and customers. Calendly uncomplicates scheduling by only offering times that work with your availability across all of your calendars.<\/p>\n

Once you have set a meeting up on Calendly, copy the meeting URL and keep it handy. You’ll need it to configure the calendar widget on your landing page. Let’s proceed and see how!<\/p>\n

How to use a Calendar Widget in a Landing Page<\/h2>\n

Step 1<\/h2>\n

Navigate to the landing page builder<\/h2>\n

Use the Main Menu<\/strong> on the left to create a landing page and navigate to the landing page builder<\/a>.<\/p>\n

Step 2<\/h2>\n

Add a Calendar widget to the landing page<\/h2>\n

The blank area on the left is the work area <\/strong>where you design your landing page, and the area on the right is the tools area where all the available design elements are displayed as widgets<\/a>.<\/p>\n

In order to add a meeting invite to your landing page, drag and drop the Calendar <\/strong>widget to the work area (as highlighted in the screenshot below).<\/em><\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 3<\/h2>\n

Configure the calendar widget as per your requirements<\/h2>\n

Once you drop the widget into the work area, the widget S<\/strong>ettings <\/strong>are displayed on the right (as highlighted in the screenshot below). <\/em>Use these settings to configure the calendar widget as per your requirements.<\/p>\n

Herein, use the Calendly Event \/Meeting URL field to specify the URL of the Calendly meeting<\/a> that you wish to add to your landing page.<\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 4<\/h2>\n

Style your  Calendar widget<\/h2>\n

You can edit the appearance of the calendar widget by clicking the Style<\/strong> tab (as highlighted in the screenshot below<\/em>).<\/em><\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Herein, the different design options available are:<\/p>\n

4.1 Calendar Font and Color Settings<\/h4>\n

Use the options available under this section to style the border of the calendar widget as per your design preferences.<\/p>\n

<\/div>\n

4.2 Calendar Setting <\/strong><\/h4>\n

Use the options available under this section to adjust the width and alignment of the calendar widget.<\/p>\n

<\/div>\n

Click Save<\/strong> and that’s it!<\/p>\n

You have successfully added a Calendly invite to your landing page!<\/p>\n

Let’s proceed, and have a look at how to add a Signup Form to a landing page using the Signup Form Widget<\/a>!<\/p>\n<\/div>\n