Changing buttons for Calendly code

Support
#1

Hello!

I tried to adapt the code mentioned here: https://theme.co/apex/forums/topic/embedding-calendly-code/#post-1376285 for the page https://engagemental.co.uk/training-courses/cold-calling-training/

It seems to work, but the button is not that great looking - can I change the button to another type please?

Advice very welcome!

Thank you.

#2

Ideally I would like to add the code to the normal x theme button somehow…

#3

Hi @JonC,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. To change the button style to X button style, try adding the following code in the Theme Options > CSS:

.calendly-badge-content {
    border-radius: 0.35em !important;
    font-size: 15px !important;
    background-color: #363636 !important;
    box-shadow: 0em 0.15em 0.65em 0em rgba(0,0,0,0.25) !important;
    padding: 10px 20px !important;
    font-family: "Source Sans Pro",sans-serif !important;
    font-weight: normal !important;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Hope this helps!

#4

Okey dokes - maybe my question is the wrong one…

I’ll try this one:

What’s the best way of using Calendly’s pop-up code (or any code that drives a pop-up) in a way that’s visually similar to the rest of ‘X’?

#5

Hi @JonC,

The integration depends on the Calendly’s code.
The alternative from above is using X theme CONTENT AREA MODAL element. The lightbox/popup function will be coming from X theme. You just need to suply the content of the lightbox/modal. That way you can easily design the button like any other theme elements. The issue with that is, if Calendly’s allow’s it which we are not sure. You may check in with the provider. If not you have stick with adding the code they provide and using custom CSS to make it blend with other elements.

Also, the question is how did you add the code. Why it is so awkward on it’s current position and doesn’t look like part of the page.

#6

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