[Resolved] How to add a javascript snippet to a page

[Michael]

Hi. I use GP Pro + Elementor. I’m trying to show a Mailerlite popup on a clicked event (an html link) on a page. Their instructions say to:
——
To show a popup when a link on your page is clicked, please insert the following code into the same page where you want the popup to appear.

<script>
…
</script>
——

How can I add the above portion to a page via GP (or Elementor)? There’s also some HTML to add to the link, but I now how to do that part. I’m not a code warrior, so I hope there is a simple way. 🙂
Thanks.

[David]

Hi Michael, if you are using the GP Default template (Not canvas) then you can add it the GP Hooks > WP_Footer

If you’re using Canvas then you can add it somewhere on the page using Elementor HTML Widget.

[Michael]

Thanks for your reply. Where do I confirm which one I’m using (default vs. canvas)?

[David]

You would have to had of selected the Canvas template in the post / page editor itself. If your using the GP nav and other theme elements across the site then you are using the Default template.

[Michael]

Okay, thanks for the info. So if I add the snippet via the GP Hooks, won’t that get loaded on every page of my site and potentially slow it down? If yes, any way to limit it to just a particular page? To implement the Hook, do I just enter the script into the hooks box? Any other steps to activate? Thanks. Sorry these questions are so basic/novice.

[David]

Thats correct, it will load on every page. We can make it conditional to display on certain pages. How many and which pages do you need the script to load?

BTW – edit your first post and remove the script you have added please. And just hit submit when done.

[Michael]

For now, I just need it on the home page of https://thebookpie.com But eventually (a few months from now) it will need to be on several pages on that site. Thanks again.
~ Michael

[David]

OK then i don’t think it will be necessary as the script looks reasonably light but if you want you can wrap the sccipt in this conditional and make sure Execute PHP is checked below the hook:

<?php if ( is_front_page() ) : ?>
    <script>
		the script
	</script>
<?php endif; ?>

We can later add more pages to the script by changing it to:

<?php if ( is_front_page() && is_page( [123,456,789]) ) : ?>
    <script>
		the script
	</script>
<?php endif; ?>

The numbers in the is_page refer to the separate page ID’s, each one separated by a comma.

[Michael]

Thanks for the wrapper and tips! I’ll give that a try. I appreciate you also answered what i’ll need to do a few months from now when the site gets built out much more and more pages have the link trigger.
~Michael

[David]

You’re welcome Michael

[Michael]

PS: I did the above, and it’s actually not working, it turns out. The Mailerlite people are looking into it right now. I’ll let you know here what’s up — shortly.

[David]

Hi Michael, try it without the conditionals and it may be a case they need the script in the WP_head hook.

[Author]

Posts