Softr

Ceci est le guide ultime de Softr.

Dans ce guide, vous apprendrez tout ce qu'il faut savoir à propos de cet outil no code de création d'applications web, incluant :

• Fonctionnalités importantes
• Comment débuter facilement
• Conseils avancés
• Démonstration de vraies applications
• Comparaison avec d'autres outils no code
• Optimiser le SEO
• Plus encore

Tout ce que vous apprendrez dans ce guide vous donnera une bonne base pour créer une web app.

Les exemples de ce guide se baseront sur plusieurs cas de web apps, soient un portail client, un tableau de bord, un outil interne pour les entreprises et un répertoire de ressources.

Commencez par créer un compte Softr avec l'essai gratuit de 30 jours.

En résumé

Les points positifs de Softr ✅

• Simple et facile à utiliser, mais puissant
• Applications illimitées avec sous-domaine Softr + domaine personnalisé gratuit
• Intégration super efficace avec Airtable
• Templates gratuits pour démarrer sans page blanche
• Documentation complète et vidéos explicatifs
• Optimisation SEO pour chaque ligne (record)
• Beaucoup de méthode de paiements

Les points négatifs de Softr ❌

• Forum peu actif (rejoignez la communauté Slack plus active de 1k+ membres)
• Design limité (requiert du code pour être plus flexible)

Qui utilise Softr ?

Softr est principalement utilisé pour :

• Les petites et grosses entreprises
• L'équipe marketing
• Le support client
• Créer un produit en ligne avec un membership
• Tester une idée d'affaires (MVP)

C'est quoi Softr ?

Softr est un outil no code de création d'application web.

Ces web apps sont des portail clients, des outils internes pour les entreprises, des marketplaces, du contenu réservé aux membres, des répertoires de ressources ou même des sites web.

L'important c'est que vous avez des données sur Airtable et que vous voulez les afficher d'une quelconque façon.

Fondé en 2020, Softr est soutenu par des fonds de capital-risque. Avec la dernière levé de fonds de $13.5M, l'équipe travailleur sur :

• une boutique de composantes
• à ajouter d'autres bases de données que Airtable
• à rendre l'interface de design plus flexible

Softr est l'outil de web app la plus facile à utiliser, sincèrement. J'ai essayé Bubble, WeWeb, Bildr, Webflow, Stacker et Softr est le plus facile à maitriser.

Le studio est minimaliste et clair. Tout est intuitif.

Vous pouvez facilement prévisualiser votre app sur ordinateur, tablet et mobile en cliquant sur Preview.

Commencer avec Softr

Pour créer une application mobile avec Softr, voici un bref aperçu des étapes clés.

Étape 1: Créer un compte

Si ce n'est pas déjà fait, créez un compte Softr avec l'essai gratuit de 30 jours. En fait, vous pouvez créer des applications gratuites avec 200 lignes sur Airtable.

Vous verrez ce tableau de bord minimaliste.

Étape 2: Créer votre application

Cliquez sur New Application, puis comme tous les outils no code, vous aurez le choix entre une page blanche (blank) ou une page déjà construite (template).

Étape 3 : Lier votre base Airtable

Pour les blocks List, List Details, Table, Calendar, Kanban, Chart, Map, etc. vous devez lier votre base Airtable.

Si vous avez choisi un template, vous devrez copier la base Airtable. Voici comment faire.

Étape 4 : Ajouter des blocks

Le studio est là où la magie opère.

À droite, vous ajouter les blocks de votre choix. La section static sont ceux sans Aitable et la section dynamic sont ceux avec Airtable ou d'autres données dynamic en fonction de l'utilisateur.

À gauche, vous pouvez:

• ajouter des pages ainsi que modifier les paramètres (SEO, social, etc.) de chacune
• modifier le thème de l'application, soit la couleur, la police et la largeur des pages
• configurer la section membres pour des sections payantes
• modifier les paramètres générales de l'application (intégrations, SEO, domaine, etc.)

Étape 5 : Publier 🎉

Une fois tous les blocks ajoutés, il est temps de publier en cliquant sur Publish. Vous avez le choix entre votre domaine ou celui de Softr.

Tarification de Softr

Podia a une tarification qui s'ajuste aux types d'applications web.

Le plan Starter est pour un site web ou les répertoires sans membership. Le plan Professional permet de créer des apps avec des membres et vendre des produits. Le plan Business s'adresse principalement aux entreprises et leurs outils à l'interne.

Tous les plans permettent de faire un nombre illimité d'applications.

Pour les différences, voici un aperçu.

Softr vs les autres

Softr est une alternative à quelques outils de création de web apps comme Bubble, WeWeb, Bildr, Stacker et Glide Pages. Ils peuvent toutes faire une web app à partir d'une base Airtable.

Softr est aussi une alternative à Webflow pour la création d'un site web.

Je choisi de parler spécifiquement de Glide, car c'est un autre outil très simple à utiliser pour créer un répertoire et ajouter des membres (membership).

Aujourd'hui, je préfère Softr.

Vous pouvez lire les raisons dans ma comparaison Softr vs Glide Pages.

Ce qu'il faut savoir

Toutes les applications Softr sont uniques, mais il y a une base qu'il faut connaitre pour bien faire n'importe quelle app.

La terminologie de Softr

Comme tout autre outil, il y a des termes spécifiques où il faut passer plus de temps pour bien comprendre.

Block : Une app Softr se monte comme un bloc Lego. Un block est un élément contenant de l'informations.

Database : Softr permet de montrer des données aux utilisateurs et même d'en collecter. La base de données est intégré directement avec Airtable.

Users : Ce sont les utilisateurs qui se connectent avec un compte et qui ont accès à des données non public.

Users Groups : Vous pouvez donner accès à un type d'utilisateur en fonction du type de donnée.

Edit Permissions : Les utilisateurs peuvent modifier les données Airtable. Les permissions permettent de déterminer qui à le droit de modifier quoi.

Visibility : La visibilité est le paramètre qui permet aux utilisateurs de l'application de voir des données.

Intégration avec Airtable

Plus haut, on a vu comment intégrer Airtable avec votre clé API.

Dans tous les blocks dynamic avec une base de données Airtable, il y a toujours :

• Airtable Base
• Airtable Table
• Airtable View

La base Airtable se retrouve dans le tableau de bord Airtable.

La table Airtable sont comme les onglets dans Google Chrome.

La vue Airtable permet de montrer la même base de donnée sous différentes façons, par exemple avec des filtres.

Vous pouvez modifier les données Airtable directement dans Softr. J'en parle plus bas dans la section Membership.

Autres intégrations

Softr a une intégration avec beaucoup d'outils.

Analytics : Facebook Pixel, Fathom Analytics, Google Analytics, Google Tag Manager et Hotjar

Automatisation : Make et Zapier

Cookies : Lubenda

Email marketing : Mailchimp et MailerLite

Map : Google Maps

Membership : Google Sign In et Google reCaptcha

Paiement : Gumroad, PayPal, Buy Me A Coffee et Stripe Checkout

Support : Crisp, Drift Chat, HubSpot Chat, Intercom et Typeform

Traduction en français

Une autre intégration que je n'ai pas nommé est avec Weglot afin de traduire votre site en français (ou autres langues).

J'aime Weglot et j'ai utilisé l'outil pour un de mes projets. Veuillez lire mon avis sur Weglot pour plus de détails.

Pour la traduction avec Softr, regardez ce tutoriel.

SEO

Le référencement organique est important pour une web app.

Ce l'est moins pour les outils internes pour les entreprises, mais pour le reste, si vous voulez attirez des utilisateurs externes, assurez-vous d'optimiser le SEO.

Dans Softr, il est possible de modifier le SEO dans les pages et les données Airtable.

Pages

Pour les pages, vous pouvez modifier le titre et la description qui se retrouveront visible sur les moteurs de recherche.

Allez dans les paramètres en cliquant sur les trois points, puis Settings.

Données Airtable

Pour les données Airtable, plus spécifiquement le block List Details, vous pouvez changer 4 paramètres : index, slug, title et description.

Index : si la page doit être sur les moteurs de recherche ou non.

