---
title: Create Cookie On the Click of an Element Within Your Popup
description: "If you are not already familiar with using custom JavaScript, check out our [getting started guide](http://docs.wppopupmaker.com/article/84-getting-started-with-custom-js). ## Example Let's say you have an **Auto Open**popup that triggers as soon as people visit your site—no matter what page the person visits,…"
url: "https://wppopupmaker.com/docs/creating-cookies/create-cookie-on-the-click-of-an-element-within-your-popup/"
updated: "2024-12-23"
category: Advanced / Creating Cookies
---

# Create Cookie On the Click of an Element Within Your Popup

If you are not already familiar with using custom JavaScript, check out our [getting started guide](http://docs.wppopupmaker.com/article/84-getting-started-with-custom-js).

## Example

Let's say you have an **Auto Open**popup that triggers as soon as people visit your site—no matter what page the person visits, you want the popup to open. That means the popup is a *sitewide* popup. Inside the popup are two images: clicking either one of the images puts you down Path A or Path B.

Once someone chooses their path, you don't want them to continuously be *spammed* by your popup. So, you should set a [cookie](https://wppopupmaker.com/docs/getting-started/popup-maker-glossary-of-terms/#cookies) after they click an image—this method works with any HTML element (text, image, link, etc.).

## Set Up Your Cookie

First, [set up your Cookie](http://docs.wppopupmaker.com/article/148-cookies) using the **Manual JavaScript**setting in the [Popup Editor](http://docs.wppopupmaker.com/article/39-creating-a-popup).

![file lyGPYTTGJW](https://s3.amazonaws.com/helpscout.net/docs/assets/559c68b9e4b03e788eda1692/images/58bc63c5dd8c8e56bfa832ad/file-lyGPYTTGJW.jpg)

After clicking **Add**, you will be able to customize every aspect of how your Cookie will behave. For detailed explanations on all of the cookie settings and features, check out the [Cookie Settings and Features Doc](http://docs.wppopupmaker.com/article/286-cookies-settings-and-features).

## Add and Edit Manual JavaScript

Copy, paste, and edit the code below either in your parent or child theme *functions.php* file, or use the [My Custom Functions plugin](https://wordpress.org/plugins/my-custom-functions/).  

The placeholder parameter 'css-selector-for-the-close-button' should be replaced with the HTML ID or class attribute assigned to the target page element. See the following related article for guidance on finding CSS selectors on your site. 

**Related article:** [Getting CSS Selectors](https://wppopupmaker.com/docs/triggering-popups/getting-css-selectors/)

Replace the popup ID number in the code example with the value assigned to your popup. You can find the ID under the  **Popup Maker**>**All Popups**>**CSS Classes**column. The integer value is appended to the class name *'popmake-'*. 

```
<?php
/**
 *  Note 1: Replace the placeholder string below ('css-selector-for-the-close-button')
 *  with the actual CSS selector (HTML ID or class attribute) assigned to the target
 *  attachment (for example, image or graphic).
 *
 *  Note 2: Replace the popup ID used below ('#popmake-123') with the
 *  value '#popmake-{integer}' used within your popup.  From the WP Admin, refer
 *  to 'Popup Maker' -> 'All Popups' -> 'CSS Classes (column)' -> to find
 *  the popup ID.
 *
 *  Add the following code to your theme (or child-theme)
 *  'functions.php' file starting with 'add_action()'.
 * -------------------------------------------------------------------------- */
add_action( 'wp_footer', 'my_custom_popup_scripts', 500 );
/**
 *  Close a popup by targeting a specific HTML element within a popup container.
 *
 * @since 1.0.0
 *
 * @return void
 */
function my_custom_popup_scripts() { ?>

    <script type="text/javascript">

        (function ($, document, undefined) {
            $('css-selector-for-the-close-button').click(function (e) {
                $('#popmake-123').trigger('pumSetCookie');
            });
        }(jQuery, document))

    </script><?php

}
```

View the source on [GitHub](https://github.com/PopupMaker/Library/blob/master/Creating_Cookies/set-cookie-on-element-click.php).

  If you need another example with more screen captures, head over to our [beginner-friendly step-by-step instructions for manually creating cookies](https://wppopupmaker.com/docs/controlling-popups/a-beginners-guide-to-manually-creating-cookies/).