Centre CSS button and change colour

We've just moved our booking software from Resy (they're shutting down in the UK) to Seven Rooms, I've been given the below code for the new booking widget; 

<div id="sr-res-root" class="sr-md sr-dark sr-#fbd1b3">Reservations</div>
<script src="https://www.sevenrooms.com/widget/embed.js"></script>
<script>
SevenroomsWidget.init({
    venueId: "swim",
    triggerId: "sr-res-root", // id of the dom element that will trigger this widget
    type: "reservations", // either 'reservations' or 'waitlist' or 'events'
    styleButton: true, // true if you are using the SevenRooms button
    clientToken: "" //(Optional) Pass the api generated clientTokenId here
})
</script>

I'm wondering if I can centre it in the content block and change the colour. 

I'd also like to use the same button twice on one page, for some reason when I paste the code in another content block the button doesn't show, just the word "reservations" with no link to the box. 

20 hours ago, kmc87 said:

I'm wondering if I can centre [the sevenrooms.com widget] in the content block and change the colour. I'd also like to use the same button twice on one page

Have you contacted SevenRooms for support yet (support@sevenrooms.com)? For example, the method for implementing multiple widgets on the same page is slightly different from the standard implementation and they should be able to help you with this.

On 5/14/2024 at 5:24 PM, paul2009 said:

Have you contacted SevenRooms for support yet (support@sevenrooms.com)? For example, the method for implementing multiple widgets on the same page is slightly different from the standard implementation and they should be able to help you with this.

Hi Paul, I contacted Sevenrooms a few times about it, they aren't offering any support or guidance and recommend speaking to our web developer. However, I manage our own sites with a very limited  knowledge of CSS. I've search for the same issue on other forums but I can't see anyone else with this issue. 

On 5/30/2024 at 4:44 PM, kmc87 said:

Hi Paul, I contacted Sevenrooms a few times about it, they aren't offering any support or guidance and recommend speaking to our web developer. However, I manage our own sites with a very limited  knowledge of CSS. I've search for the same issue on other forums but I can't see anyone else with this issue. 

 

To change button color, you can use this code to Website > Website Tools > Custom CSS

div#sr-res-root {
    background-color: red !important;
}
div#sr-res-root * {
    color: green !important;
}

To center, you can share link to page where you added it, I can take a look.

With second button, it will open same popup or different popup?

On 6/1/2024 at 9:41 AM, tuanphan said:

To change button color, you can use this code to Website > Website Tools > Custom CSS

div#sr-res-root {
    background-color: red !important;
}
div#sr-res-root * {
    color: green !important;
}

To center, you can share link to page where you added it, I can take a look.

With second button, it will open same popup or different popup?

Hi tuanphan, 

Thanks for your help.  You can have a look at one of the pages here https://weswim.co.uk/ . 

When I use the exact same method of adding code in a new content block, it shows as added in the builder and preview, but only the word "Reservations" comes across on the live site"  I've included some screenshots. 

@kmc87 Hi,
Add following code in custom css.
https://swimdevelopment.squarespace.com/config/pages/website-tools/custom-css

div#block-yui_3_17_2_1_1715781104237_12592 #sr-res-root {
    background-color: orange !important;
}

div#block-yui_3_17_2_1_1715781104237_12592 {
    display: flex;
    justify-content: center;
}

Survey says orange or red color best color for the effective book now buttons.
If you want to change it to red change text orange with red.
After adding code and save... edit page move code block bring it to center you will see color in center... it will make vertically center.