Getting Started
ENgrid Training Guide
Looking for non-developer documentation?
If you are a content editor or administrator managing ENgrid pages through the Engaging Networks page builder, see the Content Editor Guide instead. For a high-level overview of all ENgrid features, see the Features Overview.
Reference Links
- ENgrid's Documentation (This website)
- ENgrid's Script Repo (ENgrid's code dependency)
- ENgrid's Release Notes
Setting ENgrid up for local development
Setting up a local environment
Writing code on ENgrid
Additional Instructions
- Note the code comments at the top of the build files, helpful for debugging
- How to add custom styling to the theme
- How to add custom code to the theme
- The ENgrid Options object
- How to add code to different page states:
- onLoad;
- onResize;
- onSubmit; - Uses Engaging Networks' enOnSubmit event, bypassed when digital wallets used.
- onIntentSubmit; - NOT bypassed when digital wallets used, triggered when a user indicates intent to submit the form but before the form is validated. Should not be used on logic that expects the form to have passed validation and been fully submitted. onSubmit will also be dispatched if digital wallets are not used, so do not repeat the same logic in both onIntentSubmit and onSubmit.
- onError; - Uses Engaging Networks' enOnError event, bypassed when digital wallets used. onError is only fired when the form fails validation on Engaging Networks' side, not when client-side validation fails.
- onValidate; - Uses Engaging Networks' enOnValidate event, bypassed when digital wallets used. This validation refers to the form validation executed by Engaging Networks, not ENgrid's client-side validation.
- How to use these hooks in your code too.
- Most useful static functions from the App (ENGrid) class.
- ENgrid Custom Events
- DonationAmount
- DonationFrequency
- EnForm
- ENgrid Global Variables
- EngridOptions (read only) - view ENgrid configuration active on page
- EngridVersion (read only) - view ENgrid Version active on page
- EngridPageOptions - override any ENgrid option on this specific page
- window.EngridAmounts - set custom amounts if not using built in EN functionality.
- window.EngridTranslate - Set custom translations for when a country is selected
- window.EngridUpsell - Configuration for ENgrid's upsell
- EngridExitIntent - Configuration for ENgrid's Exit Intent Lightbox
- How to add a code block to make per page changes
Bonus ENgrid URL Arguments
Advanced Development Techniques
Practical Time!
Let's run through the whole process of making and testing a change to your ENgrid theme.
- Make a feature branch
- Develop the change locally, push it to Github.
- Test it on the Feature branch using URL parameters
- Test it on the Feature branch using a code block
- Merge into live and deploy
- Recording: https://cln.sh/ZS0zJJdc
- Pages > Component Library > Images and Files (in sidebar) > Ω1. 4Site Live - ENgrid Templates
- engrid.min.js
- engrid.min.css
Upstream ENgrid Scripts Changes
- Clone the ENgrid Scripts repository https://github.com/4site-interactive-studios/engrid/ and make a new branch.
- Update your "/src/index.ts" and "/src/sass/main.scss" to point to the local assets instead of the NPM assets.
- Run "npm run watch" in your engrid-scripts directory, and "npm run start" in your theme directory.
- Make any necessary changes
- Push your code to Github and open a Pull Request, tagging Fernando as a reviewer.