How can we help?

Dynamic lightbox content with URL parameters


With Web Forms you can add dynamic content to a lightbox without having to write any custom code. This can be accomplished by selecting the appropriate options in the Web Forms Administrative Interface.

Contact your Client Success Manager to get started with Web Forms.

Use cases

There are many possibilities when it comes to incorporating dynamic content with your lightboxes. For starters, you can add text from URL parameters to your lightboxes. Here are some ways you can use URL parameter text with your lightboxes:

  • Welcome email subscribers by name: By appending Cordial custom field data to URLs within your email campaigns, you can personalize lightboxes with customer information.
  • Show promotions customized to PPC keywords: For example, a mobile phone website might present a lightbox with the text "20% off all Android phones" if the search engine keyword is "Android phones".
  • Personalize lightboxes based on referring websites: You can display customized content based upon where a visitor comes from. For example, a lightbox can display dynamic options if the visitor came from a website such as Facebook, Pinterest, or LinkedIn.

Our example

In this example, we're going to dynamically add the text from a utm_content query string parameter to a lightbox text field.

1. To get started, go to the Boxes section of the Web Forms Administrative Interface and click on the Dynamic icon for your lightbox. The tooltip for this icon is Add Dynamic Items to Box.


2. Next, click on + New Dynamic Item.


3.  Next, you'll be presented with this form.


  • Source: The source field indicates where the dynamic content is coming from. In our example, we're choosing URL Param as the source. The other source options are jQuery selector and URL.
  • URL Parameter Name: This field is used to identify the variable in the HTTP query string. In this case, we're interested in the utm_content parameter.
  • Operator: This field determines what operator to use when evaluating the value of the URL parameter. In our example, we're using equals.  The other available options are: Contains, Starts With, Ends With, Does Not Equal, Does Not Start With, and Does Not End With.
  • Comparison: This field determines whether the evaluation of the source value will be done in a case sensitive manner. In our example, we're not concerned about matching case, so we'll choose case insensitive. 
  • Source Value Matches: This field is used to indicate whether the source value should match a particular value.  In our example, we don't want to restrict the utm_content parameter to a particular value, so we'll select Anything. In other cases, it may be useful to restrict the source value to a specific string value, in which case you should select Custom from the drop down menu and then provide a value that the source should match.
  • Target: This field is used to identify the lighbox field in which the dynamic content will be displayed. In our example the lightbox field is Text 2. You have the option of targeting text fields, image fields, HTML, and buttons.
  • Target Page: This field identifies the lightbox page where the dynamic content is displayed. In our example we're targeting the lightbox's Main Page.
  • Target Fill: This field is used to indicate what value should be shown in the lightbox. In our example, we're concerned with the text value from the utm_content URL parameter, so we're going to use Source Value. The other option is Custom which can be used to display a custom value.
  • Target Fallback Value: This field is available for you to provide a default value for the dynamic content in the event that the source parameter does not have a value. In our example, if the utm_content URL parameter does not have a value, we'll display the text "Mobile Marketing Newsletter".

4. Final result: This is a screenshot of a lightbox where the utm_content URL paramter's value is "Mobile%20Newsletter"



Please sign in to leave a comment.