Steps to Implement in a React.js Website

From the widget configuration page, copy the embed script provided for React.js. This will be a URL that points to a JavaScript file, often accompanied by a script tag (similar to the one you’ve written in your example).

Install the Code in Your React Component

Create a new React component where you want to display the widget.

Inside the component, use the useEffect hook to dynamically load the widget script after the component mounts.

Replace "WIDGET_SRC_URL" with the actual URL of the widget script provided in your widget settings.

The script will load the widget into the div with the id cooperhire-widget (<div id="cooperhire-widget"></div>). Ensure this matches the data-mount-in attribute of the script to ensure the widget is rendered in the correct place on your page.

Use the Component in Your App

Once the component is set up, you can use the Embed component in any of your React pages or components where you want the widget to appear.

Example:

Run your React application (npm start or yarn start).

Navigate to the page where you embedded the widget.

Confirm that the widget is rendered correctly and behaves as expected.

Steps to Implement in a React.js Website

Install the Code in Your React Component

Customizing the Widget Mount Point

Use the Component in Your App

Test the Widget

Code snippet for integrating with Next.js

Steps to Implement in a React.js Website

Install the Code in Your React Component#

Customizing the Widget Mount Point#

Use the Component in Your App#

Test the Widget#

Code snippet for integrating with Next.js#

Install the Code in Your React Component

Customizing the Widget Mount Point

Use the Component in Your App

Test the Widget

Code snippet for integrating with Next.js