Slug : l'URL désiré.

Title & Description : c'est comme les pages plus haut.

Par exemple, pour un répertoire de ressources, ça permet d'avoir beaucoup plus de traffic organique.

Basé sur Ahrefs, je sais que le mot-clé "download youtube thumbnail" est recherché 1500 fois par mois.

Ces paramètres SEO me donnent la possibilité de ranker sur ce mot-clé là et tous les autres mots-clés de ma liste.

Idéalement, plus le mot-clé est difficile (car beaucoup de compétitions) comme c'est le cas ici, plus il faut aller chercher des backlinks et ajouter du contenu texte sur la page.

Pour mon répertoire, il faudrait alors que je créé une page List Details dans Softr avec une description du free tool et autres textes pour maximiser mes chances.

Studio

Pages

Il se peut fort bien que vous deviez ajouter des pages à votre web app, sauf si c'est un tableau de bord comme celui-ci avec une seule page.

Par exemple, la web app de suivi de l'inventaire, un outil interne pour les entreprises, a 9 pages seulement. Mais, il permet beaucoup de choses !

On peut s'y connecter en tant qu'admin ou employé, de voir les commandes, les manufacturiers, l'inventaire et plus encore.

General

Ce sont les mêmes paramètres que lors de la création d'une page. Vous avez aussi les options de cacher et supprimer la page.

SEO

Nous l'avons plus haut, vous ajoutez là le titre et la description de la page qui sera visible sur les moteurs de recherche.

Social

Vous pouvez ajouter ici le même texte que le SEO et vous ajoutez une image pour les liens partagés sur les réseaux sociaux.

Default Header & Footer

Si vous voulez le même header (menu) et footer que la page d'accueil, laissez les options à ON. Si vous voulez un header ou footer personnalisé pour la page, veuillez mettre l'option à OFF.

Visibility

Nous allons le voir plus bas, mais lorsque vous avez des membres, c'est là où vous devrez dire si la page est visible pour tout le monde ou les membres.

Custom Code

Nonnnnnn, du code ! 😱

Sans blague, c'est là où vous devrez sans doute ajouter du code pour des intégrations qui ne sont pas dans la section Settings > Integrations.

Thèmes

Ici vous pouvez établir des valeurs par défaut pour le design de votre web app.

Typography : Vous déterminez la police d'écriture, la grosseur et la couleur pour les titres et le texte.

Buttons : Vous déterminez la couleur et la grosseur des appels à l'action.

Advanced : Vous déterminez la largeur du site web. Si vous voulez diminuer seulement la largeur du texte, vous pouvez ajouter ce bout de code dans la section Custom Code vu plus haut.

<script>
document.addEventListener("DOMContentLoaded", function() {
    $('section[class^=text] div.col-12').addClass('offset-lg-1 col-lg-10');
});
</script>

Utilisateurs

Ce que j'aime de Stripe comme méthode de paiement, c'est qu'il est possible d'accepter les paiements en mode test.

Cela permet de tester un funnel de vente par exemple.

Softr a eu la même idée en ajoutant une version test aux utilisateurs.

Cela permet de tester votre web app avec des "faux" utilisateurs où ils s'inscriront en mode "preview" de l'app.

Vous pouvez ajouter, supprimer, importer et exporter des utilisateurs.

Pour que les utilisateurs se connectent, vous pouvez donner un mot de passe généré par Softr ou un magic link.

Cette section utilisateur peut être utiliser seule ou en la connectant avec Airtable.

Si vous connecter avec Airtable, vous devez lier la base Airtable, la table Airtable et le e-mail de l'utilisateur. Vous pouvez ensuite sélectionner un colonne pour son nom, lien magique et avatar.

Enfin, il est possible de laisser visible certaines pages à certains types d'utilisateurs, je l'explique plus bas dans la section Membership.

Paramètres

Ces paramètres sont utiles pour l'application en entier.

General

Vous ajoutez le nom de l'app, un sous-domaine Softr, un favicon et vous pouvez enlever le badge Softr pour les plans payants.

Custom domain

Vous ajoutez le domaine personnalisé que vous avez acheté sur Namecheap ou ailleurs.

