Favorite Button

The Favorite Button is part of the Favorite Component Set. Once the Component is added to a Page, users can tap the button to save the Page to the Favorite List. Note the entire page will be saved. Favorites are saved to the local storage of a device. If a user clears their device cache or uses a different device the Favorites List will be blank.

Ideas for Using Favorite Button

  • Add to product pages, allowing users to create a favorite product list or services page.
  • Let users choose their favorite location by adding the favorite button on each location page.
  • Do you have popular pages in your app? Add the Favorite Button so users can quickly access the Pages that are most helpful to them.
  • In a conference or event app, allow users to save their favorite speakers or sessions to create a personalized schedule.
    • Pro Tip: Make sure Favorite List has been added to at least one page. Once the Favorite Button is used, all of the favorited pages will populate on the Favorite List. 

Favorite Button Properties

The Favorite Button Component has the following properties:

  • Component Id - Sets the name of the Component in the app. The Component Id can be referenced using JavaScript to add more functionality to the app as needed.

    Pro Tip: It is a best practice to use only letters without spaces for the Component Id. Symbols, spaces, and numbers are not recommended.
  • Favorite Page
    • Page Title - This is the title that will appear in the Favorite List. Enter the text as it should appear in the Favorite List. 
    • Description - This is the description that will appear in the Favorite List. Enter the text as it should appear in the app. 
    • Image - Upload a .JPG or .PNG to display an image. To remove an uploaded image, click on the Trash Can. Adding an avatar image is optional.

      Pro Tip: Optimize all images for the web to increase app performance and shorten load time. Square images are cropped to fit inside the circular frame. A square image 300 px by 300 px is recommended.
  • Unfavorite Styling
    • Text - Enter the text as it should appear in the button when the button has not been selected.  
    • Text Color - Sets the color of the Button Text. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Font Size (px) - Enter the font size in pixels. 
    • Bold Text - Toggles on or off to display the text as bold. Default is set to off. 
    • Italic Text - Toggles on or off to display the text as italicized. Default is set to off. 
    • Background Color - Sets the color of the button. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field
    • Border Color - Sets the color of the border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
      • Pro Tip: Set the Background Color to a lighter color and the Border Color to a darker color to allow the button to look like it is unchecked.
    • Border Width - Sets the width of the button 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.
    • Button Shadow - Toggles on or off the shadow for the button. Default is set to on.
    • Button Size - Sets the size of the Solid Button. Choose from the dropdown list: Default, Large, or Small.
    • Full Width - Toggles on or off the ability for the Favorite Button to span the entire width of the column(s) set in the Placement Settings. When the Full Width is toggled on, the Button will be centered within the number of columns the component is set to span. When toggled off, the Button will be left-justified within the column it is set to start in. 
    • Icon - Upload a custom icon using a .SVG or use an image that has been uploaded to your Content. The default icon is a heart. To delete the icon click the Trash Can Icon.
    • Icon Alignment - Sets the placement of the icon if an Icon Name is entered in the property above. Choose from the dropdown list: Left or Right.
    • Icon Color - Sets the color of the Icon. There are two ways to set the Icon Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
  • Favorite Styling
    • Text - Enter the text as it should appear in the button when it has been selected.
    • Text Color - Sets the color of the Text Color. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
    • Font Size (px) - Enter the font size in pixels. 
    • Bold Text - Toggles on or off to display the text as bold. Default is set to off.
    • Italic Text - Toggles on or off to display the text as italicized. Default is set to off. 
    • Background Color - Sets the color of the button. There are two ways to set the Background Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field
    • Border Color - Sets the color of the border. There are two ways to set the Border Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.
      • Pro Tip: Set the Background Color to a darker color and make sure the Border Color is the same as the Background Color to allow the button to look like it is checked.
    • Border Width - Sets the width of the button 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.
    • Button Shadow - Toggles on or off the shadow for the button. Default is set to off.
    • Button Size - Sets the size of the Solid Button. Choose from the dropdown list: Default, Large, or Small.
    • Full Width - Toggles on or off the ability for the Favorite Button to span the entire width of the column(s) set in the Placement Settings. When the Full Width is toggled on, the Button will be centered within the number of columns the component is set to span. When toggled off, the Button will be left-justified within the column it is set to start in. 
    • Icon - Upload a custom icon using a .SVG or use an image that has been uploaded to your Content. The default icon is a heart. To delete the icon click the Trash Can Icon.
    • Icon Alignment - Sets the placement of the icon. Choose from the dropdown list: Left or Right.
    • Icon Color - Sets the color of the Icon. There are two ways to set the Text Color: Click the Color Swatch to choose from the app’s Color Palette or enter the hex code in the text field.

    Favorite Button Placement Settings

    The Placement Settings for the Component sets which column(s) the Component will appear. Each Page of the app can have a different number of columns that are set in the Layout section of the Page Settings. The following Placement settings are available for this Component:

    • Column Start - Sets the column where the Component will start. 
    • Column Span - Sets how many columns the Component will span. 
    • Padding - Sets how much space will appear on the top, bottom, left, and right of the Component. When building a Page with multiple Components, the Padding will determine the overall spacing between Components.
    • Display Mode - Sets how the Component is displayed. If Both is selected, the Component will always show. Both are the default option. If Optimal is selected, the Component will only show if the browser supports the app. The main supported browsers are Chrome and Safari. If Degraded is selected, the Component will only show if the browser does not support the app. The main unsupported browser is Internet Explorer.

Still need help? Contact Us Contact Us