Regular Gift Upgrade Option on Instapage

This recipe is very similar to our recipe on using URL parameters, except we'll provide the specific steps you'd use if building your page in the Instapage page-builder (for example).

To recap, our goal is to have a generic thank you page, but when we see that the supporter made a one-off gift, we'll present the donate form configured to provide the option of becoming a regular donor.

Ingredients

Donate form loader script.
Donate info loader script. Grab it from the previous recipe.
An HTML block (code below) which will hold the donate form.

Instructions

Edit the page in Instapage.
Click { } JavaScript and navigate to the HEAD section/tab.
Paste the donate form loader script.
While still in the JavaScript configuration screen, navigate to BODY section/tab.
Paste the Donate info loader script. It should look like this:

/** Get donation info from donate redirect URL parameters.
 */
function getDonationInfo() {
  var url = new window.URL(window.location.href);
  return {
    amount: url.searchParams.get('amount'),
    firstName: url.searchParams.get('firstName'),
    recurring: url.searchParams.get('recurring') === 'true',
    meta: JSON.parse(decodeURIComponent(url.searchParams.get('meta')) || null),
    transaction: {
      id: url.searchParams.get('transactionId'),
    },
  };
}

function thankyouPageLoader() {
  var donationInfo = getDonationInfo();
  if (donationInfo.recurring) {
    document.body.classList.add('recurring-gift');
  } else {
    document.body.classList.add('one-off-gift');
  }
  // make donation info available
  document.donationInfo = donationInfo;
}
thankyouPageLoader();

Exit the JavaScript screen and add a white box with some black text. It should say something like "Thanks [firstName]" (Instapage will replace [firstName] with the value from a URL parameter of the same name.)
To the right of the block, add a raw HTML block.
Edit the HTML and we'll add some text asking to upgrade, as well as the form:

<div class="hide-if-recurring match-instapage-style">
  <h2>
    <span id="donorName">Now</span>, would you like to upgrade your gift to a regular
    gift every four weeks to create an even bigger impact?
  </h2>
  <p>
    Since you've already made one donation today, you can join now and your first
    regular gift will come out four weeks from now.
    (You won't be charged again today.)
  </p>

  <div id="gpap-donate-widget"
    data-form-variant="mini"
    data-frequency="recurring"
    data-redirect-url-success="https://donate.greenpeace.org.au/donate/thank-you-test-dev"
    data-trial-days="28"
  >

  <script>
    // set first name
    if (!document.donationInfo) {
      console.warn('donation info not yet available');
    }
    if (document.donationInfo && document.donationInfo.firstName) {
      document.getElementById('donorName').innerHTML = document.donationInfo.firstName;
    }
  </script>
</div>

Finally, we'll add a bit of CSS to make it match the style of our standard Instapage blocks. Open the < > HTML/CSS menu and add some styles (you may need to adjust as necessary to match your style exactly):

<style>
  .hide-if-recurring {
    display: none;
  }
  .one-off-gift .hide-if-recurring {
    display: block;
  }

  .match-instapage-style {
    background: white;
    color: black;
    padding: 20px;
    text-align: left;
  }
  .match-instapage-style h2 {
    font-size: 23px;
    font-weight: bolder;
    margin-bottom: 1em;
  }
  .match-instapage-style p {
    font-size: 15px;
    line-height: 24px;
    margin: 1em;
  }
</style>

And that's it. You can test by visiting your page with URL parameters added, like http://your-thank-you-page?amount=10&firstName=alice&recurring=false (to see the RG form) (or with &recurring=true to see that the form is hidden if someone has already made an RG).

Ingredients​

Instructions​

Ingredients

Instructions