Skip to main content

Docusaurus Web Widget Plugin

Setup a FluetnC Web Widget on https://dashboard.fluentc.com(Requires Enterprise Plan)

Add the following to your docusaurus.config.js

  plugins: [
function (context, options) {
return {
name: "fluentc-web-widget",
injectHtmlTags() {
return {
headTags: [
{
tagName: "script",
attributes: {
src: "https://widget.fluentc.io/fluentcWidget.min.js",
},
},
// Here we can add the custom script
{
tagName: "script",
innerHTML: `
document.addEventListener("DOMContentLoaded", function () {
f=new fluentcWidget({widgetID: "WIDGET_ID"})
f.setupWidget('fluentc-widget');
});
`,
},
],
preBodyTags: [
// Optionally add the language list to the top of your site or add manually to the index.js page
// {
// tagName: "div",
// attributes: {
// id: "fluentc-widget",
// },
// },
],
};
},
};
},
],

Add the list of languages div to your site index.js

<div id="fluentc-widget"></div>
function HomepageHeader() {
const { siteConfig } = useDocusaurusContext();
return (
<header className={clsx("hero hero--primary", styles.heroBanner)}>
<div className="container">
<h1 className="hero__title">{siteConfig.title}</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className={styles.buttons}>
<Link
className="button button--secondary button--lg"
to="/docs/getting-started"
>
Getting Started
</Link>
</div>
// Add Here
<div>Translate this site using the FluentC Web Widget</div>
<div id="fluentc-widget"></div>
</div>
</header>
);
}