At the moment, it’s possible to show buttons for events that are only manually managed. When we connect the app to Google - there are none.
It would be great if we could keep the buttons both in preview and in popup
Hello there and welcome aboard, @Russell_Brown2 ![]()
Great thought, thanks for sharing! Let’s see what others think about this feature ![]()
After some playing around with CSS I managed the following with an integrated calendar. The link goes through to the ticket booking site and shows on both the preview as well as the event page pop out. I have not integrated the calendar into the website yet but all is working in the preview.
I used the following code. You can adjust sizes and colours by amending the code.
.global-styles, a {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: white;
background-color: purple;
padding: 10px 20px;
border: 0px solid purple;
border-radius: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
}
.global-styles,
a:hover,
a:focus {
color: white !important;
}
If I can be of any more help let me know. Thanks to the team at elfsight for the original CSS which I adapted.
Hi, No i have not had that issue but have not yet embedded it into the website. Im no CSS expert but it could be due to the CSS changing the global settings for the site. Not sure if anyone with CCS experience may be able to help. I would have thought that the widget being external to the site the custom CSS would only affect the external elements.
Hey there, guys ![]()
@Russell_Brown2 Thank you so much for sharing your solution with us! Our devs reviewed your code and suggested a slightly adjusted version that should work great:
.global-styles, a {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: white;
background-color: purple;
padding: 10px 20px;
border: 0px solid purple;
border-radius: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
text-wrap: auto;
overflow-wrap: anywhere;
}
.global-styles,
a:hover,
a:focus {
color: white !important;
}
Feel free to give it a try ![]()
Hey @Max,
Where in this code would the “Get Ticket” link go? Not a CSS wiz yet ![]()
Also, could this code be used to create addition CTA buttons on different locations on any of the various standard layouts available for the widget?
With thanks,
mw
@iammasterweb The button text with the link should be added to the event description in your Google Calendar:
After that, you can use the CSS code from the message above to create a button from a usual linked text ![]()
Is there anyway for the “button” text to be associated with the button field in the calendar widget and not the description? Would be great if I could show just the button without having to show all of the event description.
Hi @Arliss_Banks and welcome to the Community ![]()
Since, the Button field isn’t available in Google Calendar events, there is no way to do this, unfortunately.
However, this request is dedicated to this functionality. If we have any news about this feature from the devs, we’ll promptly update you here ![]()
Thank you Max.
I’ll just create hyper-linked text in the description in lieu of a “Button” until a non CSS option in implemented. As I suspect, “Button” will show up in the description? This would not be very aesthetical, and would also be copied over to users’ calendars that choose to add an event to their calendar.
With thanks,
mw
Yep, but, unfortunately this is the only workaround for now ![]()
Friends, quick update: we’ve started working on this request and it’s in the Development stage already!
We’ll keep you posted on the progress here ![]()
I need buttons to easily be added for a signup link in my event calendar.
Hi there, @Tory_Kronschnabel ![]()
I am glad to say that we’re currently working on adding the buttons for events imported from the Google Calendar.
I’ve moved your comment to the thread, where we’ll keep you updated ![]()
Hello! Just throwing my input here that this feature is the single thing preventing me from using Elfsight! Do you have an ETA by any chance?



