Add button for EC connected to Google Calendar

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

5 Likes

Hello there and welcome aboard, @Russell_Brown2 :wave:

Great thought, thanks for sharing! Let’s see what others think about this feature :slightly_smiling_face:

3 Likes

I totally agree. I am unable to create a ticket link feature at the top of the popup. The link is in the description and is hard to view

2 Likes

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.

2 Likes

Hey Russell,

The adapted CSS code works but leads to highlighting issues on the rest of my squarespace page specifically around the homepage links at the top corners of the webpage. (See image below). Did you have the same problem?

1 Like

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.

1 Like

Hey there, guys :wave:

@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 :slightly_smiling_face:

2 Likes

3 posts were split to a new topic: Customization of Event Calendar button

Hey @Max,

Where in this code would the “Get Ticket” link go? Not a CSS wiz yet :sweat_smile:

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

2 Likes

@Master_Web 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 :slightly_smiling_face:

2 Likes

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.

3 Likes

Hi @Arliss_Banks and welcome to the Community :wave:

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 :slightly_smiling_face:

2 Likes

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

1 Like

Yep, but, unfortunately this is the only workaround for now :slightly_frowning_face: