Hi, I need to add this to my site, but when I do… it breaks the fade effect and counter elements on my pages. I can’t figure out why. This happens whether I put this in the header, widgets, or anywhere.
What can I do to ensure this doesn’t cause those elements on my page to not work?
This is my original post on this, but for some reason I’m not able to reply to that post any longer.
Hello Matt,
Thanks for writing in!
I have edited your homepage and enabled the fade animations. It is working perfectly.
One thing to remember is that after making site changes, you MUST clear your cache firs before testing your site.
Hope this helps. Please let us know how it goes.
Hey, that’s because my original post didn’t show this below… I messed it up.
So my question is, when I’m trying to use this string of code below:
<p><img src="http://mylegalcasecoach.com/wp-content/uploads/2018/11/My-legal-case-coach-logo-white.png" width="200px" alt="Logo"></p>
<!-- 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"></script>
<script type="text/javascript">Calendly.initBadgeWidget({url: 'https://calendly.com/mylegalcasecoach/15min', text: 'Free 15-Min Consultation', color: '#C59D2C', branding: false});</script>
<!-- Calendly badge widget end -->
When I place that in my widgets as custom HTML or anywhere else on the page, it will make the fade effect and the counters not work.
I will put this back on the site so you can see what I mean. It’s weird, because when that is showing on the page (it’s a small button that hovers on the bottom right of the site)… then the counters and fade effect ONLY WORK when you resize the window. It’s bizarre. You can see the comments from your support on my previous post.
Okay, I installed this back as a footer widget custom html element. Try now.
Hello Matt,
I can confirm that the custom code:
<!-- Calendly badge widget begin -->
<link href="//assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="//assets.calendly.com/assets/external/widget.js" type="text/javascript"></script>
<script type="text/javascript">Calendly.initBadgeWidget({url: '//calendly.com/mylegalcasecoach/15min', text: 'Free 15-Min Consultation', color: '#C59D2C', branding: false});</script>
<!-- Calendly badge widget end -->
is causing an issue on the page. It is somehow blocking any fade effects. We are not familiar with this code. You might need to ask further assistance to the creators of this script for them to find out why it is blocking the fade in animation as you scroll the page.
Please let us know how it goes.
Do you have any ideas or suggestions as to why that small bit of code would interfere so much?
Hi Matt,
Please ask the widget author how to prevent the widget from applying these CSS rules to the body.
If they can’t try adding this to the Page > CSS area
html,body{height:auto !important;}
Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.
Thank you for your understanding.
PERFECT! Adding that CSS did it 
Cool, glad to hear that 
Cheers!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.