Skip to main content

Web Widget with React

The FluentC Widget is a translation web widget that supports 75 languages, enabling you to provide seamless multilingual capabilities to your website. Installing the FluentC Widget is a simple process that can be done in just a few steps.

Getting Started​

Step 1: Accessing the FluentC Web Widget Dashboard​

To begin, go to the FluentC Widget dashboard at https://dashboard.fluentc.io/widget. This is where you can create a new widget, or manage an existing widget for your website.

Step 2: Installing Web Widget in a React App​

Once your FluentC Widget settings are saved, the install tab will include a code snippet with your unique WIDGET_ID. Copy the code snippet, then paste it into the <head> tag on your public/index.html.

<script src="https://widget.fluentc.io/fluentcWidget.min.js"></script>

Loading Web Widget in React App Example

import React, { useCallback, useEffect, useRef } from "react";
import logo from "./logo.svg";
import "./App.css";

declare var fluentcWidget: any;

function App() {
  const hasLoadedWidget = useRef(false);

  const loadWidget = useCallback(() => {
    if (!hasLoadedWidget.current) {
      const f = new fluentcWidget({
        widgetID: "WIDGET_ID",
      });
      f.setupWidget("fluentc-widget");
      hasLoadedWidget.current = true;
    }
  }, []);

  useEffect(() => {
    loadWidget();
  }, [loadWidget]);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <div id="fluentc-widget"></div>
      </header>
    </div>
  );
}

export default App;