DEV Community: Johannes

How I send a personal message (incl. follow ups) to 100's of sign-ups with this $5 tool

Johannes — Fri, 05 Jul 2024 06:31:02 +0000

As Formbricks matures, I’m less involved in building the product and instead focus on selling it.

With hundreds of people signing up every week, we’re fortunate to have a good starting point.

Obviously, every sign-up is an opportunity: Someone found us, was intrigued enough to sign up and test the product. We want to leverage that. Not every sign-up will buy, but every sign-up can provide valuable feedback or insights.

However, without a good process, the follow-ups quickly occupied a good chunk of my workday…

How to Follow-Up: Delegate or Automate?

I ran into a bunch of problems:

The sign-ups piled up in our list of new users when I was working on other things.
Our product analytics tool doesn’t let me tick off/mark sign-ups in the people view.
I didn’t want to set up a custom Slack notifier for every sign-up because it would make Slack notifications redundant. But I also kept forgetting to follow up within 24h…
Each follow up took too long to be effective.

So in short: I struggled to reach out on time and personalized. And the leads went stale…

Since customer research and communication are key for a successful product development, I didn’t want to delegate.

And since personalized messages work much better, I didn’t want to fully automate.

So I looked for a better process and tooling - and found Vocus.

The $5 Tool That Makes It All Possible

The new process I set out to design needed to tick the following boxes:

Filter out personal email addresses from the sign-up list.
Let me reach out within 24h after sign up.
Reach out with a personalized message.
Auto-follow up twice (a lot of sales happen after the 2nd and 3rd follow-up).

Vocus.io is a simple tool that does exactly what I need (and a tiny bit more). But even the $5 plan is enough for now because it packs the two things I need: Email templates with placeholders (they call this Snippets) and automatic follow-ups 😍. And it comes at a really fair price!

Setting Up Semi-Automated Follow-Ups

Before we look at how to set up Vocus and Formbricks, here is the process in a nutshell:

Alrighty, let’s dive into the details!

Setting Up Vocus.io

Create a Snippet to send out as the initial email:

It’s important to keep it short (I’m likely too wordy already) and generic enough so that you keep the option to send it even without further personalization. Here is my current message before personalization:

Hey [[Name]],
from time to time I go through our sign ups and reach out to interesting people like yourself :)
Looks really cool what you're working on at [[Company]].
Is there anything I can help you with?
Best, Johannes

Secondly, we set up the template for the follow-ups:

Once you hit Save, you have to attach the Follow-Up to the Snippet we created above.

Once Vocus is set up, let's have a look at Formbricks.

Setting Up Formbricks

How and where you embed Formbricks for your onboarding survey is out of scope for this article.

The only important thing is that you do two things:

Identify the user (with Formbricks possible for both link surveys embedded via iframe as well as native surveys).
Activate email notifications for the Onboarding survey:

Aight, we’re good to go!

The Process in Action

1) When a user signs up for Formbricks, they are asked to fill out the Onboarding survey:

2) Because we set up both user identification and email notifications, I get an email as soon as someone signs up. Before the email hits my inbox, I filter out all personal sign-ups which are unlikely to buy an Enterprise plan from us:

3) The Formbricks email notification contains both the email of the new sign-up and the content of the Onboarding survey:

I look at the domain and website to understand what the company is working on. For promising leads, I try to find the person on LinkedIn. Together with the info from the onboarding survey, I have enough to personalize my outreach message.

4) I then draft an email to the user and type / into the body of the email. Vocus opens and lets me pick a template by typing the name of it. In this case, I have a “generic-onboarding-followup” template in both English and German:

Now Vocus asks me to fill in the placeholders I created in the template:

It fills the values in both the template and the follow-ups:

I really like that I can update the text or just go with the default. It lets me personalize the messages including follow-ups all in one step. I can set and forget until people reply.

5) After hitting “Save” to automatically send the follow-ups after 2 and 4 days, I can personalize my initial message. In my experience, it’s not super important what exactly you write. The main goal is to give the recipient the impression that the email is not automated:

That’s It!

For me, this is the perfect balance of keeping control over personalization and automating away the tedious stuff (templating, follow-ups, mental load of having to think of doing a daily task in different tools).

It’s simple, cheap, and effective.

Have a look at both Vocus.io and the Formbricks Onboarding Survey.

Keep shipping 🚢

🤓 🚀 These 6 repos will help you crush React Server Components (RSC) ✅🔥

Johannes — Mon, 20 Nov 2023 11:10:53 +0000

