Wrappers
Inline surveys
An inline survey is natively embedded into your user interface.
No UI provided
Since this is highly dependent on your frontend stack, we do not yet provide any UI components. We explain how you can fill a <div>
in your UI with the Best Practice content.
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 inject the Best Practice in your inline div, you have to make sure to have set the
containerID
in the config object:
config: {
formbricksUrl: "https://app.formbricks.com",
formId: "cldipcgat0000mn0g31a8pdse",
containerId: "formbricks-survey", // needs to be set
},
- All you have to do then is to set the
id
of your div accordingly:
<div id="formbricks-survey"></div>
At the moment we only support embedding one survey per page. We are working on a solution to support multiple surveys per page.
Full Example
Here is a full example file for React.js using NPM:
import { useEffect } from "react";
export function FeedbackButton() {
useEffect(() => {
window.formbricks = {
...window.formbricks,
config: {
hqUrl: "https://app.formbricks.com",
formId: "abcdefg",
containerId: "formbricks-container",
contact: {
name: "Matti",
position: "Co-Founder",
imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
},
},
};
// @ts-ignore
import("@formbricks/feedback");
}, []);
return <div id="formbricks-container"></div>;
}
That's it ๐
Youโre Best Practice survey will be displayed in your target div when the Best Practice survey is fully loaded.