Flyout - Open on Page Load

flyout-open-on-default.php

<?php
/*
 *	Set a flyout to open on page load
 *	Hooks into wp_footer to throw the JS towards the bottom
 *	of the page markup.
 *	
 *	Priority 99 is set to move it pass after
 *	jquery.sidr.min.js is called.
 *
 *	Use this to also set page conditions if needed. This function
 *	includes a few examples of how to do it. Only keep what you need.
 *	The function would go into your theme's functions.php.
 *
*/
function flyout_open_on_page_load() {
	?>
	<!-- Flyout Open by default -->
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			
			// Example: Open flyout #9 on load on all pages
			$.sidr('open', 'flyout-content-id-9');
			
			
			// Example: Only open Flyout #9 on page ID 22.
			<?php if( is_page(22) ) { ?>
				$.sidr('open', 'flyout-content-id-9');
			<?php } ?>


			// Example:  Only open Flyout #9 on all pages except page ID 246.
			<?php if( !is_page( 246 ) ) { ?>
				$.sidr('open', 'flyout-content-id-9');
			<?php } ?>


			// Example: Only open Flyout #9 only on these pages
			<?php if( is_page( array( 22, 157, 354 ) ) ) { ?>
				$.sidr('open', 'flyout-content-id-9');
			<?php } ?>


			// Example: Only open Flyout #9 only if Front page is latest post or Post Page in Settings > Reading
			<?php if( is_home() ) { ?>
				$.sidr('open', 'flyout-content-id-9');
			<?php } ?>

	
			// Example: Only open Flyout #9 only if Front page is a static page Settings > Reading
			<?php if( is_front_page() ) { ?>
				$.sidr('open', 'flyout-content-id-9');
			<?php } ?>


			// Example: Only open Flyout #9 if URL has a certain string/slug
			<?php if( strpos( $_SERVER['REQUEST_URI'], 'my-page-slug' ) !== false ) { ?>
				$.sidr('open', 'flyout-content-id-9');
			<?php } ?>
			

			
			// Example: Only open #9 if on desktop ( > 767px)
			var isMobile = window.matchMedia("only screen and (min-width: 768px)");
			if( isMobile.matches ) {
				$.sidr('open', 'flyout-content-id-9');
			}
			
			
			// Optional - Then close after 3 seconds the same Flyout.
			setTimeout( function() { 
				$.sidr('close', 'flyout-content-id-9'); 
			}, 3000 );
		});
	
	</script>
	<?php	
}
add_action( 'wp_footer', 'flyout_open_on_page_load', 99 );

scroll-overlay.css

/*
 *  With a flyout open on load, you may want
 *  disable scroll lock and the flyout overlay.
 *  These would go into your theme's style.css file or custom
 *  css area from your theme, WP Customizer, or CSS plugin. 
*/

/* Remove the overlay */
.flyout-overlay,
.flyout-overlay.active {
  display: none !important;
}

/* Remove the scroll lock */
html.flyout-lock,
html.flyout-lock body {
	overflow-y: visible !important;
}