← Snippets - Script - Menu Styling & Updates

Run Script (or Modal) on Click of Menu Builder Item

Sometimes clients will request that an editable item within the menu builder run a script, for example opening a chat client, instead of just going to a link. This is possible and can also be modified to allow things like an OLB modal to open directly on click of a menu item.

Run Script

How To

CMS - Menu Builder

Within the menu builder, create the link that you want to be running a script. You will want to create it as though it’s an external link, but make sure that the “open in new window” box is NOT checked. In the HREF for your link, put something like https://#contact. Make sure that the anchor is unique enough not to be used, and make sure that it matches the script used below.

HTML - scripts.mustache

Adding a script into this file will allow it to run after EVERYTHING else on the page is complete, ensuring that it won’t be overwritten by any other scripts or automatic CMS behavior. It searches for any items with a HREF of #contact (you can change the anchor to be whatever you need), and then adds a class. In this example, the second line then changes the HREF of any object with that class to run script by ZenDesk.

$('a[href="https://#contact"], a[href="#contact"], a[href="http://#contact"]').addClass('contact-link');
$('.contact-link').attr('href','javascript:zE.activate({hideOnClose: true});');

Example Sites

Open Modal

How To

CMS - Menu Builder

This works much the same as above. Create the link that you want to be opening a modal, and set it as an external link. Make sure that “open in a new window” is NOT checked. In the HREF, put something unique like https://##onlineBankingAnchor, which you’ll use to target in your script.

Scripts - banno-functions.js

This should be placed inside the banno.site.externalLinks function so that it doesn’t get overwritten by the external class.

 $('a[href="https://##onlineBankingAnchor"], a[href="##onlineBankingAnchor"], a[href="http://##onlineBankingAnchor"]').addClass('olb-link');
  $('.olb-link').attr({
    "href":"\#onlineBankingAnchor",
    "data-toggle":"modal",
    "data-target":"#onlineBankingAnchor"
  });
  $('a[href="https://##searchAnchor"], a[href="##searchAnchor"], a[href="http://##searchAnchor"]').addClass('search-toggle-link');

Example Sites

Tags: bs3, bs4, script, html, cms, menu builder, modal