Learn how to set up the All-In-One widget.
Written By Bruno from Featurebase
Last updated 6 days ago
This is our more feature-packed widget that serves a similar purpose as the public feedback portal, but in a more compact format that you can embed on your site.
It supports all the Featurebase modules:
Feedback submission and collaboration
Public Roadmap
Changelogs
Help Center
Each module can be used independently by turning other modules off.
Installing
The widget can be installed using our JavaScript SDK.
Example<!-- Importing the Featurebase SDK -->
<script>!(function(e,t){const a="featurebase-sdk";function n(){if(!t.getElementById(a)){var e=t.createElement("script");(e.id=a),(e.src="https://do.featurebase.app/js/sdk.js"),t.getElementsByTagName("script")[0].parentNode.insertBefore(e,t.getElementsByTagName("script")[0])}}"function"!=typeof e.Featurebase&&(e.Featurebase=function(){(e.Featurebase.q=e.Featurebase.q||[]).push(arguments)}),"complete"===t.readyState||"interactive"===t.readyState?n():t.addEventListener("DOMContentLoaded",n)})(window,document);</script>
<script>
Featurebase("initialize_portal_widget", {
organization: 'yourorg', // Replace this with your organization name, copy-paste the subdomain part from your Featurebase workspace url (e.g. https://*yourorg*.featurebase.app)
placement: 'right', // optional
fullScreen: false, // optional
initialPage: 'MainView', // optional (MainView, RoadmapView, CreatePost, PostsView, ChangelogView)
locale: "en", // Change the language, view all available languages from https://help.featurebase.app/en/articles/8879098-using-featurebase-in-my-language
metadata: null // Attach session-specific metadata to feedback. Refer to the advanced section for the details: https://help.featurebase.app/en/articles/3774671-advanced#7k8iriyap66
});
</script>Authentication
If you’ve set up the
or , the user will be automatically authenticated inside the widget.Opening the widget
Use a default floating button
If you added the placement value at the widget initialization, there will automatically be a small emoji button hovering on the right or left side of your site for users to leave feedback.
Manually opening
If you wish to control the opening of the widget yourself and hide the floating button, you can do so by doing the steps below:
Add data-featurebase-feedback-portal attribute to a button on your website and the widget will open when the button is clicked.
<button data-featurebase-feedback-portal>
Open Widget
</button>You can also call the Featurebase instance directly to open the widget.
window.postMessage({
target: 'FeaturebaseWidget',
data: {
action: 'changePage',
payload: 'MainView', // MainView, RoadmapView, CreatePost, PostsView, ChangelogView
openWidget: true
},
})