Infomatrix
Infomatrix

Infomatrix Webseite – Webseite, Matrix Studio und Kundenportal

Unsere eigene zweisprachige Webseite mit Matrix Studio für das Team, einem Kundenportal für Anfragen, Termine, Offerten und Rechnungen, einem KI-Assistenten, einem kostenlosen KI-Webseiten-Check und sicherer Anmeldung mit Passkeys.

Umgesetzt mit

  • Next.js
  • React
  • TypeScript
  • Node.js
  • Payload CMS
  • MongoDB
  • Mongoose
  • Tailwind CSS
  • shadcn/ui
  • Radix UI
  • Motion
  • React Hook Form
  • HTML
  • CSS
  • SCSS
  • Python
  • Odoo
  • Google Gemini
  • Google Cloud Vision
  • PageSpeed Insights
  • Google Analytics
  • WebAuthn (Passkeys)
  • JWT
  • Sharp
  • Vitest
  • GitHub Actions
  • Nginx
  • PM2
  • Cloudflare
The home page of the Infomatrix website

Die Startseite

Diese Webseite ist das eigene Projekt von Infomatrix: das Schaufenster für unseren IT-Support, unsere Webseiten und Software und zugleich der Ort, an dem Kundinnen, Kunden und das Team zusammenarbeiten. Infomatrix hat sie mit Next.js, Payload CMS und MongoDB gestaltet und entwickelt und betreut sie von A bis Z.

The home page of the Infomatrix website in the dark theme

Die Startseite im dunklen Design

Eine zweisprachige Webseite, im CMS bearbeitbar

Jede Seite, jeder Text und jede E-Mail ist auf Deutsch und Englisch und lässt sich ändern, ohne Code anzufassen. Seiten werden aus Blöcken zusammengestellt, Blogbeiträge und Projekte teilen ein Layout mit Inhaltsverzeichnis, und die Lösungen sind so gruppiert, dass Besucherinnen und Besucher schnell finden, was sie brauchen. Ein helles und ein dunkles Design, sanftes Scrollen und kurze Ladezeiten machen die Webseite angenehm.

Solution cards on the Infomatrix website

Die Lösungen, so gruppiert, dass Besucherinnen und Besucher finden, was sie brauchen

A blog post on the Infomatrix website with its table of contents

Ein Blogbeitrag mit Inhaltsverzeichnis

Matrix, der KI-Assistent

Matrix beantwortet Fragen von Besucherinnen und Besuchern in ihrer Sprache und empfiehlt die passenden Lösungen, mit kurzen Antworten und Links zu den passenden Angeboten.

Matrix, the AI assistant of the Infomatrix website

Matrix, der KI-Assistent, unter den Lösungen

Kostenloser KI-Webseiten-Check

Alle können eine Webseite kostenlos prüfen lassen. Der Check misst die Geschwindigkeit mit Google PageSpeed und prüft Suchmaschinen, Sicherheit und Barrierefreiheit; danach schreibt eine KI einen leicht verständlichen Bericht, der als PDF per E-Mail kommt.

The free website check on the Infomatrix website

Der kostenlose KI-Webseiten-Check

Matrix Studio: ein Ort für das Team

Matrix Studio ist das eigene Backoffice der Webseite, in ihrem Design in die Webseite eingebaut. Das Team meldet sich auf der Webseite an und findet dort alles: die Inhalte, Kundenanfragen, Termine, Zeiterfassung und Einstellungen. Alle im Team sehen, was ihre Rolle erlaubt, und die Übersicht zeigt auf einen Blick, was wartet.

The overview of Matrix Studio for the team

Matrix Studio: die Übersicht des Teams

Inhalte

Seiten, Blogbeiträge, Lösungen, Projekte, Teammitglieder und Medien werden in Matrix Studio bearbeitet, auf Deutsch und Englisch. Texte entstehen aus Blöcken – Überschriften, Bilder, Tabellen, Diagramme, Buttons und mehr –, und Entwürfe bleiben privat, bis sie veröffentlicht werden. Jede veröffentlichte Fassung der rechtlichen Seiten bleibt erhalten, sodass frühere Fassungen lesbar bleiben.

The blog posts in Matrix Studio

Blogbeiträge, Seiten, Lösungen und Projekte werden direkt in Matrix Studio bearbeitet

Support-Tickets

Anfragen aus dem Support-Formular, dem Kundenportal und E-Mails an die Support-Adresse werden zu Tickets. Das Team gibt jedem einen Status, eine Priorität und Teammitglieder, antwortet der Kundschaft direkt aus dem Ticket per E-Mail und ergänzt interne Notizen, die nur das Team sieht. Tickets zum gleichen Thema lassen sich zusammenführen, und das Postfach lässt sich jederzeit mit einem Klick auf neue E-Mails prüfen.

The support tickets in Matrix Studio

Support-Tickets mit Status, Priorität und Teammitgliedern

