Awesome list of SOFTR tips

Guides & Help Docs
1

Hello everyone, :wave:

With the help of the community and some invested users like @dcoletta, I have launched a website where you can find some useful tips for SOFTR.

Here is the current list (Last update: 2022-06-27):

→ Access and Integrate forms through Popup (Modal)
→ Add a countdown / coming soon block
→ Add a dynamic breadcrumb block
→ add clickable contact links in listing lists and details block
→ Add confetti to a page
→ Add current user recordId to url
→ Add custom font
→ Add darkmode support
→ Allow a user of your site to sign in from a custom code block without using Sign In block
→ Always show a block on top of the screen (floating element)
→ Blur a section for non-logged-in users
→ Change background color across whole site
→ Change the page that opens after proceeding to the magic link
→ Change the text in the toggle of the pricing block
→ Change the url of logo click
→ Create a customized swiping experience
→ Create a like button
→ create an interactive status updater with JavaScript
→ Custom format a specific field
→ Customize a favicon for a specific page
→ Display an Illustration/Gif when a list is empty
→ Embed a user’s Instagram feed on their profile
→ Excerpt the first n words of a page for your SEO:Description field
→ Expand and collapse a block when another block in the page is clicked on
→ Force sign-in on upvote click
→ Generate slug from text
→ Go to homepage on 404 page not found
→ Have a responsive two-column layout
→ Hide a specific block only on Mobile (Responsive)
→ Hide button when field is empty
→ Hide Scrollbars for Embed Airtable form
→ Highlight the link in the header corresponding to the current page
→ How to use a gradient as a background color on a specific block?
→ Let users sample your site before requiring signup
→ Linking to linked record in listing detail
→ Load a default record on a page with both List and List Details blocks
→ Log out the current user
→ Make a real blog
→ Make all the links in a table open in new windows
→ Pass logged-in user data to embedded typeform
→ Pass on user and page details to an embedded Tally form
→ Pass the logged in users email to Crisp Chat
→ Pour Airtable data into templates in your list blocks and list details blocks
→ Pre-filter lists by url parameter
→ Random sort airtable records
→ Redirect logged in users to specific page
→ Remove nested scrollbar on Tally form
→ Script in Python in addition to Javascript
→ Set different colors for the List item tags
→ Show logged in user’s name in the website
→ Show monthly as default in pricing block
→ Translate the listing edit pop-up text
→ Use localized strings in your blocks

I hope that can help some of you! :smiley:

Cheers,
Joachim

19 Likes
2

Hey Joachim. We spoke over at nocode.ie (I think). Do you know of a good page refresh on edit or ajax snippet to get things current after an edit?

3

@Joachim,

Thanks for sharing this here :slight_smile:

4

Wow, thanks for this list. I’m a new user and will definitely pore over this! Also bookmarked!

2 Likes
5

Hey @AddyEdwin,

Thanks for joining Softr, let us know if you need help :slight_smile: Will be glad to help.

6

I just updated the list!
Almost doubled. :smiley:

1 Like
7

@Joachim,

Thanks a lot

8

Had trouble signing up on the sign up page.

9

Hi,
I’ll look today and will fix it if there is an issue.
Sorry about that

10

Just checking in if you had any luck figuring out the sign up issue. Would it be possible to share the Make a Real Blog information with me?

11

Hello everyone,

The website now has 68 tips !
I have very little time at the moment but will come back with more next month. :slight_smile:

Please share any code snippets or tutorial you might have!

Cheers

4 Likes
12

Great job!
Thanks for sharing.

I am trying to implement the confetti effect on a page following this thread:

Choose the page you want the confetti to appear on Go to Page settings > Custom code > Footer Paste this code in the box:

<script src=“https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js”></script>
<script>
var count = 200;
var defaults = {origin: { y: 0.7 }
};
function fire(particleRatio, opts) {
confetti(Object.assign({}, defaults, opts, {
particleCount: Math.floor(count * particleRatio)
}));
}
fire(0.25, {
spread: 26,
startVelocity: 55,
});
fire(0.2, {
spread: 60,
});
fire(0.35, {
spread: 100,
decay: 0.91,
scalar: 0.8
});
fire(0.1, {
spread: 120,
startVelocity: 25,
decay: 0.92,
scalar: 1.2
});
fire(0.1, {
spread: 120,
startVelocity: 45,
});
</script>

How do I refer to a specific page?

Example:
“Congratulation-page”

13

Hey @RafaPG,

Please, navigate to Pages > select your page > Settings > Custom Code add the code.

Just Save the changes and Publish the app :slight_smile:

1 Like
14

hi, i tried to signup but it seems i can;t. do you still work with this library?

15

Hello,

We are still working on the library. We had a little subscription issue (poke @Suzie @Mariam ).

I will update you when we are live again :slight_smile:

16

I was checking a few days ago and today. It is some errors. Code is not showing.

17

This is great, thank you.

For the log-out option, I wanted it to happen automatically. I asked ChatGPT for help and this is what I got. We will see if it works. I added it in a custom code block.

<script>
    let logoutTimer;
    function resetLogoutTimer() {
        clearTimeout(logoutTimer);
        logoutTimer = setTimeout(logoutUser, 3600000);  // 3600000 milliseconds = 1 hour
    }

    function logoutUser() {
        document.cookie = "jwtToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }

    // Reset the logout timer on any relevant event
    window.addEventListener('mousemove', resetLogoutTimer);
    window.addEventListener('keydown', resetLogoutTimer);
    window.addEventListener('scroll', resetLogoutTimer);

    // Initialize the logout timer when the page loads
    window.addEventListener('load', resetLogoutTimer);
</script>
18

Hi all,

This one seems very promising, but it leaves me with a question

→ How to use a gradient as a background color on a specific block?

Question: The tutorial on the website is missing a piece, can anyone help me out how to make this operational? (what custom code to add to the header of the page)

UPDATE: I found the answer to this question here: Gradient for background color - Feature Requests - Softr Community

Regards,
Thijs