Branding Overview

The Branding section of each experience allows the Studio User to control experience-wide settings such as Font Styling, Color Palette, Header, Footer, and Fab. Any changes made to these sections are automatically updated throughout the experience. 

  • Color Palette - Consists of nine colors that a Studio User can update to easily control colors throughout the experience.
  • Font Styling - Provides access to the top 100 most popular Google Fonts that can be for text throughout the experience and the ability to designate font styles for H1-H4, paragraph, buttons, and links.
  • Header - Allows a Studio User to add a logo and hamburger menu or back arrow to the top of the experience. 
  • Footer - Enables a Studio User to add a navigation element to the bottom of the experience. 
  • FAB - Provides a Studio User with the ability to add a floating action button (FAB) with access to one or multiple items on pages throughout the experience. 
  • Head Tag - Allows a Studio User to add HTML code to the head tag of all pages within a digital experience.
  • Cookie Management - Studio users can configure the cookie notice app users will see upon launching the app.
  • Tracking Cookie - Allows Studio Users to specify which cookies they would like to track and setup for End Users to opt-in or out of the tracking cookie.

Pro Tip: Take a few minutes to set the Branding properties for your experience before you start adding Pages and Components. This will make the designing process much faster.

Watch: Getting Started with Branding

Color Palette

The Color Palette enables Studio Users to create a consistent experience that adheres to brand standards. A majority of Components with color properties utilize the Color Palette allowing Studio Users to manage brand colors from one location within the experience and have all applicable components automatically updated with any changes to the experience's Color Palette. The Color Palette for each experience contains nine colors:

  • Primary Color
  • Secondary Color
  • Tertiary Color
  • Accent Color
  • Success
  • Alert
  • Dark
  • Medium
  • Light

Font Styling

The Font Styling section provides Studio Users with a dropdown of the 100 most popular Google Fonts to use for text throughout the digital. You can also designate the font style for H1 through H4, paragraph, links, and buttons that you’ll be able to use in design elements throughout your digital experience. 

A Header appears at the top of the Page of an experience and is commonly used to display a logo and/or provide navigation. The Header is sticky and set to sit above the Page content. This allows Components on a Page to scroll behind the Header. 

Types of Headers

There are two types of Headers available in the Studio and each experience can only have one Header type. The Header can be toggled on or off on every Page in the experience and the Header is toggled on by default.  

  • Header with Back Button - Provides the option to display a logo and/or Back Button in the Header. When the Back Button is toggled on, the Back Button always appears on the left of the Header and links to the previously viewed experience Page.
  • Header with Menu - Provides the option to display a logo and Hamburger Menu which can appear on the left or right side of the Header. When tapped, the Hamburger Menu triggers a fly-out menu which is commonly used to navigate experience end-users to other Pages within the experience. 

Header with Back Button

The Header with Back Button has the following properties:

  • Component Id - Sets the name of the Header component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the experience as needed.
  • Image - Select from the dropdown:
    • Content from Images - Select an image stored in Lumavate Content. To remove an uploaded Image, click on the X next to the file name. 
    • Upload Image - Select an image file to upload. To remove an uploaded Image, click on the X next to the file name. 
  • Background Color - Sets the color of the Header background bar. There are two ways to set the Background Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. 
  • Show Back Button - Toggle on or off to make the Back Button visible within the Header. Note the Back Button will not appear on the homepage. 

  • Back Button Color - Sets the color of the Back Button. There are two ways to set the Back Button Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. 

    Best Practice: Make sure the Back Button Color and Header Background Color are contrasting enough so users can easily see and access the arrow.

  • Back Button Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. The property default is set to arrow-back as this is the most recognizable icon for the expected behavior. 
  • Border Color - Sets the color of the Header's bottom border. There are two ways to set the Border Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.  
  • Border Width - Sets the width of the Header's bottom border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.

Header with Menu

