Say you are creating a landing for your event with Elementor (e.g., birthday party). To make it easy for your aspiring attendees to add your event to their Google Calendar account, you want to add an “add to Google Calendar” button to your landing page. Is it possible? Yes, it is possible. But you need to use Elementor Pro.
One of the features offered by Elementor Pro is the ability to add a dynamic link. In addition to allowing you to add an internal dynamic link site URL, post URL, author URL, and so on, the feature also allows you to add an actionable link. One of which, you can add a link that redirect your visitors to your event calendar on Google Calendar. This way, your aspiring attendees don’t need to manually add your event to their Google Calendar account. This feature is particularly great to be implemented on a landing page of an event such as wedding party, seminar, birthday party, and so on.
How to Add a Google Calendar Button in Elementor
First, you can create your landing page using Elementor. Once your page is ready to publish, add one last widget — the Button widget — before you really publish it.
Once the Button is added, go to the settings panel to make the settings. Click the dynamic icon on the Link field on the Button block under the Content tab and select Contact URL.
Next, click the wrench icon on the Contact URL field and select Google Calendar.
Add the event title, description, location, start time and end time.
Since you want to add a Google Calendar button, you can set the button text to something like “add to Google Calendar”. You can also add a calendar icon to make your button looks more eye-catching.
Once done with the basic settings, you can go to the Style tab to style up your button. Once everything is done, you can publish or update your page.
3 thoughts on “How to Add a Google Calendar Button in Elementor”
In this tutorial, you have explained how to add Google Calendar Button in Elementor beautifully and simply. After watching this tutorial, I hope to know how to add Google Calendar Button in Elementor. Thanks for sharing your valuable knowledge.
How do you determine time zone?
Hi. How to pass dynamic content using this way? Or do you know other option? Thanks