If a client has purchased Zelle through JHA, please follow the below.

Zelle Ads

If your client requests a Zelle ad be created for their website, we have a pre-approved ad library that Designers can pull ad copy/imagery from for this product ad. Zelle has very specific guidelines for their ads, so the ad delivered must follow what we have pre-approved exactly.

If the client wants a different ad than what we have available, the designer will need to create an ad based on Zelle’s style guide (below) and the PC will need to submit the ad to jhamarketingsupport@jackhenry.com for review/approval by legal. Please do not offer this as an option originally, but know this is a backup if the client is being extremely picky regarding the ad.

**Note - Val designed the original Zelle ad library. If designers have questions, have them reach out to Val.

Zelle Landing Page

Zelle clients through JHA are required to have a landing page for Zelle content. By working with the JHA Zelle team they are able to choose between 3 options for implementation of that page:

  1. Iframe
  2. Link to outside URL
  3. HTML

We strongly recommend either the Iframe or the link b/c Zelle updates the landing page content several times a year and with the Iframe or Link option this is maintenance free for the FI!

However, if they choose the HTML option, the client will get the HTML directly from Zelle. They will need to provide this HTML to us to apply to the page within the CMS. The Zelle HTML has historically not worked on our sites. If the HTML is not formatting properly, the PC/CWA will need to submit the code to dev to work on resolving any formatting issues (This is charged at 2 hours standard).

Once the formatting issues are resolved, the PC/CWA must submit the landing page to jhamarketingsupport@jackhenry.com for review/approval by legal. To do this the PC/CWA should convert the page URL to a PDF for this submission (if you go to “Print” the webpage, there is an option to save as PDF).

Below is an example of HTML we adjusted that dev can use for assistance, if needed.

https://onlinelcsb-uat.banno.com/digital/zelle

Resizable Iframe Option

It is possible to have the page within an iframe that resizes to match content height, but it is hacky and maybe even unreliable. Here are the steps that might make it work.

  1. Save provided html page (page html only, not the entire webpage and images)
  2. Open the saved html page and add the following script to the bottom, and save
function JHZELLE_sendHeight() {
  if (window.parent.postMessage) {
    var bodyHeight = document.body.offsetHeight;
    window.parent.postMessage("JHZELLE_RESIZE::" + bodyHeight, "*");
  }
}

document.addEventListener("DOMContentLoaded", function () {
  JHZELLE_sendHeight();
});
document.addEventListener('resize', function() {
  JHZELLE_sendHeight();
});
  1. Upload the new page to the CMS assets - if it’s already there, re-upload it so the url can stay the same.
  2. If updating, that’s all. If this is a new page creation, continue…
  3. In CMS page’s footer code, add the following script
<script>
var JHZELLE_eventMethod = window.addEventListener
  ? "addEventListener"
  : "attachEvent";
var JHZELLE_eventer = window[JHZELLE_eventMethod];
var JHZELLE_messageEvent =
  "attachEvent" == JHZELLE_eventMethod ? "onmessage" : "message";
JHZELLE_eventer(
  JHZELLE_messageEvent,
  function (e) {
    if (-1 != e.data.indexOf("JHZELLE_RESIZE::")) {
      var E = e.data.replace("JHZELLE_RESIZE::", "");
      document.getElementById("JHZELLE_iframe").style.height = E + "px";
      console.log(e)
    }
  },
  !1
);
</script>
  1. In content area, add the iframe: <iframe style="border: none;" title="Zelle Information" src="/relative_path_to_page_in_CMS_assets" width="100%"></iframe>
  2. Publish and hope for the best.

Zelle Style Guide