Integrations

J'en ai parlé plus haut. Ce sont là les intégrations "officielles" avec Softr où vous n'avez pas à ajouter de code dans le header de l'app.

SEO

Je vous conseille fortement d'ajouter votre ID Google pour utiliser Google Search Console.

Cela sert, entres autres, à analyser vos requêtes et pages les plus populaires.

Custom code

Tel que vu précédemment pour les pages, vous pouvez ajouter du code dans le header et le footer de votre app Softr.

Email signature

Si vous avez des utilisateurs, vous pouvez modifier le nom et l'email pour l'envoie des emails.

Il y aussi les Users groups, Permissions et SAML Configuration que je vais parler plus bas dans la section Membership.

Blocks

Les blocks sont les composantes à ajouter dans l'app ou le site web.

Il est possible de changer le design de tous les blocks en cliquant sur l'icône de styles.

Il est aussi possible d'ajouter un block sur un autre page web que Softr avec la fonction embed.

J'ai remarqué quelque chose de super pour sauver du temps. Quand je modifie le style d'un button et que j'en ajoute un 2e, il aura le même style que le premier.

Static

Les blocks statiques sont ceux qui se retrouvent dans toutes les apps et sites web.

Ce sont sensiblement les mêmes composantes que vous retrouverez chez les autres outils no code. Alors, vous ne serez pas perdu si vous avez de l'expérience avec une alternative.

Les blocks statiques sont : header, hero, feature, feature grid, CTA, partner, gallery, pricing, team, testimonial, FAQ, footer, custom code et other.

Dynamic

Les blocks dynamiques sont basés sur votre base de données Airtable ou vos utilisateurs.

Les blocks dynamiques sont : form, user accounts, payment, list, list details, table, calendar, kanban, chart et map.

Membership

Visibilité

Vous pouvez modifier la visibilité des pages et des blocks de votre app.

Il faut tout d'abord ajouter les groupes d'utilisateurs.

Par exemple, dans le portail client, il y a plusieurs groupes où des pages seront accessibles en fonction de leur rôle.

Une fois la visibilité ajouté pour un block, vous verrai un cadenas.

Pour les paiements, c'est dans la section Integrations > Stripe Checkout.

Comme dans Stripe, vous pouvez permettre les utilisateurs de Softr de s'abonner mensuellement ou payer une seule fois.

Avec les conditions, il est facile de segmenter les utilisateurs pour chaque produit.

Filtres

Pour les blocks dynamique tels que List, Table, Calendar, Kanban et Chart, il est possible d'ajouter des filtres pour déterminer qui peut voir les données en fonction de conditions.

Pour notre portail client, il est facile de faire en sorte que les clients, consultants et managers ne voient que leurs projets.

Il suffit de déterminer le match à any et le client email is people email puis la même chose pour les autres groupes d'utilisateurs.

Permissions

Softr permet aux utilisateurs de modifier les données directement dans l'application, sans passer par Airtable.

C'est là où l'intégration puissante prend tout son sens !

Il est possible pour les utilisateurs d'éditer les blocks List, List Details et Table.

Comme toutes les autres fonctionnalités, c'est très simple et intuitif de régler les permissions.

Une fois fait, les utilisateurs ayant accès pourront éditer les données en cliquant sur l'icône de crayon.

Conclusion

Voilà, j'espère que vous avez aimé ce guide.

Softr est un outil que j'adore.

N'hésitez pas à l'essayer pour votre projet de web app, vous ne serez pas déçu.

Vous aimez cet article ? Partagez-le à un•e ami•e. Ça ne prend que 10 secondes. L'écrire me prend 10 heures. Vous pouvez aussi m'offrir un (ou plusieurs) Latte glacé 🥤, ça m'aide à écrire plus !

Les liens dans cet article qui mènent vers softr.io et contournement.online sont des liens d’affiliation. Si vous achetez un abonnement, il ne vous coûtera pas plus cher, mais je recevrai une petite commission qui non seulement soutient mon travail (~ 10h/article de recherche & écriture), mais m'aide aussi à faire de Non Codeur un side project durable.