A support ticket with answers and an internal note

Ein Ticket: Antworten an die Kundschaft und interne Notizen für das Team

Termine

Besucherinnen und Besucher buchen online eine kostenlose Erstberatung, und das Team bestätigt sie, schlägt eine andere Zeit vor oder plant eigene Termine mit der Kundschaft: online, per Telefon oder vor Ort. Kundschaft und Team erhalten die passenden E-Mails und Kalendereinladungen.

The appointments in Matrix Studio

Termine und kostenlose Beratungen

Zeiterfassung

Das Team stempelt den Arbeitstag ein, misst seine Arbeit mit einem Timer und verknüpft jeden Eintrag mit einer Kundin, einem Kunden, einem Ticket oder einem Termin. Auch Fernwartungen werden erfasst. Der Zeitrapport zählt Stunden und Beträge zusammen, exportiert sie als CSV und markiert die Einträge, sobald sie verrechnet sind.

The time report in Matrix Studio

Der Zeitrapport, bereit für die Rechnung

Kundenportal

Kundinnen und Kunden haben ein eigenes Konto im selben Matrix Studio, mit nur dem, was ihnen gehört. Sie sehen ihre Support-Anfragen, Termine, Offerten und Rechnungen und ändern ihre Angaben und die Sprache unserer E-Mails selbst.

The customer portal’s overview

Das Kundenportal: Anfragen und Termine auf einen Blick

Support-Anfragen

Kundinnen und Kunden eröffnen Anfragen, hängen Dateien an und verfolgen die Antworten in einem Gespräch. Fernwartungen erscheinen mit ihrer Dauer in der Anfrage, sodass alles zu einem Problem beisammen bleibt.

A support request in the customer portal

Eine Support-Anfrage aus Sicht der Kundschaft, mit der Fernwartung

Termine

Kommende Termine erscheinen mit dem Link zum Online-Meeting; neue Termine buchen, verschieben oder absagen geht mit wenigen Klicks.

Appointments in the customer portal

Termine mit Link zum Online-Meeting

Offerten und Rechnungen

Kundinnen und Kunden fragen eine Offerte für eine Lösung an, nehmen sie online an und unterschreiben sie und bezahlen Rechnungen online. Offerten und Rechnungen kommen aus Odoo, der Geschäftssoftware von Infomatrix, und bleiben mit ihr abgeglichen.

Firmenkonten

Eine Firma hat ein Konto für ihre Mitarbeitenden: Ihre Administratorinnen und Administratoren laden Kolleginnen und Kollegen ein, geben ihnen Rollen und bestimmen, wer Rechnungen sehen oder Anfragen eröffnen darf.

A company account with its employees

Ein Firmenkonto: Mitarbeitende, Einladungen und Rollen

Sichere Anmeldung

Kundschaft und Team melden sich mit einem Passkey an – Face ID, Touch ID, Windows Hello oder ihrem Smartphone – oder mit ihrem Passwort und einem zweiten Schritt: einem Code per E-Mail oder aus einer Authenticator-App. Passkeys und Authenticator-App richten sie im Profil ein, sehen dort, auf welchen Geräten sie angemeldet sind, und melden sich von jedem ab. Nach zu vielen falschen Versuchen wird ein Konto vorübergehend gesperrt.

The sign-in page with passkey

Anmelden mit Passkey, oder mit Passwort und zweitem Schritt

The second step after the password

Der zweite Schritt: ein Code aus der Authenticator-App oder per E-Mail

The sign-in methods in the profile

Passkeys und Authenticator-App, im Profil eingerichtet

E-Mails in einem Design

Jede E-Mail der Webseite – Bestätigungen, Antworten, Rechnungen, Anmeldecodes – hat dasselbe Design, kommt in der Sprache der Kundschaft und funktioniert mit Screenreadern. Eine Kopie jeder E-Mail bleibt für das Team erhalten; Anmeldecodes und private Links werden aus diesen Kopien entfernt.

Was wir umgesetzt haben

  • Design & Entwicklung: eine schnelle, zweisprachige Webseite mit Matrix Studio für das Team und einem Kundenportal.
  • Inhaltsverwaltung: Payload CMS, jeder Text auf Deutsch und Englisch bearbeitbar.
  • Sicherheit: Passkeys, ein zweiter Schritt nach dem Passwort, Sperre nach falschen Versuchen und angemeldete Geräte.
  • Anbindungen: Odoo für Offerten, Rechnungen und Zahlungen, Google Gemini für Matrix und den Webseiten-Check, Google PageSpeed.
  • Hosting & Wartung: Server, SSL, Backups und automatische Tests vor jedem Update.

Passende Leistungen

Alle Projekte ansehen

Sie verlassen infomatrix.ch

Dieser Link öffnet , eine Webseite von Dritten. Für deren Inhalte sind wir nicht verantwortlich.