@bigbinary/react-use-neeto-widget v1.0.5

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

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

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