Add a “Register” Button to Event Details

Jan 11

Increase the visibility of your Call to Action button on your Events Page, by adding a button to the Events Details area.

Demo

Usage

In a page in an Events Collection. Add a button block to the bottom of the event and customize the button however you’d like.

Then, add the below code into a code block (or markdown block) just below the Button Block. Replace the "block-id" in the code with the block id of the Button Block.

The Code

  
<script>
(function () {
  /* Target Button and Event Column */
  let btn = document.querySelector("#block-id"),
    eventColumn = document.querySelector(".eventitem-column-meta");

  /* Add button as the last child of the event column element */
  eventColumn.append(btn);
})();
</script>
  

FAQs

How can I hand this off to a client?

To hand this off to a client, replace the script from above with the code below.

This new code will always take the last button on an event page and move it into the Event Details area.

Now your client can simply duplicate an event page and change the url of the last button on the page, without having to target the specific button’s block-id.

   
<script>
    (function(){
    /* Target Button and Event Column */
    let eventColumn = document.querySelector('.eventitem-column-meta'),
        btns = document.querySelectorAll('.eventitem-column-content .sqs-block-button');
        
    if(!btns.length) return;
    if(!eventColumn) return;
        
    /* Add button as the last child of the event column element */
    eventColumn.append(btns[btns.length - 1]);
  }()) 
</script>
  