Welcome to the FormTribe

This issue will get you the points mentioned in issue title for the FormTribe Hackathon

Preparation:
If this is your first time contributing, please read:

• Our introductory blog post
• Overview of Code Guidelines at Formbricks.

Only when your PR follows all of the best practices it will get merged.

Want more points quick? Complete Side Quests 🏰

Is your feature request related to a problem? Please describe.

Link previews are not optimized:

Describe the solution you'd like

Leverage next.js dynamic link preview feature for better link previews:

Tasks

• Use nextJS dynamic image generation to create the thumbnail for each survey
• When generating it, make sure that the color of the "Begin" button is set to the brandColor value of the product.
• The "Complete in ~4 Minutes" is static for now, the calculation will be done in a different ticket next week :) We will then update it here, but it shouldn't stop us from shipping 🚢

Technical Details

• Utilize the next/head component to insert these tags into the head of the rendered page. You need to add some meta tags like :

• og:title: Reflecting the survey's name.

• og:description: The "Complete in 4 Minutes"

You can dynamically add these in

apps/web/app/s/[surveyId]/page.tsx

You wont be able to test this on localhost. So you can use something like ngrok .

ngrok grants a public URL, mapped to our local server, perfect for real-time testing. Sharing links via this URL on various platforms can help verify the dynamic generation of our meta tags.

You can test the previews here : https://link-previews.stephanbogner.de/

Please follow this tutorial for more context on how to get it done :)

Thanks!