Chrome- und Edge-Erweiterung: Erreichbarkeit von Kontakten in Echtzeit

Über unseren Kunden

Unser Kunde hatte eine Lösung entwickelt, die einschätzt, ob ein Kontakt erreichbar, abwesend oder voraussichtlich telefonisch zu erreichen ist. Der Dienst lief jedoch hauptsächlich im Backend. Vertriebsteams konnten die Daten im Arbeitsalltag nur schwer nutzen.

Da Vertriebsteams überwiegend in CRM-Systemen und auf LinkedIn arbeiten, hätte der Wechsel zu einem separaten Dashboard oder die manuelle Übertragung von Kontaktdaten ihre Abläufe gestört und den Nutzen der Daten verringert.

SCAND wurde mit der Entwicklung einer Browser-Erweiterung beauftragt. Ziel war es, den bestehenden Backend-Dienst als CRM-Erweiterung für Chrome und Microsoft Edge verfügbar zu machen.

Die Erweiterung sollte die Erreichbarkeit von Kontakten direkt auf den unterstützten Websites anzeigen, rechtzeitig Benachrichtigungen senden und schnellen Zugriff auf Telefonnummern potenzieller Kunden ermöglichen.

• Plattformen: Google Chrome und Microsoft Edge
• Branche: Vertriebstechnologie / SaaS
• Projektdauer: 4 Wochen vom Projektstart bis zur Veröffentlichung in beiden Stores

Herausforderung

Die größte Herausforderung bestand darin, die bestehende Lösung zur Ermittlung der Erreichbarkeit in externe Websites einzubinden, ohne deren Oberfläche oder die gewohnten Abläufe der Vertriebsteams zu stören.

Die Erweiterung musste Kontakte auf der geöffneten Seite erkennen, Daten über die API des Kunden abrufen und die Ergebnisse an der passenden Stelle anzeigen.

Daraus ergaben sich mehrere technische Herausforderungen:

• Kontakte in HubSpot und Salesforce sowie auf LinkedIn erkennen, obwohl sich die Struktur der Seiten unterscheidet und häufig ändert
• Hinweise zur Erreichbarkeit einfügen, ohne das Layout oder die Leistung der Websites zu beeinträchtigen
• Die Anforderungen von Chrome Manifest V3 erfüllen und die Erweiterung für die Veröffentlichung in den Browser-Stores vorbereiten
• Personenbezogene Daten gemäß DSGVO verarbeiten
• Innerhalb von rund einem Monat ein funktionsfähiges Produkt für erste Kundendemos bereitstellen

Hauptziele

Um den bestehenden Backend-Dienst in ein praktisches Tool für den Vertrieb zu verwandeln, haben wir folgende Projektziele festgelegt:

• Eine Browser-Erweiterung für Google Chrome und Microsoft Edge entwickeln
• Daten zur Erreichbarkeit direkt in HubSpot, Salesforce und LinkedIn anzeigen
• Die Erreichbarkeit, den Abwesenheitsstatus und geeignete Anrufzeiten anzeigen
• Nutzer benachrichtigen, sobald gespeicherte Kontakte erreichbar sind
• Ein eigenes Panel mit Kontakten bereitstellen, die sofort angerufen werden können
• Telefonnummern anhand von Namen, E-Mail-Adressen oder LinkedIn-Profilen suchen
• Anmeldung über OAuth 2.0 und automatische Erneuerung von Tokens einrichten
• Flexible Arbeitszeiten und Einstellungen für Benachrichtigungen unterstützen
• Die Erweiterung auf Englisch und Deutsch anbieten
• Eine modulare Architektur schaffen, um weitere CRM- und Vertriebsplattformen anzubinden

Lösung

Die fertige CRM-Erweiterung für Chrome und Microsoft Edge machte Daten zur Erreichbarkeit direkt in HubSpot, Salesforce und LinkedIn verfügbar.

Vertriebsteams konnten den Status von Kontakten und empfohlene Anrufzeiten in der jeweiligen Zeitzone sehen. Desktop-Benachrichtigungen informierten sie, sobald gespeicherte Kontakte erreichbar waren.

Die modulare Architektur trennte plattformspezifische Funktionen von API-Anbindung, Anmeldung, Kontaktlisten und Einstellungen. So konnte der Kunde weitere CRM- und Vertriebsplattformen integrieren, ohne die Kernfunktionen neu entwickeln zu müssen.

Kernfunktionen