A few months ago, the React team introduced React Server Components (RSC) to the dev community. React Server Components allow you to write UI that can be rendered and cached on the server, reducing load times.

Some open-source projects have begun to adopt this new model and in this article, I will share with you six of these repos at the forefront of web development 🔥

1. Formbricks 🧱

Formbricks is an open-source experience management platform that helps companies to build user-friendly products and services.

Built with Next.js, Prisma, and Tailwind CSS.
Completely runs on RSC ⭐
Formbricks integrates with a variety of third-party tools, such as Google sheets, Notion, Airtable, Zapier, etc.
In October, Formbricks hosted the FormTribe hackathon to ship all Typeform-like features.

Go to repository ⭐

2. Twenty 2️⃣0️⃣

Twenty is an open-source CRM alternative to Salesforce. It also gives users the choice of self-hosting.

Built with React, Prisma, and Next.js among others.
Users can track their sales opportunities by tracking the stage of the deal, the value of the deal, and the next steps.

Go to repository ⭐

3. Blitz ⚡

Blitz is an open-source full-stack React framework. It adds all the missing features to your React app, like:

Automatic code generation
Built-in data fetching and caching
Authentication and authorization

Go to repository ⭐

4. Documenso 📝

Documenso is an open-source document signing platform built with React and Next.js. Documenso aims to provide a transparent, accessible, and trustworthy alternative to commercial document signing platforms.

Recently launched a rewrite with RSC 🤓
It offers a variety of features, including secure document signing, electronic signatures, document tracking, user management, team collaboration, and integrations with other popular business tools.
Documenso is a valuable resource for businesses of all sizes.

Go to repository ⭐

5. Idurar 🤷

Idurar is an open-source ERP/CRM library built on the MERN stack.

It offers a variety of features, including contact management, lead management, opportunity management, task management, and reporting.
Integrations with other popular CRM platforms.

Go to repository ⭐

6. Tanstack Query 💾

Tanstack query is formerly known React Query. It supports React Server Components and includes a number of features that make it a good choice for learning React Server Components.

Tanstack Query has a simple and intuitive API that makes it easy to use, even for beginners.

Supports both server-side rendering and client-side hydration, making it a good choice for building applications that are both fast and responsive.

Go to repository ⭐

Have a look at these repositories to learn how they use RSC 🤓

Any other cool repos we should list here? Comment 👇

Support our project, leave a ⭐ 🚀

👾 Making Open Source contributions a GAME? 🎲

Johannes — Tue, 17 Oct 2023 10:00:08 +0000

Any Game Designers around? Let's discuss! 👇

I'm a maintainer of a popular open source project, we're building an alternative to Typeform + Hotjar (here is the repo ⭐).

Open Source contributions are really great because they have different advantages for different people involved.

However, they also have a few downsides attached to them, which we try to address in a fun way: Making it a game!

What's wrong with normal contributions?

These are the problems which are recurring in different flavours:

We have mostly junior developers = lots of overhead, little initial return
Some, we help get started to never ship their PR = only additional work on our end
When we release an issue which requires relevant experience, we often have to tell juniors who jump on it that they are lacking experience. Here we need a better way to preselect.
The more experienced engineers stick around for 2, 3, 4 PRs but then often drop off. We want them to stick around longer and get something for it.
We want to compensate for relevant contributions but are afraid to kill the intrinsic drive. This is why we want to embed it into a game.
Contributors don’t have a great way to showcase their contributions for Formbricks.
So far, recognising contributors publicly is very manual and time-consuming.

So far so good. We have addressed some of these issues in our first attempt to gamify contributions: The FormTribe hackathon!

Our MVP: The FormTribe hackathon

Our project is called "Frombricks", our community "FormTribe".

This October, we're running the FormTribe Hackathon. In a nutshell, it works like this:

Contribute code to gather points or
Perform one of the Side Quests
At we end we have a lottery with 65 prizes (MacBook Air M2 is one of them) and the higher your point score, the higher your chances of winning.

So far, this has worked reeeally well! At this point, we have significantly more people wanting to contribute than we have tickets available. We release an issue, reload the page, and someone wants to work on it already 😍 🚀

This is enough for us to put some thought into how we could gamify the complete contribution experience in our community:

The overarching concept (draft)

The idea is to wrap open source contributions into a habit loop: Trigger, Routine, Reward. In its simplest version it goes like this: See new issue notification (Trigger), create contribution (Routine), collect reward (Points). Restart.

The points help you level up. With each level, you have a new set of rights and benefits.

Level 0 - Registered Contributor

