HYS Documentation
Api ReferenceWebsiteGo to App
  • INTRODUCTION
    • About HelpYouSponsor
    • Key features overview
    • Concepts & Key Terms
  • GETTING STARTED
    • Navigation
    • Dashboard
    • Quick Start Guide
      • Account Information
      • Email Settings
      • Payment Gateways
        • Stripe Setup
          • Stripe Webhook
        • Flutterwave Setup
        • QPayPro Setup
        • Authorize.net Setup
        • PayPal Setup
    • Account Setup
      • First Program Setup
      • Website Integration
      • Campaign Setup
  • CORE FEATURES
    • Program Management
      • Manage Programs
      • Program Forms
      • Program Settings
      • Auto Emails
      • Additional Gifts
      • Url Generator
    • Donor Management
      • Donors Table
      • Add Donor
      • Donor Profile Page
    • Recipient Management
      • Recipients Table
      • Add Recipient
    • Sponsorship Management
      • Sponsorships Table
      • Add Sponsorship
    • Donation Management
      • Donations Table
    • Communication Tools
      • Message Manager
      • Newsletter
  • ADVANCED FEATURES
    • Customization Options
    • Reporting and Analytics
    • Progress Reports
      • Create Progress Report
      • Add Progress Report Data
    • Integrations
      • Mailgun
      • Box Image Storage
      • Zapier
        • Actions
          • Create a New Donor
          • Edit Donor
          • Find Donor By Email Address
          • Find Donor Forms
          • Create a New Entity
          • Edit Entity
          • Find Entity by ID
          • Find Programs
        • Triggers
          • New Form
          • New Program
          • New Donor
          • New Entity
          • New Donations
      • QuickBooks
        • Connect to HelpYouSponsor
        • Adding Donors (Customers)
        • Recipients (Service item)
        • Donations (Sales Receipt)
        • Mapping fields from HYS to QuickBooks fields
        • Synchronized Currency
  • ADMINISTRATION
    • User Management
    • Permissions and Access Control
    • Security Settings
  • BEST PRACTICES
    • Donor Engagement Strategies
    • Fundraising Tips
    • Data Management
  • TROUBLESHOOTING
    • Common Issues and Solutions
    • FAQs
      • How do I import data into my account?
      • How do I bulk upload files?
      • How do I export all the data in my account?
    • Support Resources
      • Priority Support & Enhancements Options
      • How to close my account?
  • API DOCUMENTATION
    • Authentication
    • Endpoints
    • Code Examples
  • RELEASE NOTES
    • Version History
    • Upcoming Features
Powered by GitBook
On this page
  • 1. Using an iframe
  • 2. Frontend Template
  • CSS
  • Javascript / JQuery
  • HTML
  1. GETTING STARTED
  2. Account Setup

Website Integration

After setting up your first program, you'll need to integrate HelpYouSponsor with your non-profit organisation website. There are two main methods for integration:

PreviousFirst Program SetupNextCampaign Setup

Last updated 1 month ago

1. Using an iframe

An iframe is essentially a website within another website. To implement the iframe, navigate to "Campaigns & Programs" in the main menu. Choose the program you wish to integrate and click the "Embed" button.

Clicking the "Embed" button will open a drawer with the program's iframe. From here, you can copy the iframe embed code in the black box and paste it into the code of your website wherever you like. This will put the frontend into an iframe window within your existing web-page.

2. Frontend Template

If you wish to change the iframe's look and feel within your website, you can edit it using the templates that will be used in the frontend or public facing portion of the application or iframe.

NOTE: This should only be done by an experienced web developer with proficiency in CSS, JavaScript or JQuery and HTML

To change the iframes look and feel with the Frontend Template, navigate to "Account Settings" under "Settings" on the main menu and click on the "Edit Template" tab.

CSS

The CSS entered here is placed after the default CSS files so you are able to override any of the default styles.

Javascript / JQuery

JQuery 2.0.3 is included in the template. Please be careful with what you do here as you could impact the performance of the software.

HTML

The HTML is added to the top of the page so you are able to create a header region. This is perfect for adding navigation and a logo or anything else you want. Specifically the HTML will be place after the opening body tag and before the div with the container class.

NOTE: HelpYouSponsor does not provide support for anything entered in the Front End Template. If you require support it will be provided at our hourly rate of $75/hour. If you would like us to do the customisation we can provide a quote. Please send your request to [email protected]