JosefNT

Jonathan,

I found your question about linking directly to the content within a CodeLights modal while trying to find the same answer for a client site. I haven’t found any pre-built methods for this functionality, but I have managed to script my own solution. I’m sharing it here in case anyone else requires linking directly to modal content.

The script below implements the small GetUrlVars gist from GitHub user Kaioe, available at: https://gist.github.com/kaioe/8401201

In my implementation, I placed two CodeLights popup shortcodes into a footer widget area to popup the site’s Privacy Policy and Terms of Use. The footer widgets load on all pages, so appending the querystring to any URL within the site will trigger the popup on page load.

Load the script below on every page from which you want to allow this triggering method, either through enqueue via functions.php or from a per-page header/footer script plugin (Note: <script></script> tags may or may not be needed depending upon your chosen implementation):

<script>
jQuery(document).ready(function() {
	// Trigger Codelights Modal Popups from querystring

	// Get the value of the querysting parameter you chose for triggering
	var terms = getUrlVars()["terms"];

	switch (terms) {
		// Trigger opening Terms of Use modal if value is "use"
		case "use":
			jQuery(".footer-widgets .cl-popup:nth-of-type(1) .cl-popup-trigger").trigger("click");
			break;

		// Trigger opening Terms of Privacy Policy modal if value is "policy"
		case "policy":
			jQuery(".footer-widgets .cl-popup:nth-of-type(2) .cl-popup-trigger").trigger("click");
			break;

		// Default to do nothing
		default:
			break;
	}
});

// Gather any querystring parameters
function getUrlVars() {
	var vars = [], hash;
	var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
	for(var i = 0; i < hashes.length; i++)
	{
		hash = hashes[i].split('=');
		vars.push(hash[0]);
		vars[hash[0]] = hash[1];
	}
	return vars;
}
</script>

The individual cases in the switch statement can use any valid jQuery selector to reference the popup trigger element. I inspected the page from my frontend to determine which element to target. In my case, since I only had two modals, using .cl-popup:nth-of-type(1) or :nth-of-type(2) was the simplest approach.

With the above script running on my pages, I can trigger the modal popup from a link structured as such:

https://www.mydomain.com/page/?terms=policy

or

https://www.mydomain.com/page/?terms=use

You can see the effect in action on the site I built for my client (in progress):

https://peachfest.nettechdata.com/?terms=policy

Hope this snippet is helpful!

Best Regards,

Josef

Joseph,

Not sure if you’re still working on this issue, but I thought I’d post an update in case anyone else searching for a solution comes across your post (as I did).

I was searching for a way to include a Facebook Pixel script throughout a client website. I was having problems, as the Pixel code was sent to me within a script tag and included a noscript variant. I attempted to enqueue it as I normally do, saving the code within a .js file and referencing it via wp_enqueue_script in the theme functions file … but it wouldn’t work.

//* Register Facebook Pixel script - DID NOT WORK
add_action( 'wp_enqueue_scripts', 'register_facebook_pixel' );
function register_facebook_pixel() {
	wp_enqueue_script( 'facebook_pixel', get_bloginfo( 'stylesheet_directory' ) . '/js/facebook-pixel.js', null, '1.0.0', true );
}

However, after a little toying with it, I found I was able to make the injection work by escaping PHP within my function and directly inserting the Pixel script, rather than using wp_enqueue_script. The If statement conditionally inserts the code into all pages except those defined in the array.

//* Register Facebook Pixel - WORKS!
add_action( 'wp_enqueue_scripts', 'register_facebook_pixel' );
function register_facebook_pixel() {
    if ( !is_page( array( 'forms', 'ordering', 'partner-with-us' ) ) ) { ?>
		<!-- Facebook Pixel Code -->
		<script>
		!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
		n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
		n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
		t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
		document,'script','https://connect.facebook.net/en_US/fbevents.js');
		fbq('init', '0000000000000000');
		fbq('track', 'PageView');
		</script>
		<noscript><img height="1" width="1" style="display:none"
		src="https://www.facebook.com/tr?id=0000000000000000&ev=PageView&noscript=1"
		/></noscript>
		<!-- DO NOT MODIFY -->
		<!-- End Facebook Pixel Code -->
  	<?php }
}

If anyone else comes across this post and has a better method of inserting script with noscript tags, please post, as I am following for updates!

@josefism on Twitter

I believe that would be:

[faqs filter="your-group-slug-1"] in the first page, then

[faqs filter="your-group-slug-2"] in the second page, and

[faqs filter="your-group-slug-3"] in the third page.

You can try the argument from the “Other Notes” tab, under the “Default Shortcode Arguements” section:

styles_default="true"

and try setting it to “false”. But if you can get it to work, please let me know, as it doesn’t seem to be working in my implementation. Could be something else causing me problems, though, so I would be interested to find out if it works for someone else.

Figured it out. I hadn’t noticed the “View Instructions for Fields” link that contained the answer:

Default:
Use to pre-fill a value for the field. For select and radio fields, enter the number of the option to pre-select (1 = first item, etc.).