The Header with Menu has the following properties:

  • Component Id - Sets the name of the Header component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the experience as needed.
  • Header Settings
    • Image - Upload a .JPG or .PNG to display a Header Image. To remove an uploaded Image, click on the Trash Can. 

      Pro Tip: Use a .PNG with a transparent background to achieve a seamless appearance with the logo and background color.
    • Menu Icon Color - Sets the color of the Hamburger Menu Icon. There are two ways to set the Menu Icon Color: Click the Color Swatch to choose from the experience
    • s Color Palette or enter the hex code in the text field. The Hamburger Menu only appears when there is at least one linked Menu Item.
    • Background Color - Sets the color of the Header background bar. There are two ways to set the Background Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. 

      Best Practice: Make sure the Back Button Color and Header Background Color are contrasting enough so users can easily see and access the arrow.
    • Border Color - Sets the color of the Header's bottom border. There are two ways to set the Border Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.  
    • Border Width - Sets the width of the Header's bottom border. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). The border does not appear if it is set to 0 px.
    • Menu Icon Side - Sets the side where the Hamburger Menu Icon appears in the Header.
  • Menu Settings
    • Fly-out From - Sets the side of the screen where the Fly-out Menu appears when the Hamburger Menu Icon is tapped. 

      Best Practice: Set the Menu Icon Side and Fly-out From properties to the same side to create an intuitive design for experience end users.
    • Menu Background Color - Sets the background color of the Fly-out Menu. There are two ways to set the Menu Background Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. 
    • Line Color - Sets the Line Color between each Menu Item. There are two ways to set the Line Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. The Line Color only appears when the Line Width is set to at least 1 px.
    • Line Width - Sets the width of the lines between each Menu Item. Enter a whole number between 0 px - 5 px. Decimals are not supported (i.e. 2.5 px). Lines do not appear if set to 0 px.
  • Menu Fly-out Header
    • Header Text - Sets the title of the Fly-out Menu. This text does not wrap and should be limited to 15 characters. 
    • Text Color - Sets the color of the Header Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Background Color - Sets the color behind just the Header Text. There are two ways to set the color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
  • Individual Menu Items (Up to 15)
    • Link - Sets the link for the inividual Menu Item to another Page in the experience or an external URL. 
    • Text - Sets the text that appears for the Menu Item. Text does not wrap and should be limited to 10 characters. 
    • Text Color - Sets the color of the Text for the Menu Item in the Fly-out Menu. There are two ways to set the Text Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Image - Upload a .SVG to display for the individual Menu Item icon. To remove an uploaded Image, click on the Trash Can. 
    • Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. If an Image is uploaded for the Individual Footer icon, then it will override Ionic Icon property. 
    • Icon/Image Color - Sets the color of the Menu Items in the Fly-out Menu. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Menu Item Image property for the Icon Color to work properly. 

A Footer appears at the bottom of the the Page of an experience. The Footer is sticky and set to sit in front of the Page content. This allows Components on a Page to scroll behind the Footer. The Footer can be toggled on or off on each Page in an experience. The Footer is toggled on by default. 

  • Footer - Commonly used in website or apps at the bottom of the screen. This footer guides users to different pages in your experience or on your site, and is used to help navigate to important information or callouts. You can set the icons and links in the Tab Properties on the page.
  • Compliance Footer - Need to provide lengthy regulatory notices or disclosures? This expandable footer gives ample room to display any required copy to your experience users. This footer is supported in experience using Page Builder versions 5.1.12 and 6.0.4, or newer, and App Builder version 1.1.8, or newer.

Footer

The Footer has the following properties:

  • Component Id - Sets the name of the Footer component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the experience as needed.
  • Icon Color - Sets the default color of the Icons in the Footer. All Icons in the Footer will display this color except the Active Icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Footer Tab Image Property for the Icon Color to work properly. 
  • Active Icon Color - Sets the color for the Active Icon in the Footer. The Active Icon happens when the experience end user is currently viewing a Page in the experience linked in the Footer. When this occurs, the applicable Icon in the Footer will have the Active Icon color. There are two ways to set the Active Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Footer Tab Image Property for the Active Icon Color to work properly. 
  • Background Color - Set the color of the Footer bar. There are two ways to set the Background Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
  • Individual Footer Tab Properties (Up to Five)
    • Image - Upload a .SVG to display for the individual Footer icon. To remove an uploaded Image, click on the Trash Can.  
    • Ionic Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. If an Image is uploaded for the Individual Footer icon, then it will override Ionic Icon property. 
    • Text - Displays optional text below the Footer icon. If left empty, no text will display and the Footer icon expands to fill the full height of the Footer. The text does not wrap and when using multiple Footer icons long text is cutoff. 
    • Link - Sets the link for the individual Footer icon to another Page in the experience or an external URL. 
    • Share - Toggle on to enable native share in supported devices.
      • Share Title - The title experience users will see when they click the Share icon.
      • Share Message - Pre-populates the message. Experience users can edit this when sharing through their native apps, such as messaging.
      Pro Tip: Native share is not supported on desktop browsers. Set an external link or link to an Existing Page in the app so desktop users have an alternative option to share your experience.

