How to add Elfsight widget to Gatsby/React App

To add Elfsight widget to Gatsby, you need the installation code. Here is an article that explains where to get it - Where to get Elfsight widget installation code.

Installing a widget to Gatsby/React App

1

Copy your widget's ID
Once you've found the installation code of your widget, you need to select and copy your widget's ID. You can see it on the second line of the code:

For example, here's the ID of the above-mentioned widget:

cfd6efc3-1525-4ff0-9291-7ba6d8680f26

Copy your widget's ID and save it somewhere. We'll need it a bit later.

2

Install the npm package
Open your terminal and paste the following command:

npm install react-elfsight-widget
	

It will install the Elfsight Widget component from the npm repository - https://www.npmjs.com/package/react-elfsight-widget.

3

Import the code
Open the desired component location and paste the following code:

import React from 'react';
import { ElfsightWidget } from 'react-elfsight-widget';

function Component() {
  return <ElfsightWidget widgetID="cfd6efc3-1525-4ff0-9291-7ba6d8680f26" />;
}
	

Make sure to replace the sample widget ID with your own:

Note:

There is no need to manually add Elfsight's platform.js script to a page, the component will do it for you. It's also fine if you already have it on the page, the script won't be added twice.

Done! You have successfully installed the widget to Gatsby.