Application Settings
Before starting to build your site, you might want to check the application Settings to apply some general configurations. The settings can be accessed from the left-side toolbar as shown in the following screenshot.
So, let’s go through the sections one by one.
When you create your application a random name and subdomain are automatically assigned to it, which can be customized in this section. The Application Name is for your own reference and will not appear anywhere after publishing the app. Next, you can customize your subdomain as follows: https://<randomname>.softr.io. If you are on a paid plan, you can also use a custom domain.
Lastly, you have the option of adding a favicon. Please, follow the provided size and format recommendations. There are numerous services (e.g. https://favicon.io/), that you can use to generate a favicon of the required format and size.
Here you can set the default styles and colors for all the building blocks and then customize them for each block separately (from block’s Styles and Colors settings) if needed.
First comes the Base Text Size, which will correspond to the “m” size in the individual text field settings. For instance, if you've selected the Base Text Size as "16px", the "m" Text Size in block settings will correspond to 16px, and the other sizes ("s," "l," and so on) will work accordingly.
Next you can set the default Font Family, Font Weight, and Color for your Header (titles) and Body (subtitles and the rest).
Further on, you can set the default Roundness, Text Color, and Background Color for your buttons. The Roundness controls how rounded are the corners of the buttons. You can set it to “none” or choose from the four available levels of roundness.
Finally, we have the Advanced section, where you can set the Website width.
You can set the width to Fixed (controlled by you), Full (to occupy the full width of the screen), or define a Custom width (should be at least 1140px).
Here you can use your own custom domain to run your website or web-application on. More detailed info on configuring a custom domain can be found here.
In this section you have the list of all the available integrations that can be connected to your app. Each integration is examined in greater detail here.
Here you can configure general SEO settings, while SEO details for individual pages can be set in page settings.
In the Google Site Verification field you need to add your ID to verify your ownership of the website and link it to Google Search Console.
Further on, you can fill in the robots.txt file to provide some instructions for web crawler. You can find more info on robots.txt here.
In this section, you can add custom code to your app header and footer. The first one will be applied before the </head> tag, and the second one will be applied before the </body> tag. Within the <head> element, you can link external resources, add metadata as well as custom styles. The second piece will be added at the end of your <body> element and is meant for adding scripts.
Let's suppose we want to add a Facebook Messenger to our Softr app, so that users can contact our Facebook Page.
In the Page Settings, we are going to navigate to Messaging, and select Add Messenger to your website, as shown below.
In the next few screens, we can customize the widget, and will hit Next until we reach the screen with the code snippet.
In the last screen, we are going to add our domain and copy the code snippet.
Lastly, we'll go back to our Softr app's Settings and paste the code into the footer area. Below you can see the process of adding the code and viewing the chat widget on the website.
