Diabolocom React

Enterprise grade, production ready integration for your CRM

This is a commercial, third-party package. Diabolocom is not involved in this package in any way.

Integrate Diabolocom into your CRM in matter or hours instead of weeks. All the hard work has been done in order to provide a simple, easy to use API.

This is a React solution. If you don't work with React, you may want to look at diabolocom-js

This is a demo version

The sole purpose of the demo version is to show you how easy it is to integrate diabolocom with your solution. For the full-featured version, get your license today.

Table of contents

• Diabolocom React
  • Table of contents
  • Trigger actions in real time
  • Programmatic actions
  • Multi-Tabs support
    • Leadership management
      • Request leadership
      • Transfer the leadership
      • Automatic release
  • Amazing TypeScript support
  • Requirements
  • Browsers support
  • Get your license
  • Frequently Asked Questions _ How easy is it to integrate Diabolocom with your solution? _ I am a developer myself, why would I need this package? _ My company have developers, why should I buy this package instead of asking them to do it? _ How much does it cost?

Getting started

<DiabolocomProvider
  ctiOrigin={'https://[PLATFORM].engage.diabolocom.com'} // Replace [PLATFORM] with your actual one (ie.: fr2)
  iframeName={'diabolocom-cti-iframe'} // Make sure this matches the actual html property `name`, of your iframe
>
  <App />
</DiabolocomProvider>

Trigger actions in real time

Do you want to automatically open the customer file when the phone rings ? Or bring up a form when the conversation ends ?
The complexity of the events send by the CTI has been reduced to an understandable, business oriented model.

const {
  agentInfo: { customFields },
} = useDiabolocom();

useEffect(() => {
  if (customFields.customer_id && document.hasFocus()) {
    // Open customer's file
  }
}, [agentInfo]);

Programmatic actions

Trigger actions like dialing a number or making an agent-to-agent call.

// Call a customer
const { dialNumber } = useDiabolocom();
return <button onClick={() => dialNumber(customer.phoneNumber)}>Call Customer</button>;

// Call an agent
const { callAgent } = useDiabolocom();
return <button onClick={() => callAgent(agent.username)}>Call Awesome Coworker</button>;

Multi-Tabs support

Open as many tabs as you want.

Did you know you can only have one CTI iframe active at the same time ?
What if your agents click to make a call but they are not on the page that has the iframe ?
The events sent by the CTI are only received by the page with the active iframe, how do you deal with that ?

This package makes all the magic happen.

Also, you probably want to be able to move the iframe form one tab to another. To perform that action without any trouble, we introduce the notion of leadership.

Leadership management

The tab that has the leadership is the one who can communicate with the iframe. Because only one iframe can be active, only one leader can exists.

Using our hook, you can easily acquired or release the leadership.

const {
  requestLeaderhip, // Take leadership when available
  stealLeadership, // Steal leadership away from the current leader
  releaseLeadership, // Let go the leadership so a leadership request can be fulfilled
} = useDiabolocom();

Request leadership

When you open a tab of your CRM, you want to give it the leadership if none already has it.
This is automatically done by our DiabolocomProvider.

Transfer the leadership

If you don't need the leadership anymore, you can release it. One of the tabs with a pending leadership request will automatically become the leader.

If you want to add a button to transfer the iframe to the current tab, you can steal the leadership. The current leader will be forced to released it.

const { isLeader, stealLeadership } = useDiabolocom();
return (
  <>
    {isLeader && <iframe name={'diabolocom-cti-iframe'}></iframe>}

    <div>
      <button onClick={() => stealLeadership()} disabled={!isLeader}>
        Show iframe
      </button>
    </div>
  </>
);

Automatic release

When a tab is closed, the leadership will automatically be released if held. The same goes if a tab becomes suspended by the browser for resources optimization.

Amazing TypeScript support

Your subscriptions will received fully typed messages.
The types are better are more accurate than the official documentation !

Amazing developer experience with strict types and discriminated union types.
Take a look at this example :

const MyComponent = () => {
  const { agentInfo } = useDiabolocom();

  if (agentInfo.authenticated) {
    /* 
    type AgentInfo = {
      authenticated: true;
      previousStatus?: AgentStatus;
      status: AgentStatus;
      sessionStart: Date;
      userId: number;
    } 
    */

    return;
  }

  /* agentInfo.authenticated is now asserted to `false`, leaving us to the following : 
  
  type AgentInfo = {
      // Logged in then logged out
      authenticated: false;
      previousStatus: AgentStatus;
      sessionStart: Date;
      sessionEnd: Date;
      userId: number;
  } | {
      // Never logged in
      authenticated: false;
  }
  */
  return;
};

When you post a message to your CTI, it will silently ignore errors. By using this package you benefit from a type check and a runtime check, so you are aware of errors.

const { dialNumber } = useDiabolocom();
dialNumber(undefined); // TypeScript Error
dialNumber('+33undefined'); // Runtime Error

Requirements

This package uses React hooks and therefore requires React 16.8 or above.

Browsers support

We support modern desktop browsers. If you want support for a legacy browser or a mobile version, contact us at [email protected].

| Edge | Firefox | Chrome | Safari | Opera | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Edge 79+ | Firefox 96+ | Chrome 69+ | Safari 15.4+ | Opera 56+ |

Get your license

Send us an email at [email protected] and get a quote the same day.

Frequently Asked Questions

If you don't have the answer to your question, you can reach us at [email protected].

How easy is it to integrate Diabolocom with your solution?

It is extremely easy! All the heavy lifting is done for you so you can immediately focus on the experience of yours agents.

I am a developer myself, why would I need this package?

As developers we often assume that coding ourself is better or cheaper than buying. I bet you think you will integrate Diabolocom in 2-3 days. Most clients I've talk to, spent between 3 and 6 weeks. And the integration was broken or at least flawed, not to mention the features given up along the way. Save your energy. Tell your boss : I have found a commercial package, we will be able to add Diabolocom in one hour. Yes it costs money, but less than the time of doing it ourselves. What do you think?

My company have developers, why should I buy this package instead of asking them to do it?

Because you will save a lot of time and worries.
Integrating Diabolocom, like any CTI solution, takes time and knowledge. You can spend several weeks to integrate the solution yourself, or you buy it on the shelf.

How much does it cost?

You can chose one of our two licensing models: one-time fee, perpetual license or an annual license.
If you are a big company, the one time fee is probably better.
If you are a SMB, both may suit you depending on how committed you are.
If you want to try to add calls to your CRM for the first time, the subscription is very likely to be the best option.