To add a landing page to your extensions (Portal, Form, & Shared View), there are three methods you can use, depending on the complexity of the page you want to create and your familiarity with HTML.
💡 If you are new to HTML, you can use AI tools like ChatGPT, Claude, or Gemini to generate the necessary HTML code for you.
Read-only Form as the Landing Page
This method is the easiest to use but offers limited design flexibility compared to HTML tags. It’s ideal if you only need to display basic information or images to users before presenting the extension.
Create a new table in your Airtable base with a single record containing the information you’d like to display on the landing page. Remember to also add an Airtable button, URL, or formula field redirecting to your main extension.
Create a miniExtensions form using the table you created for the landing page. Use the different customization and field options to display the information as you like:
Go to the fields section and mark all fields as read-only. You can do this for all the fields at once using the 'Make all read-only' bulk action:
Click the 'Open Form' button and select 'Edit Records'. Copy the edit records URL.
Go to Airtable and create a new formula field in the landing page table using the formula:
Once the field is created, you can further personalize the page by adding a header image and/or your company logo. After customizing, simply share the link with your users. They will be able to view the read-only form, designed to function as a landing page before they proceed to the main extension by clicking the button or URL.
Create a Web Page using HTML code contained in an Airtable field
You can create a landing page using our Convert HTML in Airtable to Webpages automation. If you are unfamiliar with HTML code, you can prompt an AI model like ChatGPT or Google Gemini to adapt your information to the HTML tag format! Remember to include a link to your actual Portal. Here’s an example:
<html>
<head>
<title>Welcome to Our Site</title></head>
<body style='font-family:Arial,sans-serif;background-color:#f4f4f4;color:#333;'>
<h1 style='text-align:center;color:#4CAF50;'>Welcome to Our Site!</h1>
<h2 style='color:#333;'>Frequently Asked Questions</h2>
<div><h3 style='color:#4CAF50;'>1. How do I sign up?</h3>
<p>You can sign up by clicking the 'Sign Up' button at the top right corner of the homepage.</p></div>
<div><h3 style='color:#4CAF50;'>2. How can I reset my password?</h3><p>Go to the login page and click 'Forgot Password.'</p></div><div>
<h3 style='color:#4CAF50;'>3. What should I do if I encounter an issue?</h3>
<p>If you encounter any issues, feel free to contact our support team via the 'Contact Us' page.</p></div>
<p style='text-align:center;'><a href='https://web.miniextensions.com/TtvaA2cfnbqXe4ThVtGw' style='color:#4CAF50;'>Follow this link to go to the Portal</a></p>
</body>
</html>
Create a new table and paste your code as a single line in a new long text or formula field (if you’re using a formula field, remember to use single quotes at the start and end of the code). If you need help removing the line jumps, you can ask an AI model to format it as a single line. The code within the field should look like this:
Once the code is ready, create a new ‘Convert HTML in Airtable to Webpages’ automation. Select the field with your HTML code as the HTML field and paste the Formula For Web Page in a new Airtable field within your recently created table.
You can share the resulting link with your users. They’ll see the landing page before proceeding to the extension using the link.
Display Your Data in a Side Panel Within the Portal or Shared View
If you want to show data, such as a FAQ list within the Portal itself so it’s visible only to logged-in users, you can use the Portal Header Title Field option to render and display HTML code.
Enable Show Portal Header As HTML and combine it with the Portal Header Display Mode - Sidebar option to show it as a sidebar:
To implement this, you just need to have the HTML code within a field. With the example code from above, the sidebar will look like this:
