@pexip-engage-public/plugin-react

@pexip-engage-public/plugin-react

Wrapper around the Pexip Engage Plugin, to integrate it more conveniently inside React Applications.

Warning: This is a pure ESM package

There are 2 exports:

• <PexipEngagePlugin {...configuration} />: React Component that renders the plugin inside a div. You can pass plugin options to it. className, id & style are passed through to the underlying div element.

• <PexipEngagePluginProvider value={configuration}>: This is a React Context Provider, that allows you to set certain default values. The interface is the same as the configuration prop.

  This component is not required, but can be useful to populate some shared configuration for each plugin instance, eg:

const defaultConfig = {
  scriptSrc: "https://plugin.pexipengage.com/{ENTERPRISE_NAME}/pexip-engage-plugin.js",
  language: "nl-be",
  flow: "SMOETQC",
  customer: { timeZone: "Europe/Brussels" },
  meetingTypes: "VIDEO",
  office: { ids: "1" }
};

function App() {
  return (
    <PexipEngagePluginProvider value={defaultConfig}>
      {/* All <PexipEngagePlugin /> components will now merge their own passed configuration with the defaultConfig value */}
      <PexipEngagePlugin subject={{ ids: "1" }}>
    </PexipEngagePluginProvider>
  );
}

The PexipEngagePlugin reads the current context value, and merges it with its own passed props.

Required props:

• scriptSrc: The plugin entry point URL. eg: https://plugin.pexipengage.com/{ENTERPRISE_NAME}/pexip-engage-plugin.js