✔ Calendly Icon and Phone Button
Completed by Chris Z.
- Assigned to
-
Ivonne A.
Selena V.
- Notes
-
- we would like to setup something up like growth99.com
Selena
They have a calendly link floater at the bottom and then a mobile call button. Can we set something up like this on all the pages minus the 3 new pages you set up that have different calendars. The phone icon can remain the same on all pages.
Sure, we can do that.
The code you sent for the pop-up button for Linkedin, Lasik and CS pages is actually the one that creates that floating button in the right corner, so just send me a calendar link and I will add it to all pages except those three you listed.
This one:
<!-- 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/medstar/csl', text: 'Schedule time with me', color: '#00a7ff', textColor: '#ffffff', branding: true }); }</script>
<!-- Calendly badge widget end -->
Can you also put a phone number icon on mobile on the left side.
I already added CSS style in "Additional CSS" box.
HTML Code:
<a href="tel:+1 (801) 877-1744" id="callnowbutton" onclick="return gtag_report_conversion('tel:+1 (801) 877-1744');" "=""><i class="fa fa-phone-alt" aria-hidden="true"></i></a>
I tested the code on the draft page and it looks good the same as the button on growth99.com
Let me know where you are trying to add this phone number on the website.
On medstar home page, can you have the schedule a consult button in the header make the calendly link popup instead of going to the contact form at bottom
Also, on this page medstarmedia.com/cs can you insert this calendar here: https://calendly.com/medstar/em
Also, insert the calendar icon at the bottom floating on right.
A month ago I added Calendly code for the floating buttons to the entire website except for three campaign pages. And here's how I did that. I added Calendly code to the footer which affected the entire website: https://jmp.sh/rUaji5v
Then I added additional CSS in order to hide the Calendly floating button on those three pages: https://jmp.sh/VAMmb6V
We now need Calendly floating button on this campaign page: medstarmedia.com/cs (page-id-950) but not with the same Calendly link we have preivously added in the footer.
Calendly link in the footer is this: https://calendly.com/medstar/dmss/
Calendly link we need only on this page is this: https://calendly.com/medstar/em
The problem is that the Calendly widget has default class="calendly-badge-widget" so I don't know how to display one Calendly button and hide another on the same page. We wouldn't have this problem if Calendly code generated ID as well, but unfortunately, there's only a class.
Do you have an idea how to solve this? Thank you!
Using CSS is not a good approach to get around this as you will still have an unnecessary script running on those three pages in the DOM.
I will write a custom PHP code for this.