Diabolocom JS

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 of hours instead of weeks. All the hard work has been done in order to provide a simple, easy to use API.

This is a vanilla JS solution. If you work with React, you may want to look at diabolocom-react

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 JS
• Table of contents
  • Trigger actions in real time
    • High level subscriptions
    • Low level subscriptions
  • Programmatic actions
  • Multi-Tabs support
    • Leadership management
      • Request leadership
      • Transfer the leadership
      • Automatic release
      • Act upon leadership changes
  • Amazing TypeScript support
  • 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?

Trigger actions in real time

Do you want to automatically open the customer file when the phone rings ? Or bring a form when the conversation ends ?

High level subscriptions

This is the recommended approach. The complexity of the events send by the CTI has been reduced to an understandable, business oriented model.

diabolocom.onCallInfoChange(({ customFields }) => {
  if (customFields.customer_id && document.hasFocus()) {
    // Open customer's file
  }
});

Low level subscriptions

If you want the fine grained details of all or some events, you can still get it using the following :

diabolocom.subscribe('agentStatusChanged', () => ...);
diabolocom.subscribe('callEnd', () => ...);

Programmatic actions

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

diabolocom.dialNumber('+33011223344');
diabolocom.callAgent('awesome_coworker');

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 user click in your CRM to make a call but he's not on the page that has the iframe ? The events send by the CTI are only received by the page with the active iframe, how do you deal with that ?

This package make the magic happen so you don't have to worry about that. It just works.

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.

Request leadership

When you open a tab of your CRM, you want to give it the leadership if none already has it. This can be done with the following :

await diabolocom.requestLeadership();

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.

await diabolocom.releaseLeadership();

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.

await diabolocom.stealLeadership();

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.

Act upon leadership changes

// Subscribe with a callback
diabolocom.onLeadershipChange(isLeader =>
...)
;

// Or wait for the leadership to be acquired.
await diabolocom.waitForLeadership();

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 :

diabolocom.onAgentInfoChange((agentInfo) => {
  if (agentInfo.authenticated) {
    // type inferred
    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;
      };
});

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.

diabolocom.dialNumber(undefined); // TypeScript Error
diabolocom.dialNumber('+33undefined'); // Runtime Error

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.