@bigbinary/react-use-neeto-widget

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