How to dynamically add content from a jQuery selector to your lightbox

jQuery selectors allow you to find and target specific HTML elements. With the Dynamic feature, you can target any HTML element and use that content to dynamically populate a lightbox.

For example, most WordPress blogs classify their articles by category. You may want to display a newsletter sign-up form that’s customized based on the blog post category. That way, a visitor reading an article in the Features post category would see a customized lightbox like this:

Here’s how you can set this up:

1. Find the category tag jQuery selector. In this case, it’s .cat-links a:
   
   
2. From the Boxes page, click on Dynamic next to the appropriate lightbox.
   
   
3. Click on +New Dynamic Item.
   
   
4. You’ll see the window below:
   
   
   • Source: In this example, we’re choosing JQuery as the source (other source options are URL parameter and URL).
   • URL Parameter Name: In this case, we’re pushing text from the category tag.
   • Operator: In this case, we’re using “equals,” but you have a range of options in this drop-down menu.
   • Comparison: Here we’re not worried about matching the case, so we're picking Case Insensitive. You can also select Case Sensitive if you need to.
   • Source Value Matches: Here we’re saying the source value (the category tag) can match anything. In other cases, you may have a specific match in mind, and you can select Custom from the drop-down menu.
   • Target: The target in our case is the Text 2 field within our lightbox. You can target text fields, image fields, HTML, buttons, and more.
   • Target Page: Here we’re targeting the Main Page of our lightbox.
   • Target Fill: Here we’re pushing the text from the category tag, so we’re going to use Source Value. If you want to display something else, choose Custom.
   • Target Fallback Value: If there’s no value in the category tag, we’ll display a fallback value, in this case, Mobile Marketing Newsletter.
     
     Update: You can now choose a jQuery Method for your jQuery Selector in Dynamic. Originally, we used “.html()” by default. But now, you can choose between the following methods: HTML, text, Val, length, attr, prop, is, CSS, and hasClass.

Have questions about dynamically adding content using jQuery selectors? Send an email to help@retentionscience.com.