Zelle HTML · Banno Docs

Not all Zelle pages are created the same so this may not be 100% accurate or all-encompassing. Also you may not see some things on your Zelle page that are listed in this document and that’s okay! Please let Karla or Rachel know if something needs added, edited, or removed

Client Responsibility

The client will need to go into their Zelle portal and provide us with the latest html code. The code is possibly only good for one year and should be sent to us yearly to update. Copying from their existing site should be avoided as we don’t know the last time that html was updated.

Even if they do send updated code it will more than likely still have ada issues

Zelle is currently (as of 04/2023) in the process of updating their base code for ADA. Other than changing the duplicate H1 tag, we are not correcting Zelle code for ADA until they do their own ADA fixes. Since it’s third party code, if we change it, we take ownership. That can get very tricky when/if something breaks and the client points fingers. We do our best not to edit third party code (or greatly limit what we do change) that is provided to us. First, set your site up for your new Zelle template.

GETTING STARTED

Copy the ‘blank’ or one-column template in your site and create your new Zelle template. zelle.mustache
Copy your blank template JSON from the site’s prod Postman, change it to Zelle where needed, and create your new template in the site’s UAT Postman. I leave it dev-only ‘false’ so that the client can create their own Zelle page on their prod site later.
Copy the ’top’ mustache of your site and use it to create a ’top-zelle’
Create zelle.scss (or .less). Where in your site’s files you create zelle.scss is up to you, but I usually create it in ‘custom’ or wherever it makes sense. Btw, you may have to go into main.scss and import it there.
Change the ’top’ mustache call in your new Zelle template to point to your top-zelle.

{{> top-zelle }}

Usually ‘blank’ only has one simple content area. Go down to the main body editable area of your new Zelle template and give it the class ‘hidden-content’ or ‘remove-blank’ depending on your site. Also give it a margin bottom class, like for example m-b-lg or mb-3 depending on your site. That way if the client wants to add content above their Zelle page, they can. Or if they don’t want to, then the area won’t show on the published page.
Go underneath the main body area and start your Zelle wrapper div.

<div class="zelle-wrapper">
  <!-- All of your Zelle HTML is going to go here -->
</div>

Go into your zelle.scss and start your zelle-wrapper styles.

.zelle-wrapper
{
  // All of your Zelle CSS is going to go here
}

Go into your new Zelle mustache and remove the site’s existing H1/page title from the template. This is because the Zelle HTML will have its own H1. Btw sometimes removing the H1 is really simple and sometimes it takes a little extra effort (sorry) because it’s in a tricky area. You might be thinking “Well why don’t we just remove the H1 from the Zelle code?” and you are welcome to spend the time and frustration to do so.

Now, you will copy over a bunch of code and etc to your site.

Sometimes the CWA/client sends Zelle files in a zip.
Sometimes they send an html file. If they attach it as html to the Jsource case, I ask the CWA to send the file again except in .txt because Jsource does weird things to html files, like adding and removing code.
Sometimes they send a URL of their Zelle page. For the URL, just open it in your browser and View Source to get all the code you need.

For these instructions, I’m going to use a URL that a client sent for example. https://images.printable.com/nonimpositions/22712/439889/22712_439889_dlurejsl_press.html

TOP-ZELLE

Start in the <head> of the Zelle code they sent and go from there. Do not copy over things like meta tags or title or jQuery library call or any of that. Just copy over the Google info. For example with, https://images.printable.com/nonimpositions/22712/439889/22712_439889_dlurejsl_press.html, you would just copy over the following lines into the top-zelle, and paste them above the closing </head> tag. Then you’re all done with top-zelle.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132065149-6"></script>
<script>
  window.dataLayer = window.dataLayer || [];

  function gtag() {
    dataLayer.push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'UA-132065149-6', {
    'page_title': 'The First National Bank of Hope Zelle Landing A'
  });
</script>

<!-- Google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">

Occasionally Zelle will put a bit of CSS in the <head> and then put the rest of the CSS in another place. You should also copy that bit of CSS over to the <head> in your Zelle template.

Sometimes there will be a call to an external stylesheet, possibly located at https://files.marcomcentral.app.pti.com. We can’t hotlink this CSS file. You will need to click on the link to the stylesheet and copy over all of the styles to your zelle.scss in your site.

CSS

