Generate an "Add to Calendar" widget in HubSpot using workflows. Choose options for emails, web pages or get links and iCal files to create your own widget.
You can Dynamically generate an Add to Calendar widget from HubSpot Workflows using CRM record data. It also generates iCal files and adds these to your HubSpot file system.
The Add to Calendar widget Workflow action can be added from any HubSpot Object Workflow.
Add to Calendar widget outputs
You have the option of generating:
- Individual Mail Client Add to Calendar Links
- Use these to create your own Add to Calendar experience in Web Pages or Emails.
- Add to Calendar widget code with Dropdown
- This renders HTML with Add to Calendar links displayed in a dropdown for supported Mail Clients.
- This should be used in Web Pages only.
- Add to Calendar widget code no Dropdown
- This renders HTML with Add to Calendar links displayed as buttons for supported Mail Clients.
- This can be used in Web Pages and Emails.
How to create Add to Calendar widget code
Install the Micro App- Install the Integration Glue HubSpot Workflow Event Actions Micro App.
Configure your Object Properties
In your HubSpot Portal add Properties to the Object that will have the event details:
- Create properties that have your event details:
- Event Title
- Event Description
- Event Start Date
- Event End Date
- Event Start Time
- Event End Time
- Event Timezone (Optional, a default TImezone can be set)
- Create properties to Output the individual widget or button code on the same Object that has the Event details, note you can create one or all of these Properties dependent on what type of code you want to output:
- Add to Calendar widget code with Dropdown
- Add to Calendar widget code no Dropdown
Generate your Add to Calendar widget Code
- Create a new Workflow for the Object that you added the properties to above.
- Set your enrolment details, e.g. any of the Event details are known.
- Add the Add to Calendar widget custom action.
- Set the Properties to draw the Event details from.
- Set all or some of the the output options:
- Add to Calendar widget code with Dropdown
- This renders HTML with Add to Calendar links displayed in a dropdown for supported Mail Clients.
- This should be used in Web Pages only.
- Add to Calendar widget code no Dropdown
- This renders HTML with Add to Calendar links displayed as buttons for supported Mail Clients.
- This can be used in Web Pages and Emails.
- Individual Add to Calendar widget code for single buttons
- This renders a single Add to Calendar Button.
- This should be used in Web Pages only.
- Individual Mail Client Add to Calendar Links
- Use these to create your own Add to Calendar experience in Web Pages or Emails.
- Add to Calendar widget code with Dropdown
Add your Add to Calendar widget code to a Marketing Email
You will need to code your own widget using the Mail Client links to use in email.
- Create a Marketing Email.
- In edit mode, click in any rich text area.
- Insert the text or Image to link for the Mail Client, e.g. Gmail.
- Click the Personlize link in the Rich Text toolbar.
- Click the More dropdown in the Rich Text toolbar and select the source code icon.
- Find the token you just inserted in the source code and cut this code from the first curly bracket to the last {}
- Close the code view
- Select the text or Image to link click the link icon in the Rich Text toolbar.
- Paste the cut tag code into the URL field and click the Insert button
- Repeat for all other Mail Clients.
Add your Add to Calendar widget code to an Email or Landing page
If using the Add to Calendar widget code with Dropdown or Add to Calendar widget code no Dropdown code you can insert these properties into your Email or Web Page without any coding.
- Create an Email or a Web page in HubSpot.
- In edit mode, click in the rich text area within the where you want to add the Widget.
- Click the Personlize link in the Rich Text toolbar.
- Select the Object you generated the Code against and select the Property with the code.
- Click the Insert button.
Preview as a contact to see the widget in action.
If you are creating your own Widget using the individual Mail Client Add to Calendar Links then you will need to create your HTML code, and then add the Personalisation tokens for each of the Mail Client Add to Calendar Links used.