• Statusanzeige im CRM: Grüne, gelbe und rote Hinweise zur Erreichbarkeit in HubSpot, Salesforce und LinkedIn, ergänzt durch passende Anrufzeiten und lokale Zeitangaben.
• Abwesenheit erkennen: Zeigt an, wann ein Kontakt abwesend ist und voraussichtlich zurückkehrt. So vermeiden Vertriebsteams unnötige Anrufe.
• Gespeicherte Kontakte und Echtzeit-Hinweise: Nutzer können Kontakte als Favoriten speichern und erhalten Desktop-Benachrichtigungen, sobald diese erreichbar sind.
• Panel «Jetzt erreichbar»: Zeigt eine sortierbare Liste gespeicherter Kontakte, die sofort angerufen werden können, direkt über die Browserleiste.
• Kontaktsuche: Findet Telefonnummern anhand von Namen, E-Mail-Adressen oder LinkedIn-Profilen und ermöglicht Anrufe per Klick.
• Sichere Anmeldung: OAuth 2.0 über den Identitätsdienst des Kunden mit sicherer Token-Speicherung und automatischer Erneuerung.
• Nutzereinstellungen: Flexible Arbeitszeiten und individuelle Einstellungen für Benachrichtigungen.
• Deutsch und Englisch: Die Oberfläche ist in beiden Sprachen verfügbar.
• Modulare Adapter: Die Erkennung von Kontakten und die Anzeige der Statushinweise sind für jede Website getrennt umgesetzt. Das erleichtert weitere CRM-Integrationen.
• Unterstützung mehrerer Browser: Chrome und Microsoft Edge nutzen denselben Code auf Basis von Manifest V3, nach unseren bewährten Verfahren für die Entwicklung von Chrome-Erweiterungen.

Nutzer-Workflow

• Kontakt öffnen: Der Nutzer öffnet einen Kontakt in HubSpot oder Salesforce oder ein Profil auf LinkedIn. Die Erweiterung erkennt den Kontakt automatisch.
• Erreichbarkeit prüfen: Die Erweiterung ruft den aktuellen Status über die API des Kunden ab.
• Status anzeigen: Ein farbiges Symbol neben dem Namen zeigt die Erreichbarkeit sowie empfohlene Anrufzeiten und die lokale Uhrzeit.
• Kontakt speichern und überwachen: Der Nutzer speichert einen Kontakt als Favoriten. Ein Dienst im Hintergrund prüft regelmäßig dessen Erreichbarkeit.
• Benachrichtigung erhalten: Sobald ein gespeicherter Kontakt erreichbar ist, erscheint eine Desktop-Benachrichtigung.
• Kontakt anrufen: Über das Panel in der Browserleiste sieht der Nutzer sofort erreichbare Kontakte. Alternativ kann er eine Telefonnummer anhand des Namens, der E-Mail-Adresse oder des LinkedIn-Profils suchen und einen Anruf starten.

Technologie-Stack

Für die Anbindung der CRM-Plattformen an den bestehenden Dienst zur Prüfung der Erreichbarkeit nutzten wir folgende Technologien und Komponenten:

• Plattformen: Google Chrome, Microsoft Edge
• Architektur der Erweiterung: Manifest V3, Browser-Erweiterung APIs, Extension Service Worker
• Frontend: JavaScript, HTML, CSS
• Integration in Websites: Adapter für einzelne Websites, Erkennung von Kontakten auf der Seite, dynamische Anzeige von Statussymbolen
• CRM-Integrationen: HubSpot, Salesforce
• Soziales Netzwerk: LinkedIn
• Backend-Anbindung: API des Kunden zur Prüfung der Erreichbarkeit, API zur Kontaktsuche
• Anmeldung: OAuth 2.0, Anbindung an den Identitätsdienst, Speicherung von Tokens, automatische Erneuerung von Tokens
• Benachrichtigungen: Desktop-Benachrichtigungen im Browser, regelmäßige Prüfung der Erreichbarkeit im Hintergrund
• Benutzeroberfläche: Statussymbole direkt auf der Seite, Popup in der Browserleiste, sortierbare Liste erreichbarer Kontakte, Oberfläche für Einstellungen
• Sprachen: Englisch, Deutsch
• Datenschutz und DSGVO: Lokale Speicherung nur von IDs gespeicherter Kontakte und Nutzereinstellungen, Abruf von Kontaktdaten über die API des Kunden bei Bedarf
• Veröffentlichung: Chrome Web Store, Microsoft Edge Add-ons

Kernteam

• Frontend- und Browser-Entwickler: Entwickelte die Manifest-V3-Architektur, Website-Adapter, Statusanzeigen auf den Seiten, die Browserleiste und Nutzereinstellungen.
• Backend-Entwickler: Integrierte die APIs des Kunden zur Prüfung der Erreichbarkeit und Kontaktsuche sowie die Anmeldung.
• QA-Ingenieur: Testete die Erkennung von Kontakten, Statusanzeigen, Benachrichtigungen, Anmeldung und Funktionen in beiden Browsern.
• Projektmanager: Koordinierte die Entwicklung, priorisierte Funktionen und organisierte wöchentliche Demos für erste Kunden.