Wrappers
In-app Pop-overs
The pop-over opens a little survey window with the survey content when the user clicks on a button.
Example
Preparation
The Best Practices come with a default pop-over in the script. We assume that you have already installed one of the Best Practices and configured it. If not, please proceed here:
Implementation
To implement the pop-over, all you have to do is set up a button with the following onClick handler, like so:
<button onclick={(e) => window.formbricks.open(e)}>Feedback</button>
Full Example
Here is a full example file for React.js with TailwindCSS:
import { Button } from "@formbricks/ui";
import { useEffect, useRef, useState } from "react";
declare global {
interface Window {
formbricks: any;
}
}
export function FeedbackButton() {
useEffect(() => {
window.formbricks = {
...window.formbricks,
config: {
formbricksUrl: https://app.formbricks.com",
formId: "abcdefg",
contact: {
name: "Matti",
position: "Co-Founder",
imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
},
},
};
// @ts-ignore
import("@formbricks/feedback");
}, []);
return (
<Button variant="secondary" onClick={(e) => window.formbricks.open(e)}>
Open Feedback
</Button>
);
}
That’s it! 🎉
You’re Best Practice survey should open on button click.