@4site/engrid

Page Template Framework for Engaging Networks

Usage no npm install needed!

<script type="module">
  import 4siteEngrid from 'https://cdn.skypack.dev/@4site/engrid';
</script>

README

#

4Site's ENGrid Page Template Framework

This project started as a labor of love for our clients and ourselves. Originating in 2017 as a partnership between Engaging Networks and 4Site Studios to create the first freely available page templates for their platform; we created Engaging Networks Page Template. That project was incredibly successful, and those templates are still used today for all new Engaging Networks clients. They're easy for junior developers and code dabblers to ease into, and they include Internet Explorer 11 support.

Since then, we've continued to enhance and refine our work, culminating in a complete re-write in late 2019 that was named "ENGrid". Making use of today's latest web technologies Webpack, Typescript, ES6, SCSS, CSS Grids, we've created a new framework for marketers, fundraisers, and everyone in between that will ensure your pages stand out and deliver the performance you're looking for.

Designed and Developed by 4Site Studios while working with:

  • Amnesty International USA
  • Earth Island Institute
  • Human Rights Campaign via Lautman Maska Neill & Company
  • International Fund for Animal Welfare
  • Mercy for Animals
  • National Trust for Historic Preservation
  • National Wildlife Federation
  • Ocean Conservancy
  • Organic Consumers
  • Oxfam America
  • Oxfam Canada
  • People for the Ethical Treatment of Animals
  • Polaris Project
  • Rainforest Action Network
  • Save Tibet via Schultz and Williams

ENGrid Features

  • Works with all page types (e.g. Donation, e-Card, Email to Target, Event, etc..)
  • Auto Credit Card Type selection based on Credit Card Number
  • Processing Fee Checkbox
  • Donation Upsell Lightbox
  • Comma handling in Other Donation Amount input field
  • Conditional Hide/Show fields (e.g. In Honor of Giving Fields)
  • Give by Check, Card, Paypal
  • Auto update CC Expiration Date fields
  • Live giving variables to insert actively selected gift frequency or gift amount in page copy or in buttons
  • Advocacy "Opt-in Upsell" Lightbox
  • Tweaked UI / UX for an improved e-card "add recipient" experience
  • Per Page Background Image
  • Per Page Layouts (Five Built In)
  • Possibility for Sub-Brands
  • Address Form Field Internationalization - If the user is on a US / English page and selects "France" as their country the Address Form fields will update their labels, change their ordering, and hide/show relevant fields for French Address formatting. Current address formatting support for (United States, Canada, United Kingdom, France, Germany, Netherlands, Australia).
  • Update inputs with improved form field meta info for better auto-fill completion
  • "Remember Me" (Coming Soon)
  • Capitalize first letter of First Name, Last Name, Address 1, City, Region fields on form submit (Coming Soon)
  • Lazy Load all image assets
  • Fastest page load times possible on Engaging Networks
  • IE11 pop-up encouraging users to upgrade their browsers
  • All pages using our page template can be seamlessly embedded in your website with Shortcodes using our WordPress iFrame embed plugin

ENGrid Resources

Engaging Networks Resources

Interested in a project or have questions?

We would love to hear from you.

Bryan Casler
Director of Digital Strategy
4Site Interactive Studios
Cell: (315) 877-3420
Email: bryan@4sitestudios.com