Jump to content

Help Making Showpass HTML Embedded Button Match Website Button Style

Recommended Posts

Posted

Hello everyone! 

I'm in need of some help with HTML coding on the website I'm managing for work. I am trying to integrate Showpass ticket purchasing directly on our website's event pages, and while the code works it pulls a button style that, frankly, doesn't look like a button. 

The code Showpass supplies for embedding is below (including the specific event I want the button to pull purchase information for), if possible I would like the button to match the primary button style on our website or otherwise get a button block that functions the same way this embed does. 

Quote

<div class="sqs-block button-block sqs-block-button" data-block-type="53"><div class="sqs-block-content">
<div class="sqs-block-button-container--center" data-alignment="center" data-button-size="large">
    <a href="#" onclick="showpass.tickets.eventPurchaseWidget('spring-handbells-2024', {'theme-primary': '#97D700', 'keep-shopping': true})" class="sqs-block-button-element--large sqs-block-button-element" data-initialized="true">Buy Tickets</a>
</div></div></div>

Link to Event Page: https://www.cosmopolitanmusic.org/upcoming-concerts-events/cms-spring-series-handbells

I have zero coding experience other than the ability to copy-paste and occasionally modify extremely obvious pieces of the code so any assistance would be appreciated!

  • Replies 4
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Posted
On 4/9/2024 at 11:08 PM, CosmopolitanMusicSociety said:

Yes, that's the button I'd like to change and the style I'd like it to match! 

You can use this code to Website > Website Tools > Custom CSS

a[onclick*="eventPurchase"] {
    background-color: #97d700 !important;
    border-radius: 100px;
}

image.png.f81c537f6436ab356cfbf26da29f13ad.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.