You can start collecting points by signing up via email. With a simple form you add your GitHub name and Twitter handle for us to bring everything together.

You receive all kinds of instructions via email as well as a notifier, when we release a new issue which you could work on. We also share a list of side-quests you can perform to level up to Level 1 rather quickly;

Points to reach Level 1: 250 (maybe 1h of work)

Level 1 - "Repository Rookie"

Rights: Work on beginner issues, limited set of side quests to complete, GitHub badge
Benefits: Shoutout in Weekly / Monthly round up
Limitations: Cannot work on intermediate issues

Points to get to next Level: 1000

Level 2 - "Deploy Deputy"

Benefits: To celebrate they'll receive merch when leveling up + public shoutout, GitHub badge
Rights: Work on intermediate issues, expanded set of side quests
Limitations: Cannot work on issues with bounties

Points to reach next level: 3000

Level 3 - "Pushmaster Prime"

Benefits: More advanced merch (limited stuff) to celebrate leveling up, GitHub badge
Rights: Work on all issues incl. ones with bounties ($)
Limitations: -

Points to reach next level: 7000

Level 4 - "Formbricks Legend"

Benefits, Rights and Limitations to be decided.

With this level system and the benefits, rights and limitations attached to the levels, we solve quite a few of the problems listed above.

What do you think?

Open questions:

How do we structure the ideation process best? Any methods or frameworks?
What are the most common mistakes people make when designing a game?
What should we take into account designing incentives? We don't want hunger games, we want to foster a spirit of collaboration. How can we make sure we do?
What are we totally missing?
What are we getting wrong here?
Is anyone with relevant xp interested in helping out as a sparing partner? Currently, this is more of a fun endeavour we do on evenings and weekends, but i know that almost all other OS projects have these issues...

Let's discuss 👇

This is the point where we can take everyones feedback into account :)

To support our project and see this gamefied concept become a thing, please star our repository ⭐!

🤘🤓🤘 Join Formbricks! (Senior) Full-Stack Engineer needed 🤘🤓🤘

Johannes — Fri, 01 Sep 2023 07:31:03 +0000

We're expanding our team!

We're looking for a (Senior) Full-Stack Engineer to support our engineering team 💻

What you’ll be doing 🚢

In addition to our founding team, we have a small team of talented junior engineers and a community of active contributors. We love their work and strive to help them grow with us. Our current bottlenecks are shipping complex features which touch many different elements of our repo and reviewing PRs.

This is where you come in!

Complex, product-defining features: We have a large backlog of highly requested features we are working on. Due to limited capacity, we currently don’t get to build out some of the innovative and potentially product-defining features. Your chance to leave a mark 😎
Reviewing PRs (and helping others learn): We would love to hand out more work to the engineering engine behind Formbricks but struggle to keep up with PR reviews. We have a high standard in code quality, maintainability and like to work with cutting edge software architecture. One aspect of your work is keeping our PR pipeline clean 🚰
You’ll implement features both frontend and backend to give you full control over your progress.

Skills & Experience 🧠

3+ years of professional experience using React
1-2+ years of experience with Next.JS
3+ years experience with Typescript and Node.js for server-side development
Ideally: Experience with Prisma, TailwindCSS, Zod, Docker & Github Actions is a plus.
Advanced English for communication and technical writing.
At least one portfolio project you are allowed to share with us to help us understand your coding style and problem-solving skills

Mission

We strive to enable teams to build truly customer-centric products and experiences based on real data - all open-source and privacy-focused.

About Formbricks

Formbricks started as a side project but quickly turned into much more. We raised a Pre-Seed round, incorporated a company and are looking to hire ambitious new team mates.

How are we working together? 🤝

Remote
Async-first (very few meetings)
Ownership-focussed (make decisions, learn from mistakes)
Think along (don’t just follow instructions)

Compensation 💸

We hire and pay locally. Please add your salary expectation in the form linked below.

Work/Life at Formbricks 🤸

Generous compensation & equity
Unlimited vacation (with a minimum)
Company Offsites (one in India coming up in October and you could be there!)

Sounds good? Apply now!

👉 Apply here.

What we're asking in the application form:

1. Whats your name?

2. Whats your email?

3. LinkedIn & GitHub profiles

4. How much xp do you have with React? (Years)

5. How much xp do you have with NextJS? (Years)

6. How much xp do you have with TypeScript? (Years)

7. Do you use chatGPT in your development process?

8. Why do you want to work on Formbricks?

9. What is a fair compensation for your work?

