How to Integrate Operator Panel as Widget in CRM/ERP

ConnectiveOne allows embedding the operator panel into CRM/ERP as a widget. This enables conducting dialogues with clients directly from the client card in CRM without leaving the system.

When to Use This Integration?

You need to conduct dialogues with clients directly from CRM
You need to view dialogue history with the client in the CRM card
You need to initiate a new dialogue with the client from the CRM card
You need to see all dialogues with all clients without leaving CRM

Prerequisites

For Integration in Client/Deal Card

Active CRM account (email) that matches the active account in ConnectiveOne for each operator
Client phone number or other channel identifier pulled into the contact/deal/task card — used for client search

For Full Operator Panel Functionality Integration

Active CRM account (email) that matches the active account in ConnectiveOne for each operator

How Does It Work?

A link with parameters for automatic authorization in ConnectiveOne is formed. This link is used as URL for forming an iframe widget.

Integration in Client/Deal Card

Link Parameters

Required parameters:

user — email (login) under which authorization occurs
redirect_module — automatic redirect to the needed page (for example, OperatorPanelChats will redirect immediately to the Chats page)
init_dialog — client phone number
init_dialog_bot_id — bot ID through which correspondence will go
init_dialog_channel — channel through which correspondence will go
login_key — authorization key for autologin

Additional parameters:

hide_nav — if you need to hide access to menu and Header
Language is passed as the first parameter en, uk, etc.

Example link:

https://instancename.connectiveone.io/autologin?en&user=email&login_key=#somkeyhere&redirect_module=OperatorPanelChats&hide_nav=1&init_dialog=380123456789&init_dialog_channel=whatsapp&init_dialog_bot_id=1

🚨 Important: Do not publicize these parameters and the link itself without extreme necessity.

Creating Dialogue

Case 1: If dialogues with such client are found:

The first dialogue from the found list is taken along with this dialogue's channel
Checked in Agent by Dialogue List if there is a chat with such Client
- If such dialogue is found — Agent connects to this dialogue
- If such dialogue is not found — a new dialogue is created with Agent connection to it

Case 2: If Client is not found:

Using the init_dialog_channel parameter, check if Bots with such channel are connected in the System
If such Bots exist, create a New Dialogue and connect Agent to the dialogue

👉 Note: If init_dialog_bot_id is not specified, the first BotID with the corresponding channel is taken.

To pass parameters from the client card and check the possibility of initiating dialogue, you will need JS (JavaScript) widget code.

Example for Zoho CRM:

<html>
<script>
document.addEventListener('DOMContentLoaded', function(){
  let src = 'https://instance.connectiveone.io/autologin?en&user=email&login_key=#somkeyhere&redirect_module=OperatorPanelChats&hide_nav=1&init_dialog=380123456789&init_dialog_channel=whatsapp&init_dialog_bot_id=1';

  function createFrame() {
    let frame = document.createElement("iframe");
    frame.setAttribute("src", src);
    frame.setAttribute("name", "ConnectiveOne");
    frame.setAttribute("id", "frame");
    frame.frameBorder = 0;
    frame.width = 100 + "%";
    frame.height = 700 + "px";
    document.getElementById("iframeHolder").appendChild(frame);
  }

  createFrame();
})
</script>
<body>
  <div id="iframeHolder"></div>
</body>
</html>

📖 Documentation: For Zoho CRM, see Widgets Overview | Online Help - Zoho CRM.

Attribute Purpose

src: URL that points to the content source for iframe (URL with authorization parameters)
name: iframe name is set as "ConnectiveOne"
id: iframe identifier is set as "frame"
frameBorder: Removed iframe border for a cleaner look
width and height: iframe width is set to full page width (100%), and height is fixed at 700px

Full Operator Panel Functionality Integration

For full functionality integration, you only need to specify:

user — email (login) under which authorization occurs
redirect_module — automatic redirect to the needed page (for example, OperatorPanelChats)

Additional parameters:

hide_nav — if you need to hide access to menu and Header
Language is passed as the first parameter en, uk, etc.

Example link:

https://instancename.connectiveone.io/autologin?en&user=email&login_key=#somkeyhere&redirect_module=OperatorPanelChats&hide_nav=1

🚨 Important: Do not publicize these parameters and the link itself without extreme necessity.

Security

Links with authorization parameters should be protected
It is recommended to use HTTPS for all requests
login_key should be generated in a secure way
Do not share login_key in logs or public places

Limitations

Operator email must match in CRM and ConnectiveOne
Client phone number is required to initiate dialogue
Iframe may have limitations due to CORS policy
Some CRMs may have limitations on iframe size