I need to restyle a button that's made of an embedded script

I have a button that opens up a pop up form for an instant conveyancing quote (powered by Hoowla) but I want to change the styling of the button so it's consistent with the rest of the buttons on my website. Hoowla have supplied me an embed code for the button – can you suggest how I edit this code so the appearence is like the other buttons on my site? The correctly formatted buttons are ones in the centre.

To preview my site https://olive-glockenspiel-gbhp.squarespace.com preview password Scarysolicitors1234

Page is at in Home / Conveyancing

<div class="hoowla-quote" data-id="7710100-2" data-buying-help-to-buy-isa="true" data-buying-buy-to-let-or-2nd-home="true" data-buying-unregistered="true" data-remortgage-transfer-of-equity="true" data-buying-help-to-buy-scheme="true" data-buying-new-build="true" data-buying-shared-ownership="true" data-selling-shared-ownership="true" data-remortgage-shared-ownership="true" data-selling-leasehold="true" data-remortgage-leasehold="true" data-text="Find Out Now" data-color="#7DB560" data-form-button-color="#7DB560" data-form-color="#F4F8ED" data-form-text-color="#002D1D" data-size=“extra-large” data=border=“default”></div>
<script>
!function() {
    var s = document.createElement('script'); s.type='text/javascript'; s.async=true;
    s.src = 'https://s3-eu-west-1.amazonaws.com/cdn.hoowla.com/hoowla-quote-plugin-min.js';
    var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(s, e);
}();
</script>

^embed code for the pop up quote button

Try this Custom CSS:

a.hoowla-quote-button {
    padding: 1.2rem 2.004rem;
    background-color: #90bd37;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 5em;
    color: #fff;
    text-decoration: none;
    text-transform: none;
    font-family: Rockwell,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
}

Unfortunately this only works temporarily (if I have custom CSS panel open on the left). Is there another way round?

Try adding the style inline like this:

<div class="hoowla-quote" data-id="7710100-2" data-buying-help-to-buy-isa="true" data-buying-buy-to-let-or-2nd-home="true" data-buying-unregistered="true" data-remortgage-transfer-of-equity="true" data-buying-help-to-buy-scheme="true" data-buying-new-build="true" data-buying-shared-ownership="true" data-selling-shared-ownership="true" data-remortgage-shared-ownership="true" data-selling-leasehold="true" data-remortgage-leasehold="true" data-text="Find Out Now" data-color="#7DB560" data-form-button-color="#7DB560" data-form-color="#F4F8ED" data-form-text-color="#002D1D" data-size=“extra-large” data=border=“default” 
     style="
    padding: 1.2rem 2.004rem;
    background-color: #90bd37;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 5em;
    color: #fff;
    text-decoration: none;
    text-transform: none;
    font-family: Rockwell;
    font-size: 1.3rem;
    font-weight: 400;">
</div>
<script>
!function() {
    var s = document.createElement('script'); s.type='text/javascript'; s.async=true;
    s.src = 'https://s3-eu-west-1.amazonaws.com/cdn.hoowla.com/hoowla-quote-plugin-min.js';
    var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(s, e);
}();
</script>

Unfortunately this doesn't work. I get an error message on the top line of code starting with

<div class="hoowla-quote"

On 10/20/2023 at 11:20 PM, Jefferson0123 said:

Unfortunately this doesn't work. I get an error message on the top line of code starting with

<div class="hoowla-quote"

Where did you add the code? You should add this code to Code Injection or Code Block, not Custom CSS

Okay so I have used the following code in Code Injection:

/* Hoowla quote button */

a.hoowla-quote-button {
    padding: 1.2rem 2.004rem;
    background-color: #90bd37;
    border: 1px solid rgba(0,0,0,0);
    border-radius: 5em;
    color: #fff;
    text-decoration: none;
    text-transform: none;
    font-family: Rockwell,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
}

then for the button I have used a code block with the following embed script:

<div class="hoowla-quote" data-id="7710100-2" data-buying-help-to-buy-isa="true" data-buying-buy-to-let-or-2nd-home="true" data-buying-unregistered="true" data-remortgage-transfer-of-equity="true" data-buying-help-to-buy-scheme="true" data-buying-new-build="true" data-buying-shared-ownership="true" data-selling-shared-ownership="true" data-remortgage-shared-ownership="true" data-selling-leasehold="true" data-remortgage-leasehold="true" data-text="Click here for quote" data-color="#7DB560" data-form-button-color="#7DB560" data-form-color="#F4F8ED" data-form-text-color="#002D1D" data-size=“extra-large” data=border=“default”></div>
<script>
!function() {
    var s = document.createElement('script'); s.type='text/javascript'; s.async=true;
    s.src = 'https://s3-eu-west-1.amazonaws.com/cdn.hoowla.com/hoowla-quote-plugin-min.js';
    var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(s, e);
}();
</script>

The button still doesn't look right. Is there anything else I could try? The second screenshot shows how I want the button to look. Also I can't seem to reduce the excessive padding above and below the button.

Thanks for looking into this for me.

This code, you need to paste to Website Tools > Custom CSS

I have pasted the code in the Custom CSS section. Though the button styling is correct only when I have the Custom CSS panel open on the left. Is there anything else I could try?

The first screenshot shows how I want the button to look while the second screenshot shows how the button is currently.

@Jefferson0123 Try this, replace what you have with this CSS code. It has some higher specificity and I added the !important to try to override the original styles.

 

/* Hoowla quote button */

.sqs-block-code a.hoowla-quote-button {
    padding: 1.2rem 2.004rem !important;
    background-color: #90bd37 !important;
    border: 1px solid rgba(0,0,0,0) !important;
    border-radius: 5em !important;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: none !important;
    font-family: Rockwell,"Helvetica Neue",Helvetica,sans-serif !important;
    font-size: 1.3rem !important;
    font-weight: 400 !important;
}

That has worked – thank you so much!

One last thing on this... I'm sure this should be an easy fix but there is a lot of space above and below the button and I cannot seem to tighten the spacing. Below is the current embed script – can this be altered to forcefully reduce the spacing round the button?

<div class="hoowla-quote" data-id="7710100-2" data-buying-help-to-buy-isa="true" data-buying-buy-to-let-or-2nd-home="true" data-buying-unregistered="true" data-remortgage-transfer-of-equity="true" data-buying-help-to-buy-scheme="true" data-buying-new-build="true" data-buying-shared-ownership="true" data-selling-shared-ownership="true" data-remortgage-shared-ownership="true" data-selling-leasehold="true" data-remortgage-leasehold="true" data-text="Click here for quote" data-color="#7DB560" data-form-button-color="#7DB560" data-form-color="#F4F8ED" data-form-text-color="#002D1D" data-size=“extra-large” data=border=“default”></div>
<script>
!function() {
    var s = document.createElement('script'); s.type='text/javascript'; s.async=true;
    s.src = 'https://s3-eu-west-1.amazonaws.com/cdn.hoowla.com/hoowla-quote-plugin-min.js';
    var e = document.getElementsByTagName('script')[0]; e.parentNode.insertBefore(s, e);
}();
</script>

Really appreciate your help!

@Jefferson0123 oh yea, good old code block weirdness in fluid engine....

Try using a markdown block instead and paste that embed code in there. I would stretch the width of the markdown block to the entire width of the grid, then drag the bottom of the container of the markdown to make sure it's as short as it can be. This way we can add some code to make sure it's centered without just trying to eyeball position the container.

Then add this code to css too

section[data-section-id="6527af115add1c37569bca7d"] .sqs-block-markdown {
  text-align: center !important;
  
}