10. Are you happy to help our junior devs learn and grow?

11. Have you worked in a remote & async team before?

12. Please share the details of a project you worked on and are proud of: How did you approach it? What did you learn?

Looking forward to getting to know you!

📃 👀 Run in-app surveys in your web app in 10 minutes with Formbricks 🤓❤️‍🔥

Johannes — Mon, 28 Aug 2023 10:33:37 +0000

Did you know that in app surveys have a whopping 6-10x better conversion rate compared to those boring email surveys? If you're eager to know how you can set one up in your web app in a breezy 10-15 minutes, just read on...

TL;DR

I'll show you how you can display any in app survey in your web app with Formbricks (open source). It'll allow you to add a Feedback Box, invite users to interviews, measure feature satisfaction and muuuuuch more 🤍

Look at all of them possibilities with Formbricks

Formbricks: Open-source Forms and Surveys 🤸

A word about us before we dive in: Formbricks helps you understand how users like your product or service. It helps you ask the right people the right questions to build the most user-friendly product possible. The best part? It"s open-source, pls support us with a ⭐

4 simple steps

Let's dive right in. This is what we'll be doing:

Create a free Formbricks Cloud account
Create your first survey
Set up the Formbricks Widget in your app
Restart your app and enjoy your brand new in app survey

1. Grab a Formbricks Cloud Account - it's free

You can totally self-host Formbricks if you're into that, but if you're chasing speed, the cloud is your best friend. Just sign up here and breeze through the onboarding steps until you're here:

2. Craft Your First Survey 🛠️

Okay, let's make a survey! Hop into one of the templates, and then swing by the survey settings:

There's a little note in orange that's telling us we haven't connected with our app yet. No sweat, we'll get to that! First, let's set our survey right.

For the "How to ask" setting, make sure you pick "Web App":

Now, wander down to the "Survey Trigger" section and choose "New Session". This means that on every new user session this survey will pop:

In "Recontact Options", set it up in a way that suits your taste. By default, a survey only nudges a user once. For testing, it makes sense to display the survey until a response was provided (or even all the time, ignoring the waiting period):

Once you're happy, slam that Publish button!

You'll be escorted to the Summary Page, which is your magical place for all survey responses. From there, head over to the Setup Checklist:

3. Unleash the Formbricks Widget 🧙

Now on the Setup Checklist, you'll notice a couple of things. First up, there's the Widget Status Indicator. When your app and Formbricks Cloud do their special handshake, this will light up green:

The manual's got a code snippet which has:

Your unique Environment ID for Formbricks
The API Host which is, for us Cloud folks, ‘https://app.formbricks.com’

Let's Bring Formbricks to Life in Your App!

Now, depending on what tech stack you're using for your frontend, the process varies slightly. Here are some guides:

4. Revive Your App & Spy on the Console 👀

Restart your app and then pop open your browser console. If all's gone to plan, you should spot your survey sitting in the bottom right corner:

Annnd that should be it!

👏 Congrats, you did it! 🚀

Debugging Support - 'Cause Sometimes Things Get Wonky 🐛

If your survey's playing hide-and-seek, don't sweat. Here's a mini cheat sheet to help you:

Connectivity Issues

Swing back to app.formbricks.com and check the Setup Checklist. If it's singing the "Not connected" blues, your app hasn't pinged Formbricks Cloud yet.

The Fix: Double-check your widget's heartbeat in your browser console. For that make sure that debug: true mode is enabled in the Formbricks embedding. If things look off, we've got your back over at our Discord.

Survey not loaded

Your app's talks with Formbricks Cloud, but the widget did not load your survey.

The Fix: Confirm your survey is not a draft anymore and set to "in progress" in Formbricks Cloud's Survey Summary page.

Survey's Being Shy

Your survey's there, but it's just not being triggered:

The Fix:

Try opening your app incognito-style. Remember, the New Session action is only fired after 60 minutes of user inactivity or if a user gets logged out via formbricks.logout().
See if “Event ‘New Session” is being tracked in the logs. If it's all good but the survey's still hiding, give us a shout at our Discord 👇

Still stuck? No worries! Drop by our Discord and we'll jam together until we get it right. 🤘

Let's look back and learn

Today we've learned how to:

Connect Formbricks with your app
Create an in app survey
Display it in your app
Send the data to the analysis backend

From now on, the world of in app surveys is yours!

Check out these best practices for inspiration:

Comment for which you'd like the next tutorial!

To help us keep these articles coming, drop us a twinkelin' ⭐

Thank you for reading!
Johannes