third party button and code block in header

Hi folks. My first post here, after making a handful of sites over the years. Been quite busy with Squarespace lately.

I have some Setmore (www.setmore.com) scheduling button code that embeds just fine via code block in a page body, and in my footer. However I'd really like to add that third party button to my header.

I'm aware that in SS 7.1 I can easily turn off the standard header button. Any workaround or insight as to how I can get a code block into my header, so I can include this Setmore button there? Far right side of my header would be the ideal position.

Please speak up if you've been through something similar and can get me started in the right direction. Thanks 🙂

@KR-SS Hi! Couple of questions:

Does the scheduling button link to a new page or open a popup on the same page? If it redirects to a new page, the header CTA button can be modified with custom code accordingly.

Have you tried adding the button under Pages > Main Navigation (by selecting the plus icon) > Link to see if it works?

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Thanks Creedon, yes of course I can post the site and know how to. Mine was a more general question I figured as I don't really have a non-working button or header, etc. Here you go:

https://lily-goby-nfws.squarespace.com
password is kevin

It's for a potential dog walking business, with hopefully a wee little bit of uniqueness to it.

You'll see the Setmore button in the first section of the home page and the footer. To restate my question, I was hoping to find a way to put a matching "code block" button up in the header on the far right. The standard header button (pointing to the contact page for the moment) is still toggled on there for now, and similar ones are in the body and footer until I see that I can replace all occurrences.

And Lesum, you can alter the behaviour on the Setmore side of things, but currently their booking "page" is set to be a pop-up. I hadn't considered it as a simple link type page, so thanks for that. I easily got their button in the body and the footer with a code block, so the header was my third and final spot. If I can get the official button working, that's probably the best and keeps everything matching. I can keep the simpler link idea in mind as a fallback, as there is a "custom URL" for a Setmore booking page which would be what I'd use.

thanks,
k

@KR-SS First add a header CTA button. Then add the following code in Website > Pages > Website Tools > Code Injection > Header

<script id="setmore_script" type="text/javascript" src="https://my.setmore.com/webapp/js/src/others/setmore_iframe.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
      var newHref = "https://booking.setmore.com/scheduleappointment/f11b6fcf-7ce4-4b77-9790-19338ec60ce7";
      var newId = "Setmore_button_iframe";

      $(".header-actions-action--cta a").attr("href", newHref);
      $(".header-actions-action--cta a").attr("id", newId);
    });
</script>

Let me know if it works. Thank you!

Thanks. That doesn't add anything to my header unfortunately.

Is that simply because this site isn't published, or otherwise "upgraded" yet? I'm not sure if it would be down to just that, but I should ask. I'm just working on this quietly for now, which isn't out of the ordinary I know.

I turned off the standard button and also the social links in the header to see if there was any conflict... but no change there.

I've left that header injection code in for now.

---

Not that it would change what you are attempting, but poking around Setmore, it seems that https://walkdogwalk.setmore.com/ does the same thing as that longer URL with the ID number in it. They seem to have a few types of URLs that all really point to the same thing.

Oh wait, you want a button in the header. I guess I don't know what you mean by a CTA button. I haven't heard that one before. So that's likely the gap here. 🙂

edit: Ah a call to action button, so just a button I guess. I can certainly just use that SS button and link it to the Setmore booking page. I was just wondering if I could get their button. Not make or break. I could go the other route and use SS buttons.

@KR-SS You already have the header button (which some might call a CTA button 🙂) at the right corner. It's opening the pop-up; I just checked.

Thanks. Yes I added the link to the button just now (and the other SS buttons in the body and footer), so I think this completes where you were trying to get me.

The header injection code is still in place of course – so if you don't mind, give me a quick description of what that code is doing, vs. how the header button would work if I had the link in the button, but without the header injection.

Thanks again, good job.

I guess the one difference I see is that my header button now does the pop-up, but my other two buttons just open an external page, as is set for those buttons (so that's what I'd assume your code is doing, enabling the pop-up).

If there's body and footer code to have them all as pop-ups that would then get everything even Steven...

@KR-SS I already added the link to the header button using the custom script I shared earlier. No need to add the link to the header button again. 

The custom script is adding the link and ID to the header button. The header button needs the ID 'Setmore_button_iframe' to be recognized by the Setmore embed code.

Got it. OK I've removed the link in that button so it's just back to your code affecting it, and it's working fine. I swear it wasn't working for a bit there, which is why I added the link. Oh well, all good in the end.

So, is there then a way to get a pop up going for my other buttons? Note that aside from these booking buttons, the only other button my site would be the "send" button in the contact form. Looks like I also put a booking button on the contact form too, but hadn't really finished up there yet.

Have to step out for a while. Happy to pick this up later, or tomorrow 🙂

Thanks, I assume you mean to add this in addition to the code that is already there. Which you do, since it all works fine. Well done.