Uber

The Uber Component is a part of the Navigation Component Set and allows Studio Users to include a Uber with a designated pick-up location. With this component, the app user can open Uber with a preset starting location with a click of a button. 

Add a Uber Component to a Page

1
Create or open an existing app.
2
Click the Edit Pencil on a Page.
3
Click the Green + Icon, located in the bottom right corner.
4
Either scroll to Uber in the list or begin typing Uber to search the list. 
5

Select Uber. The Uber Component will appear at the bottom of the Content list in the left-hand column. The Uber Properties will appear in the right-hand column.

Uber Properties

The Uber Component has the following properties:

  • Component Id - Sets the name of the Uber 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.

  • Icon Color - Set the color for the Uber 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.

  • Background Color - Set the color of the background. 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.

  • Button Size - Set the size of the button. Choose between Default, Small, and Large. 

  • Full Width - Toggle on or off to have the button expand the width of the device. Default is set to off. 

  • Text - Enter the text as it should appear in the app. 

  • Text Color - Set the color of the 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.

  • Bold Text - Toggle on or off for the text to appear bold. Default is set to off. 

  • Italic Text - Toggle on or off for the text to appear italicized. Default is set to off. 

  • Destination Latitude - Enter in the latitude of the designated starting location. Find the coordinates of a location via Google Maps. 

  • Destination Longitude - Enter in the longitude of the designated starting location. Find the coordinates of a location via Google Maps. 

Uber Location 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