> ## Documentation Index > Fetch the complete documentation index at: https://developer.onetrust.com/llms.txt > Use this file to discover all available pages before exploring further. # Display User Interfaces # Overview The OneTrust SDK manages several different user interfaces to display to a user. > 📘 > > The user interfaces without methods indicate they can only be navigated to from either the banner or preference center. Some views are also controlled in the OneTrust Console/Tenant. [block:parameters] { "data": { "h-0": "View Name", "h-1": "Description", "h-2": "Method to Display", "0-0": "Banner", "0-1": "Notice to the user of their privacy rights. Has configurable text and buttons for **Accept All**, **Reject All**, **Manage Preferences**, and **Close Banner**. \n \n**Note:** Each of these buttons can be toggled On/Off in the Admin Console.", "0-2": "", "1-0": "Preference Center", "1-1": "An interface for the user to view additional privacy information and update their consent choices. Has configurable text and buttons for **Accept All**, **Reject All**, **Save Settings**, and **Close Preference Center**. \n \n**Note:** You can choose to hide each button except Save Settings - this is required for a User to update their choices.", "1-2": "", "2-0": "Purpose Details", "2-1": "The Purpose Details (or Category Details) view shows granular detail about the category and also shows the SDK List link, Vendor List link, and child categories based on configuration.", "2-2": "none, sub-view of Preference Center", "3-0": "SDK List", "3-1": "An interface to show a granular list of SDKs to the user. This list may be filtered by Category to provide more transparency to the User. \n \nNote: This can hidden in Template Settings in the Admin Console.", "3-2": "none, sub-view of Preference Center", "4-0": "IAB Vendor List", "4-1": "An interface, shown only for IAB2 type templates, displays a list of 3rd party ad tech vendors under management by the application. This provides a way for users to opt in/out of consent for a particular vendor.", "4-2": "none, sub-view of Preference Center", "5-0": "Vendor Details", "5-1": "A child interface of Vendor List, this view shows more granular information about a vendor and its Purpose, Legitimate Interest, Special Feature, and Special Purpose settings.", "5-2": "none, sub-view of Preference Center" }, "cols": 3, "rows": 6, "align": [ "left", "left", "left" ] } [/block]
## UI Methods As mentioned in the [Configure SDK Parameters](https://developer.onetrust.com/onetrust/docs/configure-sdk-parameters) page, the SDK will only initialize and download data once one of the setupUI() methods below are called. The SDK must be initialized successfully at least once for consent to be written and stored locally. OneTrust recommends setupUI('BANNER') be called each time upon app launch so data can be downloaded and new changes reflected, if any. > 🚧 > > [oneTrustTV.Settings()](https://developer.onetrust.com/onetrust/docs/configure-sdk-parameters) must be set each time before setupUI() is called as these keys are not cached. ### Banner Renders a Banner UI after the SDK has been initialized based on the [shouldShowBanner](https://developer.onetrust.com/onetrust/docs/display-user-interfaces#shouldshowbanner) logic. | Parameter | Description | | :------------- | :---------------------------------------------------- | | getElementById | Reference to the div where the UI will be be shown. | | UIType | Specify the UI type to be shown. In this case, BANNER | #### Single Page Application ```javascript //method for SPAs oneTrustTV.setupUI(document.getElementById('root'), 'BANNER', null, (status) => { console.log('outer status -->', status); // client logic to close the OneTrust UI }); ``` #### Multi Page Application ```javascript //method for multi page apps oneTrustTV.setupUI(document.getElementById('root'), 'BANNER', null, () => null) ``` > 📘 Implementations With No Banner > > In an implementation where the banner may not be shown, the application may still need to know what consent is upon launch. In this case, the app should still call the setupUI('BANNER') method above. As this method evaluates the shouldShowBanner() method under the hood, no banner will be shown, data will be downloaded, and consent will be written. ### Preference Center Renders a Preference Center UI after the SDK has been initialized. | Parameter | Description | | :------------- | :-------------------------------------------------------- | | getElementById | Reference to the div where the UI will be be shown. | | UIType | Specify the UI type to be shown. In this case, PREFERENCE | #### Single Page Application ```javascript oneTrustTV.setupUI(document.getElementById('root'), 'PREFERENCE', null, (status) => { console.log('outer status -->', status); // client logic to close the OneTrust UI }); ``` #### Multi Page Application ```javascript oneTrustTV.setupUI(document.getElementById('root'), 'PREFERENCE', null, () => null) ``` ## shouldShowBanner This method determines if a Banner should be displayed to the user or not based on SDK determined logic. ```javascript oneTrustTV.shouldshowBanner(function(status) { console.log(status); }); ``` ### Values Returned * -1: SDK not initialized * 1: Banner should be shown * 0: Banner should not be shown ### How `shouldShowBanner` gets computed: 1. Is the geolocation rule configured to show a banner? This is controlled by the `showAlertNotice` property in the JSON being `true`. * If `showAlertNotice = false`, the method returns `false` and a banner should not be shown for this region. * If `showAlertNotice = true`, move to the next check. 2. Was the most recent SDK Publish configured to re-consent users? This is controlled by the presence of 2 values. 1) A `LastReconsentDate` property in JSON with non-null value. 2) A `OneTrustLastReconsentDate` value saved on disk * If the `LastReconsentDate` JSON is *newer than* the `OneTrustLastReconsentDate` on disk, the method returns `true` and a banner should be shown. * If no, move to the next check 3. Is the geolocation rule configured for automatic re-consent AND did the user's automatic re-consent timer expire? This is controlled by measuring the difference between `OneTrustLastConsentDate` saved on disk and the `Current Date` and seeing if it is greater than or equal to `OneTrustReconsentFrequencyDays` in the JSON saved on disk. The SDK considers the date itself and not the time consent was given. For example, if the re-consent period is set to 1 day in my geolocation rule and the user provides consent at 11:59pm GMT, the banner will reappear at 12:00am GMT (1 minute later, but the next day). * If yes, the method returns `true` and a banner should be shown. * If no, move to the next check 4. Has the user previously given consent and is that consent stored at disk? * If yes, the method returns `false` and a banner should not be shown. * If no, the method returns `true` and a banner should be shown because this is the first time they are being asked to give consent on the app. 5. Has a new category been added post giving consent? * If yes, the method returns `true `and a banner should be shown again because user needs to give consent to the new category. * If no, the method returns `false` and a banner should not be shown. ## isBannerShown This method determines whether or not the Banner has been shown to the user. ```javascript oneTrustTV.isBannerShown (function(status) { console.log(status); }); ``` ### Values Returned * -1: SDK not initialized * 1: Banner shown * 0: Banner not shown ## Set Remote Key Mapping If the default remote key mappings do not work properly on your device, you can manually set the key codes using this method. ```javascript oneTrustTV.setRemoteKeycodes({ "37": "left", "38": "down", "39": "right", "40": "up", "13": "ok", "461": "back", "1536": "back" }) ```