Documentation

# How to Create a Donation Rescue Pop Up

# How to Create a Standard Donation Rescue Pop Up

# Approach 1: Use a utility tool with preview

  • Create the pop-up using the donation pop-up authoring tool (opens new window)
  • Copy the code for the new pop-up from the textarea with the label Output
  • Disable your editor in Luminate global settings.
  • Locate a page reus_donation__popup in the Pagebuilder.
  • Insert the details of the new pop-up into donationPopUps array.
  • Each entry in the JSON object is equivalent to one pop up. The list below shows all available options.
  • Save the page.
  • While the preview comes close, it may not always be 100% accurate. Test the pop-up on the donation page to ensure the desired look and feel has been achieved.

# Approach 2: Raw code update

  • Disable your editor in Luminate global settings.
  • Locate a page reus_donation__popup in the Pagebuilder.
  • Update the source code of the page, it contains a JSON object for each pop-up and custom HTML for custom pop-ups.
  • Each entry in the JSON object is equivalent to one pop up. The list below shows all available options.
  • Save the page.
  • Test the pop-up on the donation page to ensure the desired look and feel has been achieved.

# Pop-up details properties

  • "donationFormId" - Required Luminate donation form id where the pop-up should appear. If you want the pop-up to display on multiple forms include them as an array, in brackets with each value separated by comma.
    Examples: "donationFormId: "1620",, "donationFormId: ["1620", "1621"],

  • "analyticsTitle" - Required unique title of the pop-up, this title will show up in analytics reports to help identify conversions. The title should be unique, yet humanly understandable. Do not include form id, it will be added automatically to the title.
    Example: "analyticsTitle": "Boy with an umbrella, don't leave"

  • "displayBorder" - Optional flag indicating whether or not the border should be rendered. The default value is false.
    Examples: "displayBorder": true,, "displayBorder": false,

  • "imageMobile" - The full URL of the background image that will appear on mobile resolutions.
    Example: imageMobile: "https://www.savethechildren.org/content/dam/global/images/countries/united-states-of-america-usa/wwd-protection.jpg/_jcr_content/renditions/cq5dam.thumbnail.360.360.jpg"

  • "imageDesktop" - The full URL of the background image that will appear at desktop resolutions.
    Example: imageDesktop: "https://www.savethechildren.org/content/dam/global/images/countries/united-states-of-america-usa/wwd-protection.jpg/_jcr_content/renditions/cq5dam.thumbnail.768.768.jpg"

  • "textBoxMaxWidth" - Optional maximum width of the box, must include units. If not set the default value of 90% will be used.
    Examples: "textBoxMaxWidth": "70%",, "textBoxMaxWidth": "320px",

  • "textBoxDesktopHorizontalPosition" - Optional horizontal position of the textbox on desktop. Available values are left, center, right. If not specified, the default value of left will be used.

  • "textBoxDesktopVerticalPosition" - Optional vertical position of the textbox on desktop. Available values are top, middle, bottom. If not specified, the default value of top will be used.

  • "textBoxMobileHorizontalPosition" - Optional horizontal position of the textbox on mobile devices. Available values are left, center, right. If not specified, teh default value of left will be used.

  • "textBoxMobileVerticalPosition" - Optional vertical position of the textbox on mobile devices. Available values are top, middle, bottom. If not specified, the default value of top will be used.

  • "headlineText" - The optional headline text.

  • "hideBodyTextOnMobile" - Optional flag whether or not the pop-up body text should be hidden on mobile. The default value is false.
    Examples: "hideBodyTextOnMobile": true,, "hideBodyTextOnMobile": false,

  • "bodyText" - Optional body text of the pop-up, which can include HTML. Example: "bodyText": "<p>Don't leave!</p>",

  • "button1Color" - Optional color of the first button. The possible values are biscuit, red, red--extra-large, teal, text, text--small, edit, external-link, question. The default value is biscuit.
    Examples: "button1Color": "red--extra-large", "button1Color": "biscuit",

  • "button1Condition": - Optional condition for the button to display. The possible values are isMonthlySelected, if a monthly gift type was selected and isOneTimeSelected, if the one-time gift type was selected. If no value is specified, the button will display regardless of the gift type settings. The condition will only work on forms that are configured to have two standard payment types. This will not detect if the form is configured for one-time or monthly payments.
    Examples: "button1Condition": "isMonthlySelected", "button1Condition": "isOneTimeSelected",

  • "button1Link" - The link or action of the first button. The possible values are change-to-one-time, change-to-monthly, close, or full URL of the link. No default is specified.
    Examples: "button1Link": "close",, "button1Link": "change-to-one-time",, "button1Link": "change-to-monthly",, "button1Link": "http://example.com",

  • "button1Text" - Text of the first button. Required if setting a button.

  • "button2Color" - Color of the second button, if used. The specifications are identical to the first button.

  • "button1Condition" - Condition for the second button, if used. The specifications are identical to the first button.

  • "button2Link" - Link of the second button, if used. The specifications are identical to the first button.

  • "button2Text" - Text of the second button, if used. The specifications are identical to the first button.

