Lyft

The Lyft Component is a part of the Navigation Component Set and allows Studio Users to include a Lyft with a defined starting destination. With this component, the app user can open Lyft with a preset starting location with a click of a button. 

Add a Lyft 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 Lyft in the list or begin typing Lyft to search the list. 
5

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

Lyft Properties

The Lyft Component has the following properties:

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

  • Promo Code - Enter the promo code exactly as it has been set up in Lyft. 

Lyft 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