Rainbow GUI-uitbreidingen maken

U kunt dit artikel gebruiken om Rainbow GUI-uitbreidingen te maken waarmee u knoppen, widgets en ingebedde webapplicaties aan Rainbow kunt toevoegen. U zult zien welke uitbreidingspunten beschikbaar zijn en hoe u de juiste plaatsing voor uw workflow kunt kiezen.

Overzicht

Met GUI-uitbreidingen kunt u aangepaste knoppen, weergavewidgets en ingebedde webapplicaties toevoegen aan de Rainbow-interface. Voor deze uitbreidingen is minimaal een Business-licentie vereist.

Wat u kunt doen met GUI-uitbreidingen:

• Klikbare actieknoppen toevoegen aan contactlijsten, het gesprekslogboek, de communicatiekaart en bubbels
• Aangepaste inhoud (CRM-gegevens, tickets, Rapporten) automatisch weergeven in gesprekspop-ups en contactpanelen
• Een webapplicatie van een derde partij rechtstreeks in het hoofdpaneel van Rainbow insluiten

Soorten uitbreidingspunten

Een uitbreidingspunt (EP) is een benoemde plek in de Rainbow-interface waar een aangepaste actie kan worden gekoppeld. Elk EP heeft een unieke sleutel (bijv. on-contact-list-actions), een vaste plaats in de gebruikersinterface en regels die bepalen welke velden en variabelen beschikbaar zijn. Het custo-manifest definieert één of meer acties onder elke EP-sleutel.

Knoppen — klikbare knoppen

Een pictogramknop wordt op een specifieke locatie in de Rainbow-gebruikersinterface ingevoegd. Bij het klikken wordt een actie uitgevoerd en wordt het resultaat, indien gewenst, weergegeven in een pop-up (Markdown of Adaptive Card). Maximaal 3 knoppen per uitbreidingspunt.

Weergaven — automatische weergave van informatie

Inhoud (Markdown of Adaptive Card) wordt automatisch op een specifieke locatie in de gebruikersinterface ingevoegd — zonder tussenkomst van de gebruiker. De inhoud wordt opgehaald zodra de plaatsing zichtbaar wordt.

Frameweergave — webapplicatie van derden

Sluit een webapplicatie van een derde partij in binnen een Rainbow UI-frame. Met Popup: true wordt de applicatie in een browservenster geopend in plaats van te worden ingesloten.

Een GUI-uitbreiding configureren

Het custo-manifest is een JSON-object met de volgende structuur:

{
"version": "2",
"jsonType": "Rainbow-custo-manifest",
"extension-points": {
"<EXTENSION-POINT-KEY>": [
{
"name": "...",
"icon": "...",
"command": {
"url": "...",
"params": "...",
"commandType": "rest",
"method": "GET"
},
"responseType": "markdown"
}
]
}
}

Algemene regels:

• de versie moet „2“ zijn.
• jsonType moet „Rainbow-custo-manifest” zijn. Binnen een ZIP-bestand geeft dit veld aan welk JSON-bestand het manifest is.
• Elke sleutel onder „extension-points“ is een array — maximaal 3 acties per uitbreidingspunt.
• Elke actie moet een geldig command-object bevatten. 'name' en 'icon' zijn verplicht, afhankelijk van het uitbreidingspunt (zie §3.4).

Actievelden

Het command-object

Het command-object is altijd verplicht en bevat ten minste een url. Afhankelijk van het gekozen commandType zijn aanvullende subvelden toegestaan.

"command": {
"url": "{{server}}/your-endpoint",
"params": "user=${localUser.email}",
"commandType": "rest",
"method": "GET",
"header": ["Authorization: Bearer TOKEN"],
"bodyParameters": { "key": "value" }
}

Rainbow-variabelen

$Variabelen worden tijdens de uitvoering vervangen door hun werkelijke waarde. Ze kunnen voorkomen in command.url, command.params, command.bodyParameters en in de inhoud die ter weergave naar de extensie wordt teruggestuurd.

Syntaxis

${object.attribute}
${object.attribute.regex(pattern)}
${object.attribute.regex(pattern, replacement)}

Beschikbare objecten en attributen

Rainbow-gebruiker (ME)

${localUser.firstName} ${localUser.lastName}
${localUser.email} ${localUser.canonicalNumber}
${localUser.phoneNumber} ${localUser.internalNumber}
${localUser.phonePbx} ${localUser.nickname}
${localUser.loginEmail} ${localUser.id}

Contactpersoon (indien geïdentificeerd)