# How to Add a Custom Rescue Pop Up to the Donation Form

  • Create HTML for the pop-up. Use data-fancybox- attributes to give it custom dimensions. Add data-s-object-id attribute to each button for analytics tracking.
  • Add a unique ID HTML attribute to the donation form.
  • Locate a page reus_donation__popup in the Pagebuilder.
  • Insert the code for the pop-up into reus_donation__popup.
  • Update donationPopUps object by inserting a new array entry. Just to just add three parameters into the object: analyticsTitle, donationFormId and customPopUpId. The value of customPopUpId should match the unique ID of the pop-up created in the first step. Note: include just the name of the id. Example:
<script>
  var donationPopUps = [
    {
      "analyticsTitle": "Crying Child in Mother's arms",
      "customPopUpId": "pop-up--custom-1560"
      "donationFormId" : "1560",
    }
  ]
</script>

<div id="pop-up--custom-1560" class="pop-up pop-up--custom-1560">
  Content of my custom pop-up
</div>
  • The following dynamic options are available in the custom pop-up. Code examples will only include the essential elements of the pop-up.
    • Button to close the overlay <a @click="closeOverlay"></a>
    • Button to change payment to monthly <a @click="changeToMonthly"></a>
    • Button to change payment to one-time <a @click="changeToOneTime"></a>
    • Show button only if monthly gift type is selected <a v-if="isMonthlySelected"></a>
    • Show button only if one-time gift type is selected <a v-if="isOneTimeSelected"></a>
    • Hide certain elements on mobile <div class="hidden--mobile">My text</div>

# Examples

Here's a sample of the full contents of the reus_donation__popup page for reference.

<script>
  var donationPopUps = [
    {
      "donationFormId" : ["1620", "1628"],
      "analyticsTitle": "Boy with an umbrella, don't leave",
      "showBorder": true,
      "imageMobile": "https://www.savethechildren.org/content/dam/global/images/countries/united-states-of-america-usa/wwd-protection.jpg/_jcr_content/renditions/cq5dam.thumbnail.360.360.jpg",
      "imageDesktop": "https://www.savethechildren.org/content/dam/global/images/countries/united-states-of-america-usa/wwd-protection.jpg/_jcr_content/renditions/cq5dam.thumbnail.768.768.jpg",
      "textBoxMaxWidth": "70%",
      "textBoxDesktopHorizontalPosition": "right",
      "textBoxDesktopVerticalPosition": "top",
      "textBoxMobileHorizontalPosition": "right",
      "textBoxMobileVerticalPosition": "top",
      "headlineText": "Please don't leave",
      "hideBodyTextOnMobile": true,
      "bodyText": "<p>Your gift truly makes a difference.</p>",
      "button1Color": "red",
      "button1Text": "Donate",
      "button1Link": "close",
      "button2Color": "teal",
      "button2Condition": "isMonthlySelected",
      "button2Text": "Change to One-Time",
      "button2Link": "change-to-one-time",
    },
    {
      "donationFormId" : "1621",
      "showBorder": true,
      "imageDesktop": "https://www.savethechildren.org/content/dam/usa/images/catalog/goat-m233692-rec.jpg/_jcr_content/renditions/cq5dam.thumbnail.768.768.jpg",
      "textBoxMaxWidth": "50%",
      "textBoxDesktopHorizontalPosition": "center",
      "textBoxDesktopVerticalPosition": "bottom",
      "textBoxMobileHorizontalPosition": "right",
      "textBoxMobileVerticalPosition": "bottom",
      "headlineText": "Lorem Ipsum",
      "hideBodyTextOnMobile": false,
      "bodyText": "<p>This pop-up has only desktop image.</p>",
      "button1Color": "red",
      "button1Text": "Close",
      "button1Link": "close",
      "button2Color": "teal",
      "button2Text": "Link",
      "button2Link": "https://lo-test.savethechildren.org/site/Donation2?df_id=1625&cid=Direct:DNL_EM_TEST:Manual_Firefox_Dev_Generic:12/31/1099",
      "analyticsTitle": "Test Pop Up 123",
    },
    {
      "donationFormId" : 1625,
      "analyticsTitle": "Custom Pop Up 1625",
      "customPopUpId": "pop-up--custom-1625"
    },
  ];
