react-use-neeto-widget

A React integration of neeto widgets powered by hooks.

Installation

yarn add @bigbinary/react-use-neeto-widget

API

• NeetoWidgetProvider
• initializeNeetoWidget
• useNeetoWidget

NeetoWidgetProvider

Place the NeetoWidgetProvider as high as possible in your application. This will make sure you can call useNeetoWidget anywhere.

Example

import { NeetoWidgetProvider } from "@bigbinary/react-use-neeto-widget";

const App = () => {
  return (
    <NeetoWidgetProvider>
      <p>Hi there, I am a child of the NeetoWidgetProvider</p>
    </NeetoWidgetProvider>
  );
};

initializeNeetoWidget

The initializeNeetoWidget method is used to initialize the global widget instance. It requires a valid API key to embed the widgets. It accepts API key (required) and widget configurations (optional) as parameters.

Widget configurations in neetoChat

| name | type | description | | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | visibleOnMount | boolean | The default value is true. If not set to false, there's no need to explicitly call the showWidget method, as the widget will be automatically set to the visible state after initialization. If the value is false, the widget will not be visible on initializing. You have to explicitly call the showWidget method.|

Example

import { initializeNeetoWidget } from "@bigbinary/react-use-neeto-widget";

const NEETO_WIDGET_API_KEY = "your-neeto-widget-api-key";

useEffect(() => {
  initializeNeetoWidget(NEETO_WIDGET_API_KEY, {
    neetoChat: {
      visibleOnMount: false,
    },
  });
}, []);

useNeetoWidget

useNeetoWidget hook is used to retrieve all methods bundled with neeto widgets.

Make sure NeetoWidgetProvider is wrapped around your component when calling useNeetoWidget().

Remark - You can't use useNeetoWidget() in the same component where NeetoWidgetProvider is initialized.

Currently, we expose the following methods to interact with neetoChat widget. More methods will be added in future.

API

neetoChat

| name | description | | ----------------- | ----------------------------------------------------------- | | showWidget | Shows the Messenger | | hideWidget | Hides the Messenger | | maximizeWidget | Maximizes the Messenger | | minimizeWidget | Minimizes the Messenger | | isWidgetShown | Returns a boolean whether the Messenger is visible or not | | isWidgetMaximized | Returns a boolean whether the Messenger is maximized or not |

Example

import React from "react";

import {
  NeetoWidgetProvider,
  useNeetoWidget,
  initializeNeetoWidget,
} from "@bigbinary/react-use-neeto-widget";

const App = () => (
  <NeetoWidgetProvider>
    <HomePage />
  </NeetoWidgetProvider>
);

const HomePage = () => {
  const { neetoChat } = useNeetoWidget();
  const {
    showWidget,
    hideWidget,
    maximizeWidget,
    minimizeWidget,
    isWidgetShown,
    isWidgetMaximized
  } = neetoChat;

  const NEETO_WIDGET_API_KEY = "your-neeto-widget-api-key";

  useEffect(() => {
    initializeNeetoWidget(NEETO_WIDGET_API_KEY);
  }, []);

  return (
    <>
      <button onClick={showWidget}>Show messenger</button>
      <button onClick={hideWidget}>Hide messenger</button>
      <button onClick={maximizeWidget}>Maximize messenger</button>
      <button onClick={minimizeWidget}>Minimize messenger</button>
      <button onClick={() => {alert("Is messenger visible? -> ", isWidgetShown)}}>
        Is messenger visible?
      </button>
      <button onClick={() => {alert("Is messenger maximized? -> ", isWidgetMaximized)}}>
        Is messenger maximized?
      </button>
    </>
  );
};

Local development instructions

To test the changes in an application locally, follow the below steps. Let's test with the staging build of neetoChatWidget.

1. Update the value of the property PUBLIC_PATH in .env.staging of neetoChatWidget to point to the dist folder of the same project. You can also remove the HONEYBADGER_API_KEY from the .env.staging file and comment out the HoneybadgerPlugin initialization logic from webpack.prod.js file temporarily.

   eg: http://127.0.0.1:5500/dist/. You can use extensions like Live Server to spin up a server from VSCode in neetoChatWidget and get the URL.

2. Run yarn build-staging to build the staging version of neetoChatWidget.

3. Update the CHAT_WIDGET_SRC property in the .env.staging file of neeto-base-widget to the build output of the neetoChatWidget and comment out the gzipPlugin from the plugins list in the rollup.config.js file.

   eg: http://127.0.0.1:5500/dist/neeto-widget-chat.js.

4. Run the command yarn build-staging in the neeto-base-widget.

5. Start a server as mentioned above in the neeto-base-widget and obtain the URL to the dist folder.

6. Set the value of NEETO_BASE_WIDGET_SRC in src/constants.js of react-use-neeto-widget pointing to the server serving the neeto-base-widget dist folder. eg: http://127.0.0.1:5501/dist/neeto-widget-staging.js

7. Run the command yarn bundle in the react-use-neeto-widget and then run yalc publish.

8. Add the package to the application you want to test using the command yalc add @bigbinary/react-use-neeto-widget.