Welcome to Frontly!

Follow these simple steps to create a fully functional front-end web app. Visit our Help Center to find more articles on how to use Frontly.

1. Choose a Subdomain

A subdomain is your internal Frontly web address. It will look something like:

yourcompany.frontlyapp.com

When entering your subdomain, ensure you only enter the first part before the .frontlyapp.com portion. You can get a Custom Domain with the Enterprise plan.


2. Create a Page

To create a page, navigate to the Pages list and click 'New Page'.

  1. Give your page a title - This will be used as an internal reference and also will display on your public app page.

  2. Edit Your Page Settings - You can change a number of settings here, including your Page Route and whether to show your Navigation Header/Sidebar. Learn more about page settings here.

  3. Add a Module - Modules are the building blocks of Pages inside Frontly. A Page can have multiple Modules, each with their own functionality.

  4. Configure an Action - Fetch data from your Data Source with an HTTP Request, or from a Google Sheet:

    1. Page Load Action - A custom action that runs when your Page is first loaded.

    2. Item Click Action - A custom action that runs when your Module or Button is clicked.

  5. Configure Filters & Actions (Optional) - Add an interactive layer to your page by adding a search bar, tab or select dropdown filters, and custom click actions.

  6. Customize Styling - Each Module has optional style customizations you can make to fit your design preference.

Finally, don't forget to hit 'save' in the top-right corner. Once you've made your changes, head over your yoursubdomain.frontlyapp.com to preview the changes, or click the 'preview' button on the right.


3. Map Your Data

To fully utilize the capabilities of modules, you'll need to enter the API endpoints of the data you want to display or connect your data using one of our Integrations (Google Sheets, Airtable).

  1. Connect to a data source by setting up your API Configuration or using one of our Integrations.

  2. Create a Page Load Action or App Session Action to load the data you want to reference or display

  3. Add a Module that can connect to a data source (table, chart, etc.)

  4. Click the blue "Select Source" button on the Page Config Panel.

  5. Select Your Page Load Action or App Session Action, or another data source.

  6. Select the fields you want to include in your module. (title, name, image, date, price etc.)

  7. Click save, and preview your page to test.

Did this answer your question?