Calendly functionality has been implemented by the Automation Solutions team. You can see an example regression page for an understanding of how this functions. A live example can be found on the Automation Solutions page: https://www.emerson.com/en-us/industries/automation/food-beverage/beer .
In order to support the business request of using Calendly Pop-Ups on the site, a new template has been created. To use this new view, create an HTMLFragment Content Item, within it the HTML Code should be populated from Calendly. Here is the example embed code that goes in an HTML fragment in CoreMedia:
<!-- Calendly badge widget begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
<script type="text/javascript">window.onload = function() { Calendly.initBadgeWidget({ url: 'https://calendly.com/andrea-raglione/consultation', text: 'Schedule time with me', color: '#00a2ff', textColor: '#ffffff', branding: true }); }</script>
<!-- Calendly badge widget end -->
To get the HTML code from Calendly, go to your Event Types page in Calendly, and press the “Add to Website” option within the settings drop down and follow the steps to get your code.
To build an example:
We will use C011 component to show how to build. Note, you can use most components that support CTAs
- Create a Collection Content Item in CoreMedia ans set the layout variant to C011
- Enter a Teaser Title (eg. your name and position)
- Enter Teaser Text (eg. a description of your job and expertise)
- For the Call-to-Action Button select "Linked Call-to-Action Label, then drag your HTML Fragment into the content
- Add Picture (eg. your profile picture)