</script>
<!-- Pop-up container, do not edit or remove -->
<div class="pop-up" id="pop-up" data-s-region-id="Overlay|Donation Exit Intent Pop-Up|||[[S80:userState]]" data-fancybox-padding="0">
  <div id="pop-up__wrapper" class="pop-up__wrapper">
    <!-- this tag and its inner contents will be replaced -->
  </div>
</div>

<!-- Custom pop-up for form 1625 -->
<div id="pop-up--custom-1625" class="pop-up pop-up--custom-1625">
  <div class="pop-up__wrapper pop-up__wrapper--border">
    <div class="pop-up__content">
      <div class="pop-up__text-box">
        <h1>This is a custom pop-up with border</h1>
        <p>The contents of this box will be parsed</p>
        <p>You can still use standard functions to close the box, downgrade or upgrade the payment, you just need to provide appropriate HTML markup</p>
        <p class="hidden--mobile">
          This text will be hidden on mobile.
        </p>
        <p v-if="isMonthlySelected">
          This content will show if monthly payment is selected on a combo form.
        </p>
        <p v-if="isOneTimeSelected">
          This content will show if one-time payment is selected on a combo form.
        </p>
        <div class="pop-up__buttons">
          <a @click="changeToOneTime" class="button button--red hidden--mobile" data-s-object-id="Button|Change to one-time|This attribute needs to be included for analytics">
            Change to one-time
          </a>
          <a @click="changeToMonthly" class="button button--teal" data-s-object-id="Button|Change to monthly|This attribute needs to be included for analytics">
            Change to monthly
          </a>
          <a @click="closeOverlay" class="button" data-s-object-id="Button|Close|This attribute needs to be included for analytics">
            Close
          </a>
        </div>
        <p>Lorem Ipsum dolor amet. This is my custom pop-up.</p>
      </div>
    </div>
  </div>
</div>

# How to Disable the Donation Pop-up for an Experiment

In some cases, like running a usability experiment the administrators may want to show the pop-up to some users but not others. There are two approaches one can take to disable the pop-up.

  1. Add data-donation-exit-intent-popup-disabled="true" attribute to the <body> tag, the code will automatically set the cookie based on which the script determines whether or not the pop-up should be shown.
    Example: <body data-donation-exit-intent-popup-disabled="true">
  2. Set a cookie for the existing donation form with JavaScript. The name of the cookie must have the pattern stc-exit-intent-popup-shown-{formId}, where {formId} is the donation form id. The value of the cookie must be 1.
    Example (uses all the utility function defined in the code base): Cookies.set('stc-exit-intent-popup-shown-' + $body.attr('data-donation-form-id'), 1);

# Analytics Reports

Because the data from two different variables need to match to get the full picture, here is one suggested approach for running the reports.

  1. Run the report that show Promotional Even Names in a row with columns set to Visits, Promotional Impressions and Purchases.
    This will give us the number of promotions that were shown to visitors & how many purchases have been made.
    There will be one row with the promotional event 'Undefined', this captures all visits without a shown promotion.
  2. Run the report showing Activity Map Regions and Activity Map Links for each region as rows with column Activity Link Counts. This will show us how each promotions and other overlays were interacted with. If you limit the report to show only link that have an Activity Map Region that contains Overlay|Donation Pop-Up, you will see only donation rescue pop-ups.
  3. To get the complete picture in one report both reports generated above will have to be exported and then merged in Excel or another software with a condition that a Promotional Event Name is equals to the Activity Map Region.

As of October 17th 2018, the donation pop-ups now have the following naming convention on their promotional event and region attributes. This was done to allow analytics report be written specifically for these pop-ups and not to be mixed with other site pop-ups. Overlay|Donation Pop-Up {popUpAnalyticsTitle} {donationFormId}|||{userState}

← Donation thank you page & autoresponder configuration →