Configuring Header and Footer – Q2 Documentation

The header and footer each have their own corresponding configuration options in the Gro Admin Portal and must be configured separately.

To enable the header and footer, set the showNewHeader value and the showNewFooter value to true in the client.webapp.custom.properties Type ID. Enabling the header will change its background color and display the web app home page logo that you specify. Enabling the footer will display the images and verbiage that you specify.

Tip

Both the header and footer can be enabled simultaneously.

Header

The header can be configured to display the web app home page logo. There are two methods for specifying the image to use as your web app home page logo.

Specify the logo from Edit Configurations.

Navigate to Edit configurations > Edit Images within the Gro Admin Portal and select an image to add in the Webapp Home Logo section.
Specify the logo from Advanced configuration.

Assign the web app home page logo directly by selecting the Edit button next to the client.webapp.logo.homePage Type ID in the Gro Admin Portal's Advanced section.

Footer

The footer can be configured to include text and multiple images. Before specifying the images to include in the footer, configure the following JSON objects:

footerProperties—this object can be configured to enable images in the footer.
footerLinks—this object can be configured to assign a URL to each image.

sidebar. Footer configuration example for the client.webapp.custom.properties Type ID:

{
        "footerProperties": {
                "instagramIconDisplay": true,
                "twitterIconDisplay": true,
                "facebookIconDisplay": true,
                "youtubeIconDisplay": true,
                "extraIcon1Display": true,
                "extraIcon2Display": true,
                "extraIcon3Display": true
        },
        "footerLinks": {
                "instagramLink": "https://www.instagram.com/q2software/",
                "twitterLink": "https://twitter.com/q2_software",
                "facebookLink": "https://www.facebook.com/Q2Software/",
                "youtubeLink": "https://www.youtube.com/user/Q2GrowBeyond/",
                "extraIcon1Link": "",
                "extraIcon2Link": "",
                "extraIcon3Link": ""
        }
}

Each footer icon is associated with its own value:

extraFooterIcon1—this value is assigned to Extra Footer Icon 1.
extraFooterIcon2—this value is assigned to Extra Footer Icon 2.
extraFooterIcon3—this value is assigned to Extra Footer Icon 3.
facebookIcon—this value is assigned to the FI's Facebook icon.
instagramIcon—this value is assigned to the FI's Instagram icon.
twitterIcon—this value is assigned to the FI's Twitter icon.
youtubeIcon—this value is assigned to the FI's Youtube icon.

Instructions

There are two methods for specifying the images to include in the footer, as follows:

Specify images from Edit Configurations.

Navigate to Edit configurations > Edit Images within the Gro Admin Portal and select an image to add in each of the footer icon's corresponding sections.
Specify images from Advanced configuration.

Assign the image directly using each footer icon's Type ID by selecting the Edit button next to each Type ID in the Gro Admin Portal's Advanced section.

Note

Each icon's value is included within its associated Type ID.
- client.webapp.footerImg.extraFooterIcon1—adds the image assigned to the extraFooterIcon1 value to the footer.
- client.webapp.footerImg.extraFooterIcon2—adds the image assigned to the extraFooterIcon2 value to the footer.
- client.webapp.footerImg.extraFooterIcon3—adds the image assigned to the extraFooterIcon3 value to the footer.
- client.webapp.footerImg.facebookIcon—adds the image assigned to the facebookIcon value to the footer.
- client.webapp.footerImg.instagramIcon—adds the image assigned to the instagramIcon value to the footer.
- client.webapp.footerImg.twitterIcon—adds the image assigned to the twitterIcon value to the footer.
- client.webapp.footerImg.youtubeIcon—adds the image assigned to the youtubeIcon value to the footer.

Tip

Header

Footer

Instructions

Note

IN THIS ARTICLE