On line 36 in the Zelle example, the CSS styles begin. Copy everything from line 37 down to line 900 and paste it in your zelle.scss, between your .zelle-wrapper declaration.

Now go through their CSS and look for anything problematic. Like the following:

A big one is that they like to use bootstrap classes (like .row and .col) and those conflict with the Bootstrap styles in the site, so they all need to be changed. Do a search for ‘.row’ and ‘.col’ and ‘.col-etc-etc’ and change them to ‘.zelle-row’ and ‘.zelle-col’ and ‘.zelle-col-etc’
They also like to do .header, which we usually have in our sites as well, so change it to .zelle-header.
Go through and change any really high level declarations, like body or html. Since you are putting everything in .zelle-wrapper, you can remove body and html and just have those styles be on the .zelle-wrapper.
Remove all the giant multi-line comments for ease of code viewing. However, this is not required.
Add this style to the Zelle styles because you will need it for external links in the Zelle HTML.

.sr-only
{
	position: absolute !important;
}

If this is an old .less site, and Zelle put in any calc functions in their CSS, those will have to be changed to jQuery because old less sites will not compress/deploy the calc functions correctly. (Shoutout to Evan for figuring that one out!) More on that later. Just make a note of them in your CSS. Example: Line 177 from the example Zelle page.

font-size: calc(14px + 7 * ((100vw - 320px) / (1200 - 320)));

We can’t directly link to (hotlink) any images or fonts, so you have to save all of those to your site. Just put the images in the images folder. The Zelle example has an image on line 95. Open that image in your browser, right click, and save it to the site’s images folder. Then in the CSS you will need to change that image url path to /assets/img/etcetc
Another thing I’ve noticed lately is that they (Zelle devs) will put a z-index of 1000 on .heading_image_overlay. You should be able to just remove the z-index.

HTML

Moving onto the Zelle HTML. In the Zelle example https://images.printable.com/nonimpositions/22712/439889/22712_439889_dlurejsl_press.html, the HTML starts on line 905. (We do not need <body> tags) So copy everything between their body tags and paste it into your Zelle mustache, in the .zelle-wrapper div. In the example, that would be line 905 down to line 1376.

First go through and change any .row and .col and .header divs to match your CSS – .zelle-row, .zelle-col, .zelle-header
Then go through and get any images you need, right-click and save them to the site’s images folder, and change all the image paths to /assets/img/etc
If there’s a video like the example has, we should be able to hotlink it because it’s hosted from a different domain. So don’t worry about downloading that.
Sometimes the “Log in and Enroll” button is not linked to anything. Sometimes it is. If it is linked, it’s usually linked to the bank’s online banking vendor. So make sure that their OLB domain is in the site’s allowlist. If it’s not linked, then just let that be as is. Usually the client or CWA will notice and ask for them to be linked later on.
Remove any multi-line comments from the Zelle HTML because they can break the whole mustache and cause the CMS to throw a red bar error. You may have to fix any weird spacing/line breaks etc.

FONTS (IF APPLICABLE)

Sometimes Zelle wants you to use special font files, like ZelleSans, ZelleSansLight etc. You can just download those and put them in src > root > files > font

Then you will have to change your font file paths in the CSS to /assets/font/etcetc

Note: I have seen Zelle mess up their font declarations a couple of times. Like they will declare ZelleDemi and then try to call a ZelleLight font file in the declaration. So just double-check their code.

SCRIPTING

