4.33.0

Product footer

Footer links, terms, and copyright

Demo

API

Tag

Name Description
<aui-footer> Custom Element, no content

Attributes

Name Value Required Description
cam String

Stringified JSON of cam object, see Guidelines below.
user String

Stringified JSON of user object, see Guidelines below.
i18n string

A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
termsurl String

An alternate URL to direct "Terms" link to (if omitted, defaults to https://www.avalara.com/terms).

If you are uncertain which terms URL to utilize, submit a ticket to Legal
shoulduseaccountowd Boolean When set, the account URL will be for Account in AvaApp.
supportcasesurl String

Used to override the url used for the "Submit a support case" link in the Contact dialog.

Some products setup a custom support cases page for users who have not yet signed up, and this url modification is useful to help direct customers there.
chaturl String

Hides the 'contact' link in the footer and instead displays a link to the provided live chat URL. Only to be used in the SSGL flow.
hidecontact Boolean

Hides the 'contact' link in the footer. Only to be used in the SSGL flow.

Properties

Name Value Required Description
cam JSON

Set this to cam object JSON, see Guidelines below.
user JSON

Set this to user object JSON, see Guidelines below.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
termsUrl String

An alternate URL to direct "Terms" link to (if omitted, defaults to https://www.avalara.com/terms).

If you are uncertain which terms URL to utilize, submit a ticket to Legal
shouldUseAccountOwd Boolean When set, the account URL will be for Account in AvaApp.
supportCasesUrl String

Used to override the url used for the "Submit a support case" link in the Contact dialog.

Some products setup a custom support cases page for users who have not yet signed up, and this url modification is useful to help direct customers there.
chatUrl String

Hides the 'contact' link in the footer and instead displays a link to the provided live chat URL. Only to be used in the SSGL flow.
hideContact Boolean

Hides the 'contact' link in the footer. Only to be used in the SSGL flow.

Demo

API

Tag

Name
<AuiFooter>

Props

Name Value Required Description
cam JSON

Set this to cam object JSON, see Guidelines above.
user JSON

Set this to user object JSON, see Guidelines above.
i18n object

A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
termsUrl String

An alternate URL to direct "Terms" link to (if omitted, defaults to https://www.avalara.com/terms).

If you are uncertain which terms URL to utilize, submit a ticket to Legal
chatUrl String

Hides the 'contact' link in the footer and instead displays a link to the provided live chat URL. Only to be used in the SSGL flow.
hideContact Boolean

Hides the 'contact' link in the footer. Only to be used in the SSGL flow.

Skylab React links

General information about using our React package

Typescript

Exported types

// CAM object provided to component export type CamObject = Record; // User object provided to component export type UserObject = Record;

i18n Strings

ID Description Default value
"auiFooter.chatPrefix" The text before the chat link. Need assistance?
"auiFooter.chatLink" The chat link text. Chat with an implementation agent
"auiFooter.ariaLabel.contact" The aria-label used for the contact button. Open Contact Us dialog
"auiFooter.contactButton" The contact button text. Contact
"auiFooter.contactDialogHeader" The contact dialog header text. Contact
"auiFooter.termsLink" The terms link text. Terms
"auiFooter.privacyLink" The privacy link text. Privacy
"auiFooter.ariaLabel.cam" The CAM photo aria-label. Customer Account Manager
"auiFooter.camGreeting1" The first line of the CAM greeting. Must include the string {CAM_NAME} as a placeholder for the CAM's name. Hi, I'm {CAM_NAME}.
"auiFooter.camGreeting2" The second line of the CAM greeting. I can help you with your account and other Avalara resources.
"auiFooter.scheduleConversationLink" The scheduling link text. Schedule a conversation
"auiFooter.helpCenterLink" The Knowledge Center link text. Knowledge Center
"auiFooter.avalaraUniversityLink" The Avalara University link text. Avalara University

Guidelines

Positioning for short page content

When page content is shorter than the viewport height, <aui-footer> does not position itself at the bottom by default. We explored options to style the <body> element and use absolute positioning on <aui-footer> (see #1 below) to force the viewport to the bottom of the page. But forcing this single approach on all our users was problematic for some implementations.

The 3 main approaches consumers have used to solve this issue are:

  1. Apply the absolute and pin-b classes to the <aui-footer> component and give <body> bottom padding equal to the height of the footer: 
              
    body {
      min-height: 100vh;
      padding-bottom: 48px;
    }
    /* adjust padding for responsive <aui-footer> component */
    @media only screen and (max-width: 599px) {
      body {
        padding-bottom: 78px;
      }
    }
  2. Set a minimum height on the main content area equal to the viewport height minus the height of any additional elements on the page.
  3. If you are dynamically applying the chaturl attribute for users in the SSGL flow, the footer height will vary. Use flex to position the footer in this case. 
              
    body {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
  
    main {
      flex: 1;
    }

Customer Account Manager object

The customer's Salesforce account information is retrieved via the OPUS API (see Swagger). That customerAccount object contains a key named camOwned that indicates if the account's cam key contains valid Customer Account Manager data. The value of camOwned should be assigned to the isValid key and passed along with the cam object to the <aui-footer> as follows:

const customerAccount = await getCustomerAccountFromOpus(customerId); const modifiedCamObject = customerAccount.cam ? { ...customerAccount.cam, isValid: customerAccount.camOwned } : null; document.querySelector('aui-footer').cam = modifiedCamObject;

or data can be assigned as attribute using stringified JSON

If the cam object includes a photoUrl field, the linked image will be displayed in the contact dialog. If no photoUrl is defined or the image fails to load, a default user icon will be displayed instead.

User object

If your app doesn't already have access to the Avalara Identity user data, then use AUI Identity to get it. API for <aui-footer> user data is provided below.

const user = { accountId: string, // use product account ID (e.g. avataxAccountId) username: string, // optional, will be displayed in header menu if provided givenName: string, familyName: string, email: string, isLoggedIn: boolean, isTechSupport: boolean, name: string, locale: string, emitSwitchAccountsNavEvent: boolean, // optional, prevents default/emits s-navigate event on "Switch accounts" click switchAccountsUrl: string, // optional, overrides existing default } document.querySelector('aui-footer').user = user;

or data can be assigned as attribute using stringified JSON

Environment

In order to use lower environment URLs for external links (e.g. header links, aui-uploader API calls, etc.), you may optionally set the environment as an attribute on the script tag where you load the aui.min.js script as seen below. We typically recommend using qa for lower environments.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com