Advanced Customization

Development Integration

The UPCP Banner has additional capabilities that are customizable through JavaScript in the browser. These capabilities enable developers to make additional changes to the banner beyond the configuration made in the UPCP Admin Site. These configurations can also be used to override the UPCP Admin settings. This can be useful if you want to customize a subset of pages for a single banner.

Customizing the Banner Configuration

To customize the UPCP banner, create the following object before loading the UPCP Banner JavaScript file:

window.WWUPCPModalSettings = {
    position: 'bottom',
    serviceLevelConsent: false,
    privacyPolicyUrl: 'https://wirewheel.io/wirewheel-privacy-notice/',
    logoUrl: 'https://www.pepsi.com/en-us/uploads/pepsi_404.png',
    logoAltText: 'Pepsi Logo',
    customizations: {
      // details below
    }    
}

Field	Description	Example
position	top \| middle \| bottom position of the level 1 banner on the page
serviceLevelConsent	true \| false true: Users will be able to make choices at the service level within the category false: Users will be able to make choices at the category level
privacyPolicyUrl	A URL to your privacy policy
logoUrl	A URL for your company logo
logoAltText	The alt text associated w/ the logo

Developer Styling

window.WWUPCPModalSettings = {
    customizations: {
      container: {
        backgroundColor: '#fefefe',
        color: '#f40000',
      },
      headings: {
        fontFamily: 'Comic Sans MS, Textile, cursive,
        color: '#f40000',
      },
      paragraphs: {
        fontFamily: 'Comic Sans MS, Textile, cursive,
        color: '#f40000',
        fontSize: '14px',
      },
      buttons: {
        primary: {
          fontFamily: 'Comic Sans MS, Textile, cursive',
          color: '#fefefe',
          backgroundColor: '#f40000',
          outlineColor: '#f40000'
        },
        secondary: {
          fontFamily: 'Comic Sans MS, Textile, cursive',
          color: '#f40000',
          backgroundColor: '#fefefe',
          outlineColor: '#f40000', 
        },
      },
      modalHeader: {
        color: '#fefefe',
        backgroundColor: '#f40000',
        fill: '#fefefe',
      },
      links: {
        fontFamily: 'Comic Sans MS, Textile, cursive',
        color: '#f40000',
        fill: '#f40000',
      },
      checkbox: {
        accentColor: '#f40000',
      },
      tables: {
        header: {
          backgroundColor: '#f40000',
          color: 'white',
        },
        rows: {
          backgroundColor: 'white',
          color: '#f40000',
          borderColor: 'rgba(240,0,0,0.3)',
        },
      },
      categories: {
        fill: 'red',
      },
    }
}

Event Listener

Registering event listeners

In order to register event listeners before the library has fully loaded, initialize the window.WWUPCP object, making sure not to overwrite if it exists as shown below. Then set the value of WWUPCP.onLoad to a function. Inside of this function WWUPCP.on can be called as many times as necessary to add the desired number of event handlers.

<script>
  window.WWUPCP = window.WWUPCP || {}
  WWUPCP.onLoad = () => {
    WWUPCP.on('consent:write', (message: ConsentWritePayload) => {
      console.log('payload', message.data)
    })
  }
</script>

After the library has loaded, subsequent event handlers can be added by calling WWUPCP.on as many times as necessary to add the desired number of event handlers.

WWUPCP.on('consent:write', (message: ConsentWritePayload) => {
      console.log('payload', message.data)
})

Event types

consent:write

The consent:write event is fired any time consents are submitted by the user. The structure of the event payload is as follows

type ConsentWritePayload = {
  data: {
    categories?: string[]
    vendors?: string[]
  }
}

Retrieving the current consent decision

After the library has loaded, a user's current consent decision can be retrieved at any time by calling WWUPCP.getCurrentConsentDecision.

type ConsentDecision = {
  categories?: string[]
  services?: string[]
  key: {[key: string]: string}[]
}

const currentConsentDecision: ConsentDecision = WWUPCP.getCurrentConsentDecision()

The key field in the ConsentDecision contains every consent option available to the user in the modal. If service level consent is enabled in the modal, then services will be included in the ConsentDecision.key. If service level consent is disabled in the modal, then categories will be included in the ConsentDecision.key.

Every entry in the key array is an object with a single key and value. The key in the object corresponds to the values present in either the categories or services field, depending on whether service level consent is enabled. The value in the object corresponds to the name field if it is a Category, or the respective vendor's name and service's domain fields if it is a service.

Services' keys are prepended with an "s", and categories' keys are prepended with a "c"

If service level consent is enabled, the ConsentDecision could look like the following example:

{
  services: ['s1', 's2'],
  key: [
    { s1: 'Bing - example.host.com' },
    { s2: 'Hubspot - example.host.com' },
    { s3: 'Microsoft - example.host.com' },
    { s4: 'Google Analytics - example.host.com' }
  ]
}

If service level consent is disbled, the ConsentDecision could look like the following example:

{
  categories: ['c1', 'c2'],
  key: [
    { c1: 'Essential' },
    { c2: 'Functional' },
    { c3: 'Marketing' },
    { c4: 'Performance' },
  ]
}