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>
  );
}