Web Widget
These are instructions on how to embed the Crowdgestions widget into your website.
1. Embed the widget
Add the following code where you'd like to embed the widget, anywhere inside the <body>
tag.
To find your board token, log in and select your product from the dashboard.
<!-- Add this where you want the widget to appear -->
<div data-suggestions></div>
<!-- Add this before closing </body> tag -->
<script>
!(function (w, d, i, s) {
function l() {
if (!d.getElementById(i)) {
var f = d.getElementsByTagName(s)[0],
e = d.createElement(s);
e.type = "text/javascript";
e.async = true;
e.src = "https://www.crowdgestions.com/widget/suggestions-widget.min.js";
f.parentNode.insertBefore(e, f);
}
}
if ("function" != typeof w.Suggestions) {
var c = function () {
c.q = c.q || [];
c.q.push(arguments);
};
c.q = [];
w.Suggestions = c;
if (d.readyState === "complete") {
l();
} else {
w.addEventListener("load", l, false);
}
}
})(window, document, "suggestions-sdk", "script");
Suggestions('render', {
boardToken: 'YOUR_BOARD_TOKEN',
basePath: null, // See step 2
ssoToken: null, // See step 3
theme: 'light', // options: light [default], dark, auto
});
</script>
You should now be able to load the widget. It's that easy! 😃
2. Configure the basePath parameter for URL Syncing
This syncs the URLs inside our widget with your website. For example, if our widget is embedded at yourwebsite.com/feedback then you'd pass in '/feedback'.
Also don't forget to update your routing so that /feedback/* points to the same page.
get "/feedback(/*any)" => "feedback#index", as: :feedback
3. Configure the ssoToken parameter for Single Sign-On
Single Sign-On connects the widget to your existing user accounts. This provides a more seamless experience for your users. It also lets you know exactly who is posting and voting.
Follow our Setup Single Sign-On guide to generate SSO tokens on your server.
This is required if you would like to install the widget with a private board.
Questions?
If you have any questions or issues, email us at support@crowdgestions.com and we'll get back to you ASAP.