Skip to main content

How to utilize the xbees-connect Library

The xbees-connect library is an SDK designed to facilitate seamless integration between your application and the x-bees platform. It provides developers with a set of tools to ensure smooth interaction between the integrated UI application and the x-bees environmentenvironment, allowing them to build rich UI. Below is an overview of how to use this SDK.

Step-by-Step Guide to Using the xbees-connect Library:​

xbees-connect Installation​

To install the x-bees-connect Client in your project, use either Yarn or npm. Open your terminal and run one of the following commands in your project directory:

npm install @wildix/xbees-connect

This installs the x-bees-connect package and its dependencies.

Initialization​

Once the package is installed, initialize the x-bees-connect Client in your application. Import the library and create an instance of the client as follows:

import Client from "@wildix/xbees-connect";

const xbees = Client.getInstance();

xbees.ready();

console.log(xbees.version());
console.log(Client.getInstance().version());

Info: It is not necessary to create a variable, because Client.getInstance() returns the same value.

The Client instance provides you a set of functions to interact with the x-bees.

Necessary Consent with x-bees: Before interacting with the x-bees, it is important to ensure that your application identify itself with xbees.ready() call.

Continue exploring the API Reference to understand the available functions and methods provided by the SDK.

xbees-connect-react Installation​

Install the package in your project directory with:

npm install @wildix/xbees-connect-react

This component has the following peer dependencies that you will need to install as well.

{
 "peerDependencies": {
   "@mui/material": "^5.14.16",
   "react": "^18.2.0",
   "react-dom": "^18.2.0"
 }
}

xbees-connect-react Usage​

import { useThemeEffect, useViewPortEffect } from '@wildix/xbees-connect-react';

const AppUi = () => {
  const theme = useThemeEffect();

  useViewPortEffect();

  return (
    <div className="container">
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div />
      </ThemeProvider>
    </div>
  );
};

onSuggestContacts: ((query: string, resolve: Resolve, reject: Reject) => void) => RemoveEventListener​

Starts listen for the events of searching contacts and handle autosuggestion with the provided callback */

Client.getInstance().onSuggestContacts(async (query, resolve) => {
    try {
        const contacts = await fetchContacts(query);
        resolve(contacts);
    } catch (error) {
        console.log('catch', error);
    }
});

onLookupAndMatchContact: ((query: ContactQuery, resolve: Resolve, reject: Reject) => void) => RemoveEventListener​

Starts listen for the events of searching contact info and handle match with the provided callback

Client.getInstance().onLookupAndMatchContact(async (query, resolve) => {
    try {
        const contact = await fetchContactAndMatch(query);
        resolve(contact);
    } catch (error) {
        console.log('catch', error);
    }
});

Context​

getContext(): Promise<Response>​

Retrieves current x-bees context data. The data may be different depending on context.

getCurrentContact(): Promise<Response>​

Retrieves contact data currently opened in x-bees.

getCurrentConversation(): Promise<Response>​

Retrieves conversation data (id, type) currently opened in x-bees. If the conversation is temporary - retrieves undefined