Calendly button and pop up global

Support
#1

Hi I am trying to embed a Calendly button and pop up so the button is on evry page floating at the bottom of the page just like on this site http://www.studioh-inc.com/
I can insert the embed code on a raw element but that will only show on one page… The Calendly documentation says to put it just inside the tag in the footer of the template as showed here…
https://help.calendly.com/hc/en-us/articles/223195568-Embed-options-for-Wordpress#org

I understand you cannot support third party plugins however the question is what would be the best way to insert a code block globally to appear site wide?

My URL https://organicmotion.com.au/ogm

Thanks again for your outstanding support!

Placing a Calendly button at specific place
#2

Hi there,

Please installed and activate the child theme and login through FTP and create this directory path /wp-content/themes/pro-child/framework/views/footer/ then create the file base.php in the footer directory.

Then add this code in the file:

<?php

// =============================================================================
// VIEWS/FOOTER/BASE.PHP
// -----------------------------------------------------------------------------
// Includes the wp_footer() hook and closes out the .x-site <div>, .x-root
// <div>, <body> and <html> tags.
// =============================================================================

?>

    <?php do_action( 'x_before_site_end' ); ?>

    </div> <!-- END .x-site -->

    <?php do_action( 'x_after_site_end' ); ?>

  </div> <!-- END .x-root -->

<?php wp_footer(); ?>

<!-- Add the custom code here -->

</body>
</html>

Then please make sure you have added the custom code after the line <!-- Add the custom code here -->.

Hope this helps.

#3

Hi Jade, thank you that worked perfectly… However it interfiered with the JS for the scrolling nav bar, please help as I wan’t them both…

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Thanks again your support is much appricated.

#4

Hello There,

Could you please put the Calendly code again so that we can check and investigate the conflict? So far, the JS code above is working as intended to be.

Thank you in advance.

#5
#6 
<!-- 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/ogm/15min', text: 'Schedule time with me', color: '#00a2ff', branding: true});</script>
<!-- Calendly badge widget end -->
#7

Thanks again!!

#8

Hi,

May I know where did you add this code.


jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >50) {
              $('.x-navbar').addClass("x-navbar-solid");
        }else {
              $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Please add it in Theme Options > JS

Your base.php should have the following code.

<?php

// =============================================================================
// VIEWS/FOOTER/BASE.PHP
// -----------------------------------------------------------------------------
// Includes the wp_footer() hook and closes out the .x-site <div>, .x-root
// <div>, <body> and <html> tags.
// =============================================================================

?>

    <?php do_action( 'x_before_site_end' ); ?>

    </div> <!-- END .x-site -->

    <?php do_action( 'x_after_site_end' ); ?>

  </div> <!-- END .x-root -->

<?php wp_footer(); ?>
<!-- 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/ogm/15min', text: 'Schedule time with me', color: '#00a2ff', branding: true});</script>
<!-- Calendly badge widget end -->

</body>
</html>

If it still not working kindly provide us your wordpress admnin login and ftp login in Secure Note

Thanks

#10

Yes this is all there in the correct locations… Thanks! I can’t tell you enough how much your support is appricated!!

#11

Hi there,

The javascript seems to be working, it’s transitioning to semi-transparent from transparent when scrolled. As for the embed code, I still don’t see it on your page. Let’s change the approach, instead of using base.php, please add this code to your child theme’s functions.php

add_action('wp_footer', 'calendly_embed', 99999);

function calendly_embed () { ?>

<!-- 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/ogm/15min', text: 'Schedule time with me', color: '#00a2ff', branding: true});</script>
<!-- Calendly badge widget end -->

<?php }

And your login page is redirecting me back to the home page.

Thanks!

#12

Yea the code was turned off so I could continue building the site… Ok we’re getting somewhere now thats better as it is not stopping the page scroll, but it still messes with the transition transparency to semi…
and it puts a horizontal scroll bar at the bottom of the page.

Thanks Chedy

#13

Hey There,

The button is now displaying nicely. We cannot replicate any issue like the transition and the horizontal scroll bar at the bottom of the page. This is what we are seeing on the page:

Could you please provide a screenshot if you have a different display?

Thanks.

#14

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.