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>
    </>
  );
};