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 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=""></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",
hasLoadedWidget.current = true;
}, []);

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

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

export default App;