Skip to content

[FEATURE][500 Points] Better Embedding of Link Surveys #687

@jobenjada

Description

@jobenjada

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

Currently, the embedding experience of link surveys is quite limited. Many users requested to have multiple ways to embed surveys in websites as well as emails.

Describe the solution you'd like

Prepare code snippets for full page, pop up and slide in embeds of Formbricks Surveys.

Prepare code snippets to embed the first question in an email incl. link prefilling.

Describe alternatives you've considered

No response

Additional context

Aryan from our community designed the new embedding experience, here is the file:

https://www.figma.com/file/6gtywfMneiONru4A5egbwi/Embedding-Experience?type=design&node-id=82%3A829&mode=design&t=u4mR2uMbw8StAm6U-1

1. Share Survey Link
image

This is pretty straightforward: Render a preview of the survey in the Preview field and the rest should be self-explanatory :)

2. Embed in an Email
Screenshot 2023-08-14 at 09 52 21

On a high level, your task is to build a question embed in plain HTML so that it can be copied and pasted into SendGrid, Mailchimp, etc to increase the conversion rate of emailed out surveys. Here is a breakdown:

  • React Email: Generally, we plan to move to React Email and this is our first implementation of it (will move all other email communication to it down the line). This makes building the UI of the embed a lot easier.
  • UI: Rebuild the UI of the different question types with React Email for the types: NPS, Rating (stars, smileys, numbers), Single Select and Multi Select. For the other question types it doesnt make sense to do prefilling, here we only need a simple UI with the question, description (if set in the survey) and a CTA button in brand colors.
  • Prefilling: Automatically wire the UI up with the correct link prefilling URLs
  • Styling: In this first iteration there will be no further styling except for the brand color set in the Product Settings. Ideally, set it up in a way that the question embed

3. Embed in Website
In the mockups you see that we will support different ways to embed the survey in a website. To keep this PR at a senseful scope, please only build the UI and add the current embedding code to it:

Screenshot 2023-08-14 at 10 06 51

We don't need: Previews of different embeds, the toggle between different previews, the switch between the previews and the embed code.

As always, pls ask clarifying questions in Discord.

Thanks a lot for picking this up! It'll help Formbricks reach more and more people with a great and free link survey experience :)

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions