Skip to main content

Building iFrame Integrations with React for x-bees

· One min read
Dimitri Renkas
Dimitri Renkas
Software Engineer
Open in Github

Building iFrame Integrations with React for x-bees

This guide will walk you through the process of building an integration application with x-bees using a template React project. By following these steps, you'll be able to create a seamless integration that communicates with the x-bees platform.

Prerequisites​

Before you begin, ensure that you have the following:

  • Node.js installed on your machine.
  • Yarn package manager.
  • x-bees account with Wildix PBX connection to domain you are admin in
  • An x-bees account with a Wildix PBX connection to the domain you are an administrator in.
  • An administrator account on the Wildix Management System (WMS) with the necessary rights to set up WMS settings.

Quick Start​

x-bees iFrame Integration Template​

To get started quickly, we've provided a template React project that is pre-configured for x-bees integration.
This React + MUI based application template provides minimal setup that enable iFrame integration inside x-bees.

Follow these steps:

  1. Clone the template project from GitHub:
git clone https://github.com/Wildix/iframe-xbees-template-react.git
  1. Navigate to the project directory:
cd iframe-xbees-template-react
  1. Install dependencies:
npm install
  1. Start the development server:
npm start

This will launch the template project, and you can view it in your browser at http://localhost:3000.

See xbees-template Readme as additional installation help source

Integration Setup​

Once you've set up the template project, follow these steps to integrate it with x-bees:

  1. Obtain a URL for your deployed integration. You can use platforms like Netlify or Vercel for deployment.

Info: If you want to integrate your local environment for testing purposes during development, you may need to expose your project URL for x-bees to access. To do this, you can choose one of these variants:

  1. Run on domain locally - see setup
  2. Use NGROK for tunneling - setup ngrok and run ngrok http 5173

Then you can open the x-bees web app and configure x-bees integrations by adding your temporary integration locally

  1. Navigate to your x-bees WMS Settings:
  • PBX -> Integrations -> Cloud Integrations -> iFrame integrations
  1. Click on Add integration and provide the following details:
  • Name: Choose a name for your integration.
  • iFrame URL: Enter the URL of your deployed integration.
  1. Save the integration settings.
info

How to setup x-bees iFrame integration

x-bees Client UI libs​

The template project you've cloned is configured to use two essential libraries for x-bees integration:

  • @wildix/xbees-connect: A JavaScript library for communication and event handling with x-bees.
  • @wildix/xbees-connect-react: A React library providing UI components and hooks for seamless integration.

As you build your application, make sure to utilize these libraries to establish a successful connection and handle events with x-bees.

Next Steps:

Now, you're ready to start building your integration application with x-bees!