DOCSEARCHbyAlgolia
Submit Docs

ENgrid Documentation

website·Indexed 34 days ago

https://engrid.4sitestudios.com/

A page template framework by 4Site Studios for Engaging Networks (EN). It provides a suite of components and tools for enhancing user experience, including media attribution, multilingual page detection, donation amount management, GTM DataLayer integration, and specialized marketing tools for email templates and blocks.

Tokens
85.5K
Snippets
347
Records
581
Agent score
53%

What's inside ENgrid

  1. Overview of ENgrid Loader asset resolution

    v2

    The ENgrid Loader dynamically loads different versions of CSS and JavaScript assets. It determines which assets to load based on the following priority order:

    1. URL parameters
    2. window.EngridLoader configuration object
    3. Data attributes on the ENgrid script tag

  2. Overview of Homepage Takeover functionality

    v2
    A Homepage Takeover is a sitewide redirect to a designated Engaging Networks (EN) page that triggers only on specific dates. It is designed to drive traffic to high-priority pages, such as donation forms during year-end campaigns. The implementation preserves original URL arguments during the redirect and includes a suppression mechanism (via a 24-hour cookie) to prevent users from being redirected repeatedly after they have opted to return to the main site.

  3. Overview of Engrid Marketing Tool Blocks

    v2
    Blocks are customizable content sections used to build email templates. All blocks share three standard configuration options: Background Color, Space Top (numerical value in pixels), and Space Bottom (numerical value in pixels). Standard blocks are located in the '4Site Blocks' folder.

  4. Overview of the ENgrid framework

    ENgrid is an open-source, free-to-use code framework developed by 4Site Studios to enhance Engaging Networks (EN) page templates. It provides design and functionality options that are not available natively within the Engaging Networks platform.

  5. Overview of the Iframe Queue component

    v2
    The Iframe Queue submits a chain of embedded Engaging Networks (EN) pages sequentially. Each iframe is created only after the previous one finishes (via a Thank You page, error, or timeout). This prevents the record-drop issues associated with parallel hidden iframes using the ?chain parameter. Field values are passed into iframes via postMessage instead of URL parameters.

  6. Overview of CustomPremium component behavior

    v2

    The CustomPremium component dynamically manages premium gift visibility on donation pages. It monitors changes to donation amounts and frequencies to filter products, manage default selections, and handle the visibility of the premium gift block.

    Key Behaviors:

    • Filtering: Only shows gifts that meet the minimum amount requirements for the selected frequency.
    • Selection Logic: If a current selection becomes invalid (amount too low), it attempts to select the configured default. If the default is also invalid, it selects 'No Premium'.
    • Visibility: Hides the entire premium block when no gifts meet the criteria.
    • Form Integration: Automatically clears the transaction.selprodvariantid field when 'No Premium' is selected and prevents submission with invalid selections.

  7. Overview of the MobileCTA component

    v2

    The MobileCTA component adds a floating call-to-action (CTA) button to a page that appears when users scroll past the form on mobile devices. It is designed to improve mobile conversion rates by allowing users to quickly return to the form without manual scrolling.

    Key Constraints:

    • Only appears on page 1 of multi-page forms (ENGrid.getPageNumber() === 1).
    • Automatically hides when the form is visible in the viewport.
    • Requires the presence of a .body-main element, a form block, and an #engrid container.

  8. Overview of Page Background Rotation

    v2

    The Page Background Rotation component displays a rotating set of background images within a page-backgroundImage or body-banner block. Images transition via cross-fade and can include individual themes (light or dark) and media attributions that update in sync with the active image.

    Key default behaviors:

    • Images rotate every 5 seconds after an initial 10-second delay.
    • Default slide order is 'random bag' (each image shown once before repeating).
    • Rotation is disabled on mobile (a static random image is shown instead).
    • Respects system prefers-reduced-motion settings by default.
    • The first image is preloaded with high priority; subsequent images are lazy-loaded.

  9. Overview of 4Site support retainer services

    v2

    4Site support retainers provide ongoing access to strategy, design, and development teams. These retainers cover both planned work and day-to-day operational needs, including:

    • Dedicated Project Manager and Strategist for planning and delivery.
    • Monthly planning/check-in calls and weekly written updates (including hour usage).
    • Recurring tasks: CMS updates, CRM maintenance, and design/performance reviews.
    • Monitoring: Website/CRM uptime and real-time CRM error reporting.
    • ENgrid Maintenance: Monthly core updates (upstream scripts, staging, and deployment) and bug fixes for ENgrid pages/integrations.
    • Support: Content editor assistance for page builders, helper classes, and ENgrid features.
    • Minor enhancements and feature requests delivered within retainer hours.

  10. Enhance Engaging Networks donation pages with ENgrid

    v2

    ENgrid extends Engaging Networks (EN) donation pages with several conversion-focused and functional enhancements:

    • Donation Amount Handling: Automatically strips commas and non-numeric characters from 'Other Amount' input fields.
    • Credit Card Expiration: Automatically updates the expiration year dropdown to include the current year and the next 19 years, removing expired years.
    • Payment Security: Provides full Very Good Security (VGS) support with custom styling and error handling, and adds a 'What's this?' tooltip to the CVV field.
    • Payment Methods: Supports Card, Check, PayPal, Apple Pay, Google Pay, Venmo, and DAF (depending on processor).
    • Upsells & Tips: Includes a customizable Donation Upsell Lightbox (alternative to EN native) and a Tip Jar/Processing Fee checkbox that works alongside native EN processing fees.
    • Live Variables: Allows inserting the currently selected giving amount and frequency anywhere on the page as real-time updating merge tags.
    • User Experience: Includes a 'Remember Me' feature to pre-fill supporter info across domains/subdomains and enhanced currency selectors that can change donation buttons based on the selected currency.
    • Premium Gifts: Offers dynamic premium gift configurations with multiple display themes.
    • Post-Donation: Allows embedding a follow-up donation form on the thank you page for additional gifts.

  11. Access ENgrid source code and packages

    v2
    ENgrid is an open-source framework released under The Unlicense. The source code is hosted on GitHub, and official packages are available via npm for scripts and styles.
    # Install ENgrid scripts
npm install @4site/engrid-scripts

# Install ENgrid styles
npm install @4site/engrid-styles

  12. Implement Engaging Networks Page Templates with ENgrid

    v2
    ENgrid provides mobile-first, accessible, and conversion-optimized page templates that serve as the foundation for Engaging Networks (EN) implementations. These templates support various EN page types, including donations, advocacy, e-cards, events, surveys, and premiums.