Skip to main content

Getting Started

In this tutorial, we will be using bus service which is the entry point to all the interactions that could have with Aircall Ecosystem.

What is bus?​

Bus is an headless, event-based system that allows you to seamlessly use most of the features exposed by Aircall.

It exposes a variety of modules each of which handles a very specific piece of the Aircall Ecosystem (e.g Authentication, Dialing, Agent Availability, etc ...).

You will learn​

  • How to start using bus layer 🚌
  • How to authenticate using Aircall Authentication System 🔐
  • How to start making and receiving calls 🤯

We will use​

This tutorial assumes that you have basic knowledge of React. That being said, you are free to use whatever library or framework that suits your needs, because at the end, bus 🚌 is framework agnostic as it runs inside of an iframe.

Start using bus 🚌​

Bus is a headless app, deployed on https://bus.aircall.io/latest/, the only way to communicate with this app is by using .postMessage() API which enables cross-origin communication between your system and the bus layer.

You don’t need to install anything to play with Bus 🚌. Try editing this sandbox!

import React from 'react';

function App() {
  function handleLoad() {
    // Here you can start interacting with
    console.log('Bus is ready to use 🚌');
  }

  return (
    <>
      {/* You app logic goes here */}
      <iframe src="https://bus.aircall.io/latest/" onLoad={handleLoad} hidden />
    </>
  );
}

export default App;
Open on CodeSandbox

You can edit it directly or open it in a new tab by pressing the “Fork” button in the upper right corner.

Throughout this tutorial will be using this sandbox as a playground to test our code.

Going back to the code, we are using an iframe to load the bus layer, and we are listening to the onLoad event to know when the bus layer is ready to use, you notice the console log in the terminal.

Once the load method, we can then dispatch BUS.REGISTER event and wait for bus response.

import * as React from 'react';

import { BusProvider, useBus } from './BusProvider';

function Home() {
  const { state } = useBus();

  return <div>Bus state: {state}</div>;
}

function App() {
  return (
    <BusProvider>
      <Home />
    </BusProvider>
  );
}

export default App;
Open on CodeSandbox