Special Offer Pop-up

<?php

	// Customizable Settings.

	$offer_title        = 'Special Offer!';

	$offer_message      = 'Sign up now and get 20% off your first purchase.';

	$offer_button_text  = 'Grab the Offer!';

	$offer_button_link  = '/your-special-offer-link'; // Update with the actual URL.

	$background_color   = '#ffeb3b';

	$border_color       = '#f1c40f';

	$text_color         = '#333';

	$button_color       = '#f1c40f';

	$button_hover_color = '#d4ac0d';

	?>

	<style>

		#special-offer {

			display: none;

			position: fixed;

			bottom: 20px;

			right: 20px;

			width: 300px;

			padding: 20px;

			background: <?php echo esc_attr( $background_color ); ?>;

			border-radius: 5px;

			border: 1px solid<?php echo esc_attr( $border_color ); ?>;

			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

			z-index: 1000;

			font-family: Arial, sans-serif;

		}

		#special-offer h3 {

			margin-top: 0;

			color: <?php echo esc_attr( $text_color ); ?>;

		}

		#special-offer p {

			color: <?php echo esc_attr( $text_color ); ?>;

		}

		#special-offer .offer-button {

			background-color: <?php echo esc_attr( $button_color ); ?>;

			color: #fff;

			padding: 10px;

			border: none;

			border-radius: 3px;

			cursor: pointer;

			text-align: center;

			display: block;

			font-size: 16px;

			text-decoration: none;

			margin-top: 10px;

		}

		#special-offer .offer-button:hover {

			background-color: <?php echo esc_attr( $button_hover_color ); ?>;

		}

		#close-offer {

			position: absolute;

			top: 5px;

			right: 5px;

			background-color: transparent;

			border: none;

			font-size: 16px;

			cursor: pointer;

			color: <?php echo esc_attr( $text_color ); ?>;

		}

	</style>

	<div id="special-offer">

		<button id="close-offer">&times;</button>

		<h3><?php echo esc_html( $offer_title ); ?></h3>

		<p><?php echo esc_html( $offer_message ); ?></p>

		<a href="<?php echo esc_url( $offer_button_link ); ?>" class="offer-button"><?php echo esc_html( $offer_button_text ); ?></a>

	</div>

	<script>

		document.addEventListener( 'DOMContentLoaded', function () {

			function shouldShowPopup() {

				var dismissedTime = localStorage.getItem( 'specialOfferDismissed' );

				if ( !dismissedTime ) {

					return true; // Never dismissed

				}

				var now = Date.now();

				var sevenDays = 7 * 24 * 60 * 60 * 1000; // 7 days to stay dismissed.

				return ( now - dismissedTime ) > sevenDays;

			}

			if ( shouldShowPopup() ) {

				setTimeout( function () {

					document.getElementById( 'special-offer' ).style.display = 'block';

				}, 2000 ); // Show after 2 seconds

			}

			document.getElementById( 'close-offer' ).addEventListener( 'click', function () {

				document.getElementById( 'special-offer' ).style.display = 'none';

				localStorage.setItem( 'specialOfferDismissed', Date.now() );

			} );

		} );

	</script>