Digital Governance
cancel
Showing results for 
Search instead for 
Did you mean: 

Consent Solutions Knowledge Base

Site Notice 2.0: Mobile Banner - Link w/ Implied and Persistent w/ Implied Notices

Mobile Banner - Link w/ Implied and Persistent w/ Implied Notices

User-added image

Customize your mobile banner. 
Your mobile browser can be customized separately from your desktop browser.
Everything on the banner is editable, from the use of the Info Icon, to the text and look of the message and banner.

The most intuitive way to edit your mobile banner is by using the dotted line preview on the right side of the screen.

User-added image

Click on a section of the banner you want to edit. This highlights the section in blue and brings up the appropriate edit tools to the left.

Click on the Info Icon to bring up edit tools. This configures the small icon in the top left corner of the banner.

User-added image
Click the Information Icon checkbox to display the icon. Click Advanced to open a text field. Here you can enter raw CSS code to style that element. Note: for icons, styling is limited to size and positioning - i.e. top:4px, right:4px, height:20px, width:20px.


Click on the larger Banner box to bring up edit tools. This edits the look (style) and placement of the banner.

User-added image

Width is a percentage of the screen the banner will take up (best practice is between 50-100%). Padding (in pixels - px) is the space between the edge of the banner and the text). Background color of the banner. Position of the banner on the page (bottom or top of page). Vertical Offset (space in pixels from top or bottom). You can choose a Border width and color to go around the banner. 

Click Advanced to open a text field. Here you see the raw CSS code that styles the banner. You can make changes and/or add in styles (i.e. rounded corners).


Click on the Title box to bring up the edit tools.

User-added image
Using the text box under Header, type in the Title of your Banner. Use clear, concise language. Remember, there is a character limit. 
You can change the styles of the text using the interface. Click inside Typeface and begin typing in a font and a dropdown list of options will appear. Choose Color and Font Size. To adjust the spacing around the title, use Line Height and Margin(distance from text to other objects). Center Alignment provides the best look for a banner title.

Click Advanced to see the styles you configured. You can always edit the CSS inside this text field. 


Click on the Message box to bring up its edit tools.

User-added image
Use the text box under Text to type in the message for your mobile banner. Use clear, concise language that makes your activity clear to the site visitor. Remember, there is a character limit. 

You can change the styles of the text using the interface. Click inside Typeface and begin typing in a font and a dropdown list of font options appear. Choose Color and Font Size. To adjust the spacing around the message, use Line Height and Margin(distance from text to other objects). Left Alignment typically provides the best look for a banner message.

Click Advanced to see the styles you configured. You can always edit the CSS inside this text field. 


Click on the Collapse Message box to bring up its edit tools.
User-added image
The Action Button provides site visitors an easily identifiable 'call to action' (beyond just the close icon, which doesn’t really communicate consent to most people). 
The Show Button checkbox defaults to 'on'. You can change the text of the Button, along with the Background color. You can edit the Width and spacing (Margin and Padding), and the Font type, color and size.

Click Advanced to see the styles you configured. You can always edit the CSS inside this text field. 
 

Click on the Accept Button box to bring up its edit tools.
User-added image
The Action Button provides site visitors an easily identifiable 'call to action' (beyond just the close icon, which doesn’t really communicate consent to most people). 
The Show Button checkbox defaults to 'on'. You can change the text of the Button, along with the Background color. You can edit the Width and spacing (Margin and Padding), and the Font type, color and size.

Click Advanced to see the styles you configured. You can always edit the CSS inside this text field. 


Click on the Close Icon box to bring up its edit tools.

User-added image
The Close icon is important as it is used to communicate consent. When a site visitor clicks the Close icon, they consent to site privacy rules. Best practices uses this along with the Action Button. 
The Close Icon checkbox defaults to 'on'. You can change Icon Color and Thicknessof the lines.

Click Advanced to see the styles you configured. You can always edit the CSS inside this text field. 

 

Click the Preview button to view the fully customized banner. Click the Edit button to return to edit mode. 
User-added image

Labels (1)
Version history
Revision #:
1 of 1
Last update:
‎04-26-2019 04:43 PM
Updated by:
 
Contributors
Looking for more?
Ask in Discussions
Developers

Peer-to-peer support  and answers on developing CMS templates, modifying privacy scripts or building integrations.

Digital Experience Management

Find answers and ask questions on content management, personalization and targeting.

Digital Quality Management

Find answers and ask questions on WCAG and SEO quality management.

Digital Governance

Find answers and ask questions on consent and monitoring solutions.