Compliance Footer

The Compliance Footer has the following properties:

  • Component Id - Sets the name of the Footer component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the experience as needed.
  • Icon Color - Sets the default color of the Icons in the Footer. All Icons in the Footer will display this color except the Active Icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Footer Tab Image Property for the Icon Color to work properly. 
  • Active Icon Color - Sets the color for the Active Icon in the Footer. The Active Icon happens when the experience end user is currently viewing a Page in the experience linked in the Footer. When this occurs, the applicable Icon in the Footer will have the Active Icon color. There are two ways to set the Active Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field. A .SVG must be uploaded to the Footer Tab Image Property for the Active Icon Color to work properly. 
  • Background Color - Set the color of the Footer bar. There are two ways to set the Background Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
  • Individual Compliance Footer Tab Properties (Up to Ten)
    • Image - Upload a .SVG to display for the individual Footer icon. To remove an uploaded Image, click on the Trash Can.  
    • Ionic Icon - Pulls in icons from a library of open source icons built by the Ionic Framework team. If an Image is uploaded for the Individual Footer icon, then it will override Ionic Icon property. 
    • Text - Displays optional text below the Footer icon. If left empty, no text will display and the Footer icon expands to fill the full height of the Footer. The text does not wrap and when using multiple Footer icons long text is cutoff. 
    • Link - Sets the link for the individual Footer icon to another Page in the experience or an external URL. 
    • Share - Toggle on to enable native share in supported devices.
      • Share Title - The title experience users will see when they click the Share icon.
      • Share Message - Pre-populates the message. Experience users can edit this when sharing through their native apps, such as messaging.

Best Practice: Make sure the Icon Color and Active Color contrast enough with the Background Color so users can easily see and access the icons.

FAB

The FAB is a floating action button the Studio Users can utilize to provide easy access to one or multiple items on pages throughout the experience. The FAB appears on top of other content on the page allowing digital experience users to scroll through the page content while the FAB remains anchored in place. 

Types of FABs

  • Single - Commonly used when there is only one major call-to-action experience users need to take. Consider using the Single FAB for a phone number, linking to help content or just to take users back to the experience's homepage.
  • Multiple - A truly customizable option that allows Studio Users to display a unique icon for up to five items in the expanded view of the FAB. This option works well to connect experience users to email and phone information, quickly access other pages in the app, etc. 
  • Social - Automatically pulls in the icons for Facebook, Twitter, LinkedIn, and Instagram. Studio Users can toggle on or off which social media channels appear in their experience and link experience end-users to the applicable social media accounts.  
  • Drift - Connects to your Drift Chat account to make chatting with users easy! Studio Users can connect their Drift account via the JavaScript Install Code. How to find the Drift JavaScript Install Code.
  • Calendly - Make it easier for users to connect with you using the Calendly FAB. This FAB pairs with your Calendly account to allow users to book time on your calendar. How to find the Calendly JavaScript Install Code.
  • LiveChat - Connect with your users fast with the LiveChat FAB. This FAB pairs with your LiveChat account to help your users get in touch with you faster! How to find the LiveChat JavaScript Install Code.
  • LiveAgent - Allow users to get in touch with your support team with just a click with the LiveAgent FAB. This FAB allows Studio Users to connect their LiveAgent account right into the experience. LiveAgent Help Content.
  • Intercom - Level up your customer service with the Intercom FAB. Integrate your Intercom account into your FAB allowing for smoother customer service. How to find the Intercom JavaScript Install Code.
  • HubSpot - Communicate with users even faster with the HubSpot FAB. This FAB allows Studio Users to connect their HubSpot account with their experience. How to find the HubSpot Embed Code. 
  • Social Intents Chat - Connects your Social Intents account to your experience creating seamless communication between you and your users. How to find the Social Intents Code Snippet. 
  • Freshchat - Allows users to connect with your support team easily. How to find the Freshchat Code Snippet. Freshchat Help Content.
  • Olark Chat - Connects our Olark account to your experience for quick and easy communication with users! How to find your Olark Site ID.
  • Zendesk Chat - Connect with your users fast by including your Zendesk account in your experience! How to find your Zendesk Snippet.

Single FAB

