New
New
New
Component
Native Feedback Widget in Framer
This is a feedback widget born from the classic "I can't afford this" moment. When I realized Helpscout wanted $25/month for a little feedback widget on my site, I chose the path of the true Framer expert: building it myself for free. No code, no external tools, just pure native Framer magic.
Created by
About the resource
First off, I wanna mention that I documented my whole process of creating this component in Framer from scratch. If you're interested in that, check out the video above.
Now, let's see how you can use this component if you decide to just copy and paste it into your project.
Positioning
To make sure the component floats above the main content of the website, I wrapped it in a frame named Height:100dvh. I named it like this because I add a code override to it, which adjusts the frame's height based on its name. In our case, Height:100dvh means the frame will always take up 100% of the given viewport height. (Click here to read more about this solution and find the code override.)
This Height:100dvh frame is set to fixed positioning and pinned to the top, left, and right with zero values.
About the resource
First off, I wanna mention that I documented my whole process of creating this component in Framer from scratch. If you're interested in that, check out the video above.
Now, let's see how you can use this component if you decide to just copy and paste it into your project.
Positioning
To make sure the component floats above the main content of the website, I wrapped it in a frame named Height:100dvh. I named it like this because I add a code override to it, which adjusts the frame's height based on its name. In our case, Height:100dvh means the frame will always take up 100% of the given viewport height. (Click here to read more about this solution and find the code override.)
This Height:100dvh frame is set to fixed positioning and pinned to the top, left, and right with zero values.
About the resource
First off, I wanna mention that I documented my whole process of creating this component in Framer from scratch. If you're interested in that, check out the video above.
Now, let's see how you can use this component if you decide to just copy and paste it into your project.
Positioning
To make sure the component floats above the main content of the website, I wrapped it in a frame named Height:100dvh. I named it like this because I add a code override to it, which adjusts the frame's height based on its name. In our case, Height:100dvh means the frame will always take up 100% of the given viewport height. (Click here to read more about this solution and find the code override.)
This Height:100dvh frame is set to fixed positioning and pinned to the top, left, and right with zero values.
The positioning of the component's wrapper frame.
The positioning of the component's wrapper frame.
The positioning of the component's wrapper frame.
As you can see in the image above, the widget component is placed inside the Height:100dvh frame. It's got absolute positioning, using right and bottom pins with 24 values to stick it in the bottom right corner.
Quick tip: To make sure you can still interact with layers underneath the 100dvh frame, add "pointer events: none" to it, and also set its z-index to 10 so it's above everything else. Then, select the component inside and add "pointer events: auto" to that. This way, you can only interact with the widget inside the 100dvh frame.
As you can see in the image above, the widget component is placed inside the Height:100dvh frame. It's got absolute positioning, using right and bottom pins with 24 values to stick it in the bottom right corner.
Quick tip: To make sure you can still interact with layers underneath the 100dvh frame, add "pointer events: none" to it, and also set its z-index to 10 so it's above everything else. Then, select the component inside and add "pointer events: auto" to that. This way, you can only interact with the widget inside the 100dvh frame.
As you can see in the image above, the widget component is placed inside the Height:100dvh frame. It's got absolute positioning, using right and bottom pins with 24 values to stick it in the bottom right corner.
Quick tip: To make sure you can still interact with layers underneath the 100dvh frame, add "pointer events: none" to it, and also set its z-index to 10 so it's above everything else. Then, select the component inside and add "pointer events: auto" to that. This way, you can only interact with the widget inside the 100dvh frame.
The positioning of the component layer.
The positioning of the component layer.
The positioning of the component layer.
Form setup
You'll also have some work to do with the component itself to make sure it's sending submissions straight to your inbox.
First off, you need to double-click on the component and then click "unlink & replace all."
Form setup
You'll also have some work to do with the component itself to make sure it's sending submissions straight to your inbox.
First off, you need to double-click on the component and then click "unlink & replace all."
Form setup
You'll also have some work to do with the component itself to make sure it's sending submissions straight to your inbox.
First off, you need to double-click on the component and then click "unlink & replace all."
Unlinking the widget component.
Unlinking the widget component.
Unlinking the widget component.
Once you're inside the widget component, you need to locate the "Feedback Form Component" and double click into that as well to unlink it.
Once you're inside the widget component, you need to locate the "Feedback Form Component" and double click into that as well to unlink it.
Once you're inside the widget component, you need to locate the "Feedback Form Component" and double click into that as well to unlink it.
Unlinking the form component.
Unlinking the form component.
Unlinking the form component.
Now we're finally at the right level of our component. You can select the primary variant of this "Feedback Form Component," then head over to the right panel, and set up the "send to" property of the form. Make sure to type in your email or connect it to Google Sheets.
Now we're finally at the right level of our component. You can select the primary variant of this "Feedback Form Component," then head over to the right panel, and set up the "send to" property of the form. Make sure to type in your email or connect it to Google Sheets.
Now we're finally at the right level of our component. You can select the primary variant of this "Feedback Form Component," then head over to the right panel, and set up the "send to" property of the form. Make sure to type in your email or connect it to Google Sheets.
Setting up the "send to" property of the form.
Setting up the "send to" property of the form.
Setting up the "send to" property of the form.
Once you're done with this, you're all set. You can publish your site and start using the widget.
Don't forget, if you didn't get something, you can always remix the project file of this resource to see how everything's set up. Hope y'all like this. :)
Once you're done with this, you're all set. You can publish your site and start using the widget.
Don't forget, if you didn't get something, you can always remix the project file of this resource to see how everything's set up. Hope y'all like this. :)
Once you're done with this, you're all set. You can publish your site and start using the widget.
Don't forget, if you didn't get something, you can always remix the project file of this resource to see how everything's set up. Hope y'all like this. :)
