How do I add ConveyThis to a React app?

ConveyThis translates a React app with one script tag. You add it once to your public/index.html (or index.html in the project root if you use Vite), and every page and view of your app is translated.

Step 1. Add your website in ConveyThis

1. Log in to your ConveyThis dashboard and click Add Domain. No account yet? Create one for free.
2. Under Website platform, choose Other (Javascript) and click Next.
3. Enter the domain where your app is published (for example example.com), its current language and the Languages to translate into. Click Next.
4. Choose how the addresses of your translated pages look, or keep the default, and click Next.
5. On the Install step, click Copy next to the code.

Step 2. Add the code to your app

Paste the code into public/index.html (or index.html in the project root if you use Vite), just before the closing </body> tag:

<body>
  <div id="root"></div>
  <!-- ConveyThis Script Start -->
  <script src="//cdn.conveythis.com/javascript/conveythis.js?api_key=YOUR_API_KEY"></script>
  <!-- ConveyThis Script End -->
</body>

Use the code from your dashboard: it already contains your API key. Then build and deploy your app as usual.

Step 3. Check that it works

1. Go back to the ConveyThis setup and click Check my site now.
2. Open your app. The language switcher appears in the bottom right corner. Choose a language and move between a few views to see them translated.

Good to know

• Content that changes without a page reload (new views, data loaded from your API) is translated when Allows the translation of dynamic content is on. Find it in Domains, the Settings menu on your website, under Advanced.
• Text you don’t want translated, such as user names or code, can be excluded. See Exclude pages and elements from translation.
• Testing on your own computer? See Can I use ConveyThis on localhost?
• To place the switcher inside your own menu, see Change the switcher position.