Not all Zelle pages have accordions, and also Zelle has started doing their accordions with CSS now. But some (like in the Zelle example https://images.printable.com/nonimpositions/22712/439889/22712_439889_dlurejsl_press.html) have jQuery accordions, and there’s some script at the bottom. Copy that script and paste it into the new Zelle template below the scripts partial call.
You will need to fix the script because it will either break the whole page or just not work. It needs to have all the ’noconflict’ stuff removed. So remove the variable at the top, and anytime you see a $j, just change it to $. And remove the $j parameter from the document.ready function. When you are done, it will look like this:

  <script>
    $(document).ready(function() {
      $(function () {
        // Inner accordion
        $('.f92-item-heading').on('click', function () {
          if ($(this).hasClass('f92-active-accordion')) {
            $(this).siblings('.f92-item-text').slideToggle();
            $(this).removeClass('f92-active-accordion');
          } else {
            $(this).closest('.f92-accordion-group').find('.f92-active-accordion').removeClass(
              'f92-active-accordion').siblings('.f92-item-text').slideUp();

            $(this).addClass('f92-active-accordion').siblings('.f92-item-text').slideDown();
          }
        })

        //Outer accordion
        $('.f92-accordion-view-more').on('click', function () {
          if ($(this).hasClass('f92-more-active')) {
            $(this).removeClass('f92-more-active').siblings('.f92-accordion-more').slideUp();
          } else {
            $(this).addClass('f92-more-active').siblings('.f92-accordion-more').slideDown();
          }
        });

      });
    });
  </script>

If you have an old .less site, you will need to comment out any calc functions in your Zelle CSS and add them to the bottom of your Zelle mustache as jQuery instead. In the example Zelle page https://images.printable.com/nonimpositions/22712/439889/22712_439889_dlurejsl_press.html, line 135 has a calc function. You would comment that out of the CSS, and then at the bottom of your Zelle mustache, you would create this line of jQuery:

<script>
  $('h1.f92-hero-content').css('font-size', "calc(17px + 43 * ((100vw - 320px) / (1200 - 320)))");
</script>

Repeat this for everywhere in the CSS that has a calc function.
Sometimes the calc function is in a CSS media query, and you can use a JS media query for that. Example:

if (window.matchMedia('screen and (min-width:1025px)').matches)
{

}

Sometimes there will be a call to an external script file, possibly located at https://files.marcomcentral.app.pti.com. We can’t hotlink that JS file. You will need to click on the link to the JS file and save that JS file to your repo. Put this JS file into src > root > files > js. That way, the Zelle scripts won’t mix in with all of the other scripts in the site and potentially cause issues. Put a link to it in your mustache, under the scripts partial call, like so:

<script src="/assets/js/yourzellejsfile.js"></script>

Now that all your HTML, CSS, images, etc are situated, you can gulp, upload deploy, and create your Zelle page on UAT.

TESTING

Go through the page on UAT and make sure everything looks like the original page, as closely as possible. Don’t worry about it being super perfect. Sometimes the site’s styles are going to override what’s in the Zelle content and that’s okay. Sometimes you may have to make adjustments to the Zelle CSS. It just depends on how egregious the differences are. Be sure to check everything on smaller screens too.
Make sure that the font family and sizes are correct, on all screen sizes.
If accordions, be sure to click inside of every accordion and make sure that the content looks okay and any external links bring up the external link disclaimer.
As for external links like the app links, sometimes the site will automatically give those external link disclaimers. Sometimes you have to add the disclaimers. You can find an editable external disclaimer on the prod site (via Postman) and get its ID. Then go into the Zelle HTML and change the external links like so:

<a href="URL" class="external" data-disclaimer-id="DISCLAIMER_ID_HERE" target="_blank">Link</a>

If applicable, make sure that the “View More” button works.
Make sure all of the images are there.
Check for console errors.
Make sure that the site’s global things like the nav and the OLB login are working, and that the Zelle code isn’t causing anything else on the page to mess up.

TROUBLESHOOTING

Sometimes the font sizes look weird because the Zelle HTML was placed in the site’s subpage Bootstrap container and it’s a little too narrow. The Zelle HTML does not require being placed in a container. It comes with its own container. You may have to move your Zelle HTML out of a Bootstrap container.
There are a plethora of other issues that could occur due to not renaming the col and row divs, having really high declarations in the CSS, etc.
Sometimes you have to make adjustments to the Zelle CSS because the site’s styles are conflicting with the Zelle styles.
I have recently seen Zelle try to close a <section> using a </div> tag. So if your page looks super weird and you can’t figure out why, check the syntax!
Please feel free to let Rachel know if you are stumped by any issues. You may discover new issues! How exciting!
On one of my sites, it was an old LESS site and the Zelle accordions were the CSS kind (no script at all). When you expanded one, a scrollbar showed for a brief second. Plus, the bottoms of the accordions were getting their content cut off. Zelle set a max-height on each accordion of 100vh for some reason. There is some kind of hidden input that the user “checks” and the CSS does its thing from there. (Look for “input:checked” in your CSS.) It didn’t make the accordions look perfect, but it made them at least not be cut off on the bottom. I am hoping that Zelle has fixed this issue. Anyway I changed the max height here to ’none.’

.lp_content_wrapper input:checked~.tab-content {
    // max-height: 100vh;
    max-height: none;