Jump to content

third party button and code block in header

Recommended Posts

Posted (edited)

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 🙂

Edited by KR-SS
Link to comment
  • Replies 14
  • Views 224
  • Created
  • Last Reply

Top Posters In This Topic

@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?

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Posted (edited)

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

Edited by KR-SS
Link to comment
Posted (edited)

@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!

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment
Posted (edited)

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.

Edited by KR-SS
Link to comment
Posted (edited)

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.

Edited by KR-SS
Link to comment

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.

Link to comment

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...

Link to comment
Posted (edited)

@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.

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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.

Link to comment
Posted (edited)

@KR-SS I see you added the external link https://walkdogwalk.setmore.com/ to the 'Book A Walk' buttons. Please keep this link on all buttons where you want to add the popup (except the header button).

After that, add the following code in Website > Pages > Website Tools > Code Injection > Header. This should open the popup on all buttons throughout the site that are linked to https://walkdogwalk.setmore.com/

<script>
$(document).ready(function() {
  $('a[href="https://walkdogwalk.setmore.com/"]').attr('href', 'https://booking.setmore.com/scheduleappointment/f11b6fcf-7ce4-4b77-9790-19338ec60ce7').attr('id', 'Setmore_button_iframe');
});
</script>
Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

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.