react-elfsight-widget

The package provides a component that helps smoothly integrate an Elfsight widget into a React app.

Please note that to use it you need an Elfsight account and a widget created and configured.

Getting Started

Installation

For NPM users:

npm i react-elfsight-widget

For Yarn users:

yarn add react-elfsight-widget

Usage

Due to the complications caused by ongoing migration from the legacy to the modern dashboard, we kindly ask you to choose one of the following implementations depending on your account origin.

If you manage your account and widgets at apps.elfsight.com (legacy):

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

function MyConponent() {
  <ElfsightWidget widgetId={/* replace with a widget id */} lazy />;
}

If you manage your account and widgets at dash.elfsight.com (modern):

If you're new customer who registered after 03 of April, or you've received a migration notice, this option is probably for you.

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

function MyConponent() {
  <ElfsightWidget widgetId={/* replace with a widget id */} lazy modern />;
}

Once your account is migrated to the modern dashboard it won't require any changes to the code.

It's not possible to use two or more widgets originating from different dashboards on the same page.

In case you need any assistance, please contact support.

Props

widgetId

Widget identifier.

Let's take a look at an arbitrary installation code.

<script src="https://static.elfsight.com/platform/platform.js" defer></script>
<div class="elfsight-app-85d18ddb-c202-421e-9a88-6c099d7a7833"></div>

At the second line we can see a div element with a long class name: elfsight-app-85d18ddb-c202-421e-9a88-6c099d7a7833, where 85d18ddb-c202-421e-9a88-6c099d7a7833 is the widget identifier.

So, in order to obtain a widget identifier you need'll to take it's class name and strip elfsight-app- prefix.

lazy

Enables lazy loading. Accepts boolean or string (useful when you want to specify a lazy loading mode). If no mode is specified then a widget will be loaded either once it's in the viewport or after user's first activity.

Modes

first-activity — in this mode a widget will be loaded once a user commits first activity (moves mouse, scrolls page, etc.); appearing in the viewport is ignored.

in-viewport — widget will be loaded once it's in the viewport; users activity is ignored.

modern

Changes widget origin to the modern dashboard. Please consult Usage section for more details.

className and other props and attributes

Also you can pass any prop that standard div element accepts such as className, id, style and others. All these props will be forwarded to a widget container div element.