Workflow Event Actions
      Back to home
      1. Help Center
      2. HubSpot Micro Apps
      3. Workflow Event Actions

      How do I create an Add to Calendar widget in HubSpot?

      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
      1. 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:

      1. Create properties that have your event details:
        1. Event Title
        2. Event Description
        3. Event Start Date
        4. Event End Date
        5. Event Start Time
        6. Event End Time
        7. Event Timezone (Optional, a default TImezone can be set)
      2. 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:
        1. Add to Calendar widget code with Dropdown 
        2. Add to Calendar widget code no Dropdown

      Generate your Add to Calendar widget Code

      1. Create a new Workflow for the Object that you added the properties to above.
      2. Set your enrolment details, e.g. any of the Event details are known.
      3. Add the Add to Calendar widget custom action.
        1. Set the Properties to draw the Event details from.
        2. Set all or some of the the output options:
          1. 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.
          2. 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.
          3. 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.
          4. Individual Mail Client Add to Calendar Links
            • Use these to create your own Add to Calendar experience in Web Pages or Emails. 

      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.

      1. Create a Marketing Email.
      2. In edit mode, click in any rich text area.
      3. Insert the text or Image to link for the Mail Client, e.g. Gmail.
      4. Click the Personalize link in the Rich Text toolbar.
      5. Click the More dropdown in the Rich Text toolbar and select the source code icon.
      6. Find the token you just inserted in the source code and cut this code from the first curly bracket to the last {}
      7. Close the code view
      8. Select the text or Image to link click the link icon in the Rich Text toolbar.
      9. Paste the cut tag code into  the URL field and click the  Insert button
      10. Repeat for all other Mail Clients.

      Add your Add to Calendar widget code to an Email or Landing page

      If you’re using the Add to Calendar widget (with or without the dropdown option), you can easily insert it into your email or web page without needing any additional coding

      1. Create an Email or a Web page in HubSpot.
      2. In edit mode, click in the rich text area within the where you want to add the Widget.
      3. Click the Personalize link in the Rich Text toolbar.
      4. Select the Object you generated the Code against and select the Property with the code.
      5. 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 Personalization tokens for each of the Mail Client Add to Calendar Links used.