Placing a Calendly button at specific place

[Paritor]

Hi there,

I am trying to place a button below my details on a Single Layout but all it does is placing it as a static element below my footer … This is not where the html output should be. It should appear right below my text, not somewhere else.

Can I turn this code:

<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/sbi-club?hide_gdpr_banner=1&primary_color=56c271', text: 'Jetzt Termin buchen', color: '#56c271', textColor: '#ffffff', branding: false }); }</script>

into a proper element, maybe through do_shortcode or the like? How do I do this?

Thank you for your help!

Regards,
Jens

[prakash_s]

Hello Jens,

Thanks for writing to us.

I would suggest you please add the Raw content element under the text element which allows you to render the custom code. Please have a look at the given screenshot below. Please have a look at the doc to learn more about how to render the custom HTML markup with the Raw content element.

Raw Content | Themeco Docs

Hope it helps
Thanks

[Paritor]

Thanks @prakash_s!

Yes, sure I put that in a RAW content.

Let me explain what I did:

First, for testing purposes, I followed the instructions here to output the Calendly code in the footer: Calendly button and pop up global

That worked. But this is not where I want the button to be. So I deleted the code entry from base.php.

But after deleting base.php from /pro-child/ entirely and clearing cache from Cornerstone settings, the button still sits in the lower right corner of the page.

Upon inspecting the source code, it turns out the Calendly code is not in the footer but somewhere in the html’s body displacing the footer (see screenshot). I would like decide on where the button appears.

Thanks

Jens

[tristup]

Hi Jens,

The bottom and right positions of the button are set through the custom CSS. And that is why it will show in the specific position.

You need to add the custom CSS code to override the existing CSS code to reposition it, and providing custom CSS code is beyond the scope Theme Support. I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks

[Paritor]

Thank you, @tristup!

I fixed it, it was my fault – I picked the wrong code from calendly.com. I did not realise that they also provide you with a code/script for an inline button. And unfortunately, the associated CSS also overwrote the code of an embedding plugin (Embedded Calendly) which I tested meanwhile. The version sI picked was the floating version, hence its position. Mea culpa.

Kind regards,
Jens

[tristup]

Hi Jens,

Glad that you are able to fix it.

Thanks