Automatically add “View Event” buttons to a Squarespace 7.1 Events page

Posted in

Squarespace

May 18, 2022

Inexplicably, Squarespace 7.1 does not enable View Event buttons on Events index pages. Here is a way to add them automatically with a bit of custom scripting.

Place this in the Footer section of Advanced > Code Injection (you will need at least the Business plan to do this):

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(function() {
  $('.eventlist-event--upcoming .eventlist-title-link').each(function() { // for only upcoming events
  //$('.eventlist-title-link').each(function() { // for ALL events
    var btnText = 'View Event';
    var btnSize = 'medium'; // or 'small' or 'large'
    var url = $(this).attr('href'); // get the link
    var $col = $(this).closest('.eventlist-column-info'); // find the container
    var $btn = $('<a href="' + url + '" class="sqs-block-button-element--' + btnSize + ' sqs-button-element--primary sqs-block-button-element">' + btnText + '</a>'); // create the button
    $col.append($btn); // add the button to the container
  });
});
</script>

Note that if you are already adding jQuery on the page, you don't need to (shouldn't) do it again.

Possible Customizations

Change button size: 'small', 'medium', or 'large'
Change the button text from "View Event" to whatever you want.
Remove the '.eventlist-event--upcoming ' from the jQuery selector to target ALL events, not just upcoming ones

I hope that helps!

Have a question or comment about this post, or just want to say hi? Drop me a line

Kirk Roberts

Independent Website Collaborator

Automatically add “View Event” buttons to a Squarespace 7.1 Events page

Possible Customizations

Kirk Roberts

Independent Website Collaborator