The Single FAB has the following properties:

  • Component Id - Sets the name of the Single FAB component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the experience as needed.  
  • Link - Sets the link for the Single FAB to another Page in the experience or an external URL. 
  • Icon - Optional property allowing an .SVG to be used in place of the default collapsing plus icon. To delete a custom icon, click on the Trash Can to the right of this property. If left empty the default icon will be used. 
  • Fill Color - Sets the color of the primary FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
  • Icon Color - Sets the color of the FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
  • Vertical Alignment - Sets the vertical location of the FAB on the Page. Choose from the dropdown list: Bottom, Center, or Top.
  • Horizontal Alignment - Sets the horizontal location of the FAB on the Page. Choose from the dropdown list: Center, Right, or Left.

Multiple FAB

The Multiple FAB has the following properties:

  • Component Id - Sets the name of the Multiple FAB component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.  
  • Primary FAB Properties
    • Custom Icon - Optional property allowing an .SVG to be used in place of the default collapsing plus icon. To delete a custom icon, click on the Trash Can to the right of this property. If left empty the default icon will be used. 
    • Fill Color - Sets the color of the Primary FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the Primary FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Side - Sets the side from which the expanded FAB icons are shown relative to the Primary FAB. Choose from the dropdown list: Bottom, Right, Left, or Top.
    • Vertical Alignment - Sets the vertical location of the FAB on the Page. Choose from the dropdown list: Bottom, Center, or Top.
    • Horizontal Alignment - Sets the horizontal location of the FAB on the Page. Choose from the dropdown list: Center, Right, or Left.
  • Individual FAB Properties (Up to Four)
    • Link - Sets the link for the individual FAB to another Page in the experience or an external URL. 
    • FAB Icon - Upload an .SVG to display for the individual FAB icon.
    • Fill Color - Sets the color of the individual FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the individual FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.

Social FAB

The Social FAB has the following properties:

  • Component Id - Sets the name of the Social FAB component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.
  • Primary FAB Properties
    • Custom Icon - Optional property allowing an .SVG to be used in place of the default collapsing plus icon. To delete a custom icon, click on the Trash Can to the right of this property. If left empty the default icon will be used. 
    • Fill Color - Sets the color of the Primary FAB’s circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the Primary FAB’s icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Side - Sets the side from which the expanded FAB icons are shown relative to the Primary FAB. Choose from the dropdown list: Bottom, Right, Left, or Top.
    • Vertical Alignment - Sets the vertical location of the FAB on the Page. Choose from the dropdown list: Bottom, Center, or Top.
    • Horizontal Alignment - Sets the horizontal location of the FAB on the Page. Choose from the dropdown list: Center, Right, or Left.
  • Social FAB Properties (Facebook, Twitter, LinkedIn and Instagram
    • Display - Toggles on or off the fab for a specific social channel.
    • Link - Sets the link for the social channel FAB to another Page in the experience or an external URL. 
    • Fill Color - Sets the color of the social channel's FAB circle. There are two ways to set the Fill Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.
    • Icon Color - Sets the color of the social channel's FAB icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the experience's Color Palette or enter the hex code in the text field.

Drift FAB

The Drift FAB has the following properties:

  • Component Id - Sets the name of the Drift FAB component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the experience as needed.
  • Drift JavaScript Install Code- Learn how to find your JavaScript Install Code.

Calendly FAB

The Calendly FAB has the following properties:

  • Component Id - Sets the name of the Calendly FAB component in the experience. The Component Id can be referenced using JavaScript to add more functionality to the experience as needed.
  • Calendly URL- Learn how to find your Calendly URL.
  • Widget Text- Enter text as it should appear in the floating button on the page in the experience. Experience users click this text to trigger the Calendly Popup. The text uses the Font set in Branding for the experience. The text will wrap and there is no limit on the number of characters allowed.
  • Vertical Alignment- Sets the vertical location of the FAB on the Page. Choose from the dropdown list: Bottom, Center, or Top.
  • Horizontal Alignment- Sets the horizontal location of the FAB on the Page. Choose from the dropdown list: Center, Right, or Left.

LiveChat FAB

LiveAgent FAB

Intercom FAB

Head Tag

The Head Tag section provides Studio Users with an HTML code editor. The Head Tag editor gives Studio users the ability to add tracking codes to digital experiences, such as Google Analytics, Facebook, and LinkedIn.


How to Add and Edit the Head Tag

  1. Click the Edit Code button to open a code editor window.
  2. Enter your HTML code.
  3. Click Save.

Set tracking cookie information in any experience. Studio Users configure the cookie notice experience users will see upon launching the app. Tracking Cookie is supported in Apps using Page Builder versions 5.1.12 and 6.0.4, or newer, and App Builder version 1.1.8, or newer.

Still need help? Contact Us Contact Us