Prior to editing the source code, it is highly recommended to finalize all content and artwork on the landing page using the Branded Template feature.

Part One: Locate the Source Code
  1. Navigate to the Campaigns tab of the charity account: https://nfp.everydayhero.com/admin/us/sign-in.
  2. Click the desired campaign to reach the 'Overview' tab.
  3. Click the 'View' link located to the right of the 'Landing Page Link' field to view the completed Landing Page.
  4. Right click on the Landing Page and select "View Page Source/Source Code".
  5. Press Ctrl + A (Command + A for Macs) to select the entire page code.
  6. Press Ctrl + C (Command + C for Macs) to copy the entire page code.
  7. Navigate to the Campaigns>Landing Page tab of the charity account.
  8. Click the "Code Your Own" box.
  9. User-added image
  10. Paste the code copied in Step 6 into the "Custom HTML" field that appears.
Part Two: Edit the Source Code
  1. Locate the section of the code for the Call To Action buttons at the top of the Landing Page.  The code will appear as:
    1. <footer class="action-buttons">
        <div
          id="header-register-button"
          class="action-buttons__button"></div>
        <div
          id="header-donate-button"
          class="action-buttons__button"></div>
      </footer>
  2. Add the following code directly below </footer>:
    1. <footer class="action-buttons">
      <div
      id="header-give-button"
      class="action-buttons__button"></div>
      </footer>​
  3. Locate the section of the code for the Call To Action buttons at the bottom of the Landing Page.  The code will appear as:
    1. <footer class="action-buttons">
        <div
          id="footer-register-button"
          class="action-buttons__button"></div>
        <div
          id="footer-donate-button"
          class="action-buttons__button"></div>
      </footer>
  4. Add the following code directly below </footer>:
    1. <footer class="action-buttons">
      <div
      id="footer-give-button"
      class="action-buttons__button"></div>
      </footer>
  5. Locate the section of the code for the Widget buttons.  The code will appear as:
    1. edh.widgets.renderWidget('header-donate-button', 'CallToActionButton', donateButtonConfig);
      edh.widgets.renderWidget('header-register-button', 'CallToActionButton', registerButtonConfig);
      edh.widgets.renderWidget('footer-donate-button', 'CallToActionButton', donateButtonConfig);
      edh.widgets.renderWidget('footer-register-button', 'CallToActionButton', registerButtonConfig);
  6. Replace the Widget button code with the following:
    1. edh.widgets.renderWidget('header-donate-button', 'CallToActionButton', donateButtonConfig);
      edh.widgets.renderWidget('header-register-button', 'CallToActionButton', registerButtonConfig);
      edh.widgets.renderWidget('header-give-button', 'CallToActionButton', giveButtonConfig);
      edh.widgets.renderWidget('footer-donate-button', 'CallToActionButton', donateButtonConfig);
      edh.widgets.renderWidget('footer-register-button', 'CallToActionButton', registerButtonConfig);
      edh.widgets.renderWidget('footer-give-button', 'CallToActionButton', giveButtonConfig);
  7. Locate and copy the code for the "Start Fundraising" button to use as base for the third button.  This contains data that is unique to each campaign.  The code will appear as:
    1. var registerButtonConfig = {
        kind: 'cta',
        label: 'Start Fundraising',
        href: 'http://Campaign-Name.everydayhero.com/us/get-started',
        onClick: function() {
          window.jeffrey.trackNexusLandingPageStartFundraisingCTAClicked({"beneficiary_id":null,"campaign_country_code":"us","campaign_name":"Campaign Title Example","campaign_slug":"subdomain-name","campaign_type":"sce","campaign_uuid":"#######","content_length":2247,"custom_css_applied":false,"has_background_image":true,"has_banner_image":true,"has_campaign_logo":true,"landing_page_version":2,"organisation_name":"####","organisation_type":"event_organisation","organisation_uuid":"####"});
        }
      }
  8. Update the following for the code in step 7:
    1. Change the first line to:
      1. var giveButtonConfig = {
    2. Update the "kind" of button it is (as desired). 'CTA' will make the button a solid color. 'Secondary' will make the button white with a colored border.
    3. Change the "Label" to the desired title of the button.
    4. Remove the URL located to the right of "href" and add the destination URL for when users click the button.
    5. The new code will appear as:
      1. var giveButtonConfig = {
          kind: 'cta',
          label: 'YOUR BUTTON LABEL HERE',
          href: 'YOUR BUTTON LINK HERE',
          onClick: function() {
            window.jeffrey.trackNexusLandingPageStartFundraisingCTAClicked({"beneficiary_id":null,"campaign_country_code":"us","campaign_name":"Campaign Title Example","campaign_slug":"subdomain-name","campaign_type":"sce","campaign_uuid":"#######","content_length":2247,"custom_css_applied":false,"has_background_image":true,"has_banner_image":true,"has_campaign_logo":true,"landing_page_version":2,"organisation_name":"####","organisation_type":"event_organisation","organisation_uuid":"####"});
          }
        }
  9. Click the "Preview Landing Page" button to view the changes. 
  10. Click the Save button at the bottom of the page to publish changes.