${contact.voornaam} ${contact.achternaam}
${contact.telefoonnummer} ${contact.e-mail}
${contact.bedrijf} ${contact.werknummer}
${contact.mobielnummer} ${contact.privé-nummer}
${contact.privé-mobiel}
${contact.tags} (aaneengeschakeld, gescheiden door komma's)

Beller (alleen bij EP’s met belknop)

${caller.firstName} ${caller.lastName} ${caller.phoneNumber}

Gebeld (alleen bij EP’s met belknop)

${called.phoneNumber}

Gesprekscontext (alleen voor EP’s met belknop)

${call.callId}
${call.globalCallId} (alleen OXE)
${call.correlator}

Bubbel (alleen voor Bubble-EP’s)

${bubble.ownerEmail} ${bubble.name} ${bubble.shareLink}
${bubble.id}
${bubble.leden} (JSON — uitsluitend bij commandType: "rest")

Compatibiliteit per uitbreidingspunt

regex-modificator

Past een reguliere uitdrukking toe op de waarde van de variabele vóór de vervanging:

// Een getal normaliseren — vervang +33 of +1 door 0
"params": "pbx=${localUser.phonePbx.regex(^\+33|^\+1, 0)}"
// E-maildomein vervangen
"params": "byEmail=${localUser.email.regex(alcatel.com, al-enterprise.com)}"
// De laatste 9 cijfers extraheren (geen vervanging = extractie)
"params": "${contact.phoneNumber.regex(.{0,9}$)}"

Variabele ${time}

Beschikbaar op alle uitbreidingspunten — wordt vervangen op het moment dat de actie wordt uitgevoerd.

Lokale bronnen — ${custo.path}

Om een manifest met lokale bestanden (pictogrammen, statische inhoud) te verspreiden:

1. Verwijs naar elke bron als ${custo.path}\\bestandsnaam.ext
2. Verpak custo-manifest.json en de bronbestanden in een ZIP-bestand (met het manifest in de hoofdmap)

{
"icon": "${custo.path}\\crm.png",
"command": {
"commandType": "file",
"url": "${custo.path}\\content.txt"
},
"responseType": "markdown"
}

Uitbreidingsspecifieke velden

Lokale bronnen opnemen (ZIP-archief)

Indien de actie verwijst naar lokale bestanden (pictogrammen of weergavebestanden), verpakt u het bestand custo-manifest.json samen met deze bestanden in een .zip-archief alvorens het te importeren.

Vereiste ZIP-structuur — het manifest moet zich in de hoofdmap bevinden:

my-manifest.zip
├── custo-manifest.json
├── icon.png
└── display-content.txt

Het manifest implementeren

Zodra het manifest is geconfigureerd, implementeert u het via de Rainbow-beheerconsole of lokaal. Zie Een custo-manifest implementeren in Rainbow.

Voorbeelden van configuratie

Knoppen

Ondersteund door Rainbow Desktop en Rainbow Web — vereist CORS voor REST-aanroepen.

Voorbeeld 1 — on-contact-list-actions voegt aan elke contactrij een knop toe waarmee het contact in een extern CRM wordt geopend (geen pop-up binnen Rainbow):

{
"version": "2",
"jsonType": "Rainbow-custo-manifest",
"extension-points": {
"on-contact-list-actions": [
{
"name": "Openen in CRM",
"tooltip": "Bekijk dit Contact in ons CRM",
"icon": "${custo.path}\\crm.png",
"command": {
"url": "https://crm.example.com/contact",
"params": "email=${contact.email}&phone=${contact.phoneNumber}"
}
}
]
}
}

Voorbeeld 2 — on-incoming-pbx-call-button-actions voegt een knop toe aan het pop-upvenster voor inkomende oproepen waarmee u met één klik een ticket aanmaakt en de oproep beantwoordt:

{
"version": "2",
"jsonType": "Rainbow-custo-manifest",
"extension-points": {
"on-incoming-pbx-call-button-actions": [
{
"name": "Ticket aanmaken & opnemen",
"AnswerOnClick": true,
"command": {
"commandType": "rest",
"method": "POST",
"url": "https://tickets.example.com/api/tickets",
"header": [
"Authorization: Bearer TOKEN",
"Content-Type: application/json"
],
"bodyParameters": {
"caller": "${caller.phoneNumber}",
"callId": "${call.callId}",
"createdBy": "${localUser.loginEmail}"
}
}
}
]
}
}

Weergaven

Ondersteund door Rainbow Desktop en Rainbow Web — vereist CORS voor REST-aanroepen.

Voorbeeld 1 — on-incoming-pbx-call-display-actions toont automatisch een Markdown-kaart met het nummer van de beller in het pop-upvenster voor inkomende oproepen:

{
"version": "2",
"jsonType": "Rainbow-custo-manifest",
"extension-points": {
"on-incoming-pbx-call-display-actions": [
{
"command": {
"commandType": "rest",
"method": "GET",
"url": "https://api.example.com/lookup",
"params": "phone=${caller.phoneNumber}",
"header": ["Authorization: Bearer TOKEN"]
},
"responseType": "markdown"
}
]
}
}

Voorbeeld 2 — on-main-widget-display-actions toont een Adaptive Card-widget in het hoofdpaneel van Rainbow, die telkens wanneer deze wordt geopend, wordt vernieuwd:

{
"version": "2",
"jsonType": "Rainbow-custo-manifest",
"extension-points": {
"on-main-widget-display-actions": [
{
"name": "Mijn tickets",
"command": {
"commandType": "rest",
"method": "GET",
"url": "https://api.example.com/tickets/me",
"header": ["Authorization: Bearer TOKEN"]
},
"responseType": "adaptiveCard",
"adaptiveCardTemplateJsonField": "card",
"adaptiveCardContentJsonField": "data",
"adaptiveCardSubmitUrl": "https://api.example.com/tickets/submit"
}
]
}
}

Weergave in een frame

Ondersteund door Rainbow Desktop en Rainbow Web.

Voorbeeld 1 — on-main-window-actions integreert een CRM-Dashboard in het hoofdpaneel van Rainbow:

{
"version": "2",
"jsonType": "Rainbow-custo-manifest",
"extension-points": {
"on-main-window-actions": [
{
"name": "Mijn CRM",
"icon": "${custo.path}\\crm.png",
"command": {
"url": "https://crm.example.com/dashboard",
"params": "user=${localUser.email}"
}
}
]
}
}

Voorbeeld 2 — hetzelfde met `Popup: true` om in een browservenster te openen (handig wanneer de app het insluiten via iframes weigert):

{
"version": "2",
"jsonType": "Rainbow-custo-manifest",
"extension-points": {
"on-main-window-actions": [
{
"name": "Externe rapportage",
"icon": "${custo.path}\\report.png",
"Popup": true,
"command": {
"url": "https://reporting.example.com/",
"params": "user=${localUser.loginEmail}"
}
}
]
}
}