Jump to content

Adding javascript to body of a specific page, not footer,

Go to solution Solved by Ziggy,

Recommended Posts

I can't be the only person who wants to add custom code to an individual website page - NOT in the footer.  Everything I have found only addresses adding script in the footer which affects all pages unless you are editing something like a form element, then that is only amending an existing item.  I need to inject script of functions etc. that does operational things like import data from a separate URL and preform actions that can manipulate elements, create new ones, add data through links to other pages, etc.  This cannot be something new but it is mysterious why information is so hard to find.  Someone please help.

Link to comment
7 hours ago, sportticket said:

This cannot be something new but it is mysterious why information is so hard to find.  Someone please help.

Nope, nothing new. You can add scripts to an individual page's header code injection (found in the page settings) or by adding a code block to the page.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • Solution

You can use header code injection on a single page:

image.thumb.png.5c4d3ef82827c7a92667f7b85fbcdeaf.png

Go to the page Settings -> Advanced -> Page Header Code Injection

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
13 hours ago, sportticket said:

Hello Ziggy, I iam new to using the Forum and do not know if my reply to your response was actually forwarded after I bought you a coffee.  Please let me know as I need further help beyond your first response. Thank you. Rand

 

Link to comment
3 minutes ago, sportticket said:

these put the injection on ALL pages do they not?

No, that's why I'm point you towards using the header code injection on a single page. This puts the code just on that single page.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
2 minutes ago, sportticket said:

it does put my script on ALL pages, not just the one I was one when I entered code in the code injection! 

Can you share a screenshot of where you placed the code?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
3 minutes ago, sportticket said:

Here is the screenshot hopefully. 

This is the general code injection.

  • You need to go to the Pages menu.
  • Then find the page you want the code on.
  • Click on the gear icon for the page settings.
  • Go to Advanced.

Or follow my previous instructions and screenshot, note the difference to where you were placing the code.

46 minutes ago, Ziggy said:

You can use header code injection on a single page:

image.thumb.png.5c4d3ef82827c7a92667f7b85fbcdeaf.png

Go to the page Settings -> Advanced -> Page Header Code Injection

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

So that is great, I do not understand why the difference, no matter, however this still places script in the header and is visable to viewers - not what I want, I need the script to be in the body of the page's code and have it behave just like any other script that I write to call functions, import data from other URL's etc.  How is that possible if the script in the header and shows up to viewers? Rand

Link to comment
1 minute ago, sportticket said:

How is that possible if the script in the header and shows up to viewers?

Whether the script renders is based on the code. You have some plain HTML in the example, and that will always be rendered, if you use scripts instead of HTML it won't necessarily be rendered (depending on the code you write).

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Sorry, do not know what you mean by rendered.  My example is just text, and it still shows up in the header only, I do not want it there at all.  If I add HTML for example as a link for users to click on, will that element( buttoon, text box)  contain the script that I want to enact?

Link to comment
13 minutes ago, sportticket said:

header only, I do not want it there at all.

If you don't want your code in the header, add it to a code block on the page.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Does that mean that I can actually add a regular code block to a page, by selecting </>code,  and any script I want in an HTML code and have it rendered properly in the page and have the script run when a user clicks on the element (text box) using onClick?  That would be great.

Link to comment

Yes, try that.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

One more thing, if what I am guessing at works, would I need to first use an element (button or text box) that is then linked to another page that has the script?, because just selecting the </<code in the code block selection box would just put the code in the page - not what I want.  Else, how to I get by script into the click item without the script showing up to the viewer?

Link to comment
2 minutes ago, sportticket said:

One more thing, if what I am guessing at works, would I need to first use an element (button or text box) that is then linked to another page that has the script?, because just selecting the </<code in the code block selection box would just put the code in the page - not what I want.  Else, how to I get by script into the click item without the script showing up to the viewer?

I don't understand what you're trying to achieve here to be able to advise you. 

This code doesn't do anything but place text wherever you place the code:

image.png.0b34b4d014fe40bc9031bb4b55412c20.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

That was just a test to see what placing script in the header would do, that was before you showed me how to get the same into just a selected page.   Now that you have shown me that I likely need to use a code block I will try that with some sample script that does some on what I want, so please addess my last question as to what to add to the block in order for my code to get into the body of the page.  Do I need to add a textbox or button that is linked to a page with the code(I do not know if it is possible to link an element to script somewhere - that seems cumbersome.  So, if I just add a textbox to the code block, can I write an HTML with my needed javascript inside that textbox?

Link to comment
6 minutes ago, sportticket said:

so please addess my last question as to what to add to the block in order for my code to get into the body of the page

I did try to. Adding code to a code block on the page does add it to the body of the page.

8 minutes ago, sportticket said:

So, if I just add a textbox to the code block, can I write an HTML with my needed javascript inside that textbox?

You can write javascript in a code block, not a text block.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
15 minutes ago, sportticket said:

Then this is what I get if I edit this page.

This is normal, you can see the script working when you save and the page reloads, it will not run when you are editing the page.

This is not javascript, so nothing will happen when you view the page. Nothing will be visible.

image.png.a3b70e56bad23cebaa21197264530faf.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️ Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Getting close perhaps, but how do I run the code when I want, it needs to be run when either a user clicks on a button or textbox, or when other things in the code(depending on what the code is of course) operates behind the scene, onOpen perhaps, or importing data or doing other things "onClick" etc. Does that not mean that I need an element for the user to click on thus enacting the script?

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.