So erstellen Sie eine Home View

Die Home View ist eine Startseite, die Sie wie eine "Home"-Seite vor den Chat setzen können. Der Chat startet nicht direkt in einer Konversation, sondern in einem Menü, über das Sie zu verschiedenen LoyJoy-Chat-KI-Agenten springen können.

Sind Sie bereit, Ihre Chat-KI-Agenten auf die nächste Stufe zu bringen und die Möglichkeiten der LoyJoy-Home-View zu entdecken? Großartig, Sie sind hier genau richtig!

Dieser Artikel führt Sie durch die Funktionen der LoyJoy-Home-View und erklärt, wie Sie sie am besten einsetzen. Die Home View ermöglicht Ihnen, eine responsive Webanwendung zu erstellen, um einfach durch verschiedene konversationelle Kunden-KI-Agenten zu navigieren. Neben Ihren bekannten LoyJoy-KI-Agenten möchte ich Ihnen unsere LoyJoy Stories vorstellen. Präsentieren Sie Ihre Inhalte in spannenden Social-Media-ähnlichen Stories und vielem mehr.

Die Home View einrichten

Öffnen Sie die Home-View-Übersicht, indem Sie neben Ihren KI-Agenten auf Home Views klicken. Sie können eine neue Home View erstellen oder oben rechts einen Kopier-Token eingeben.

Bevor Sie Widgets einfügen, beginnen wir mit dem Zusammenbau des Grundgerüsts Ihrer Home View. Wählen Sie zuerst, wie kompakt Ihr Header sein soll, da dies Ihre Möglichkeit beeinflusst, am Anfang einen Titel oder Text einzugeben.

Sie können außerdem Ihren Header-Text und die Hintergrundfarbe sowie den Hintergrund des Bodys verändern.

Nun können Sie unterhaltsame Widgets hinzufügen, um Ihre Home View zu füllen!

p.s. Einige unterhaltsame Anpassungen für Ihre Widgets finden Sie beim Group-Widget erklärt!

Um Widgets hinzuzufügen, klicken Sie auf das Plus des Widgets Ihrer Wahl.

Ziehen Sie die Komponenten per Drag-and-Drop, bis sie in Ihrer bevorzugten Reihenfolge sind.

Hero-Widget

Das Hero-Widget ist ein Titelbild mit einem optionalen Begrüßungstextfeld.

Stellen Sie Ihre Kunden vor und springen Sie direkt in einen Ihrer KI-Agenten, indem Sie ihn hier verlinken.

Stories-Widget

Über Stories können Sie Ihren Kunden spannende Einblicke bieten. Bieten Sie unterhaltsame Inhalte, indem Sie Ihrer Home View kleine Videosequenzen in Form von Stories hinzufügen.

Zuerst fügen Sie eine neue Story hinzu.

Erstellen Sie Ihre Stories mit dem kostenlosen Tool Make Stories. Mit diesem Tool können Sie Ihre Stories gestalten. Seien Sie kreativ und erstellen Sie Ihre persönliche Story! Holen Sie sich den Link und fügen Sie ihn in Ihre LoyJoy-Home-View-Stories ein.

Zurück im LoyJoy-Backend können Sie ein Avatar-Bild und ein Logo hinzufügen. Sie können auch Tags für bestimmte Stories eingeben, die Ihnen später helfen können.

Wenn Sie nur bestimmte Stories anzeigen möchten, wählen Sie einfach die Tags, die Sie Ihren Stories gegeben haben!

Lassen Sie Ihren Kunden mit einem Call-to-Action direkt in einen Ihrer KI-Agenten springen, indem Sie einen KI-Agenten mit Ihrer Story verlinken.

Sehen Sie sich Ihre Story in der Vorschau an und gehen Sie live!

Groups-Widget

Verwenden Sie das Groups-Widget, um Ihre KI-Agenten direkt in Ihrer Home View zu platzieren und sie für Ihre Benutzer leicht zugänglich zu machen. Klicken Sie auf Add group, um loszulegen!

Bevor Sie Ihre KI-Agenten eingeben, wählen Sie die Einstellungen-Schaltfläche rechts, um weitere Möglichkeiten zur Personalisierung des Widgets zu finden. Die Einstellungen finden Sie bei jedem Widget, das Sie in Ihre Home View einfügen.

Sie können einen Titel eingeben, Farben und Layout verändern. Darüber hinaus können Sie entscheiden, ob das Widget als Karte gestaltet werden soll. Unten sehen Sie, wie der Kartenstil in Ihrer Home View aussieht.

Um auszuwählen, welche KI-Agent-Gruppen in der Home View angezeigt werden, aktivieren Sie einfach die Schaltfläche jeder KI-Agent-Gruppe. Fügen Sie jedem KI-Agenten Ihrer Home View ein Bild und ein Avatar-Bild hinzu und wählen Sie einen Titel und einen Slogan.

Wenn Sie mehrere Gruppen in Ihre Home View aufnehmen möchten, verwenden Sie für jede ein eigenes Group-Widget.

Gestalten Sie Ihre individuellen Group-Widgets nach Ihrem Geschmack!

So sollte Ihre Home View mit mehreren Group-Widgets aussehen!

Notifications-Widget

Dieses Widget präsentiert eine Nachricht für den Kunden. Rufen Sie zum Handeln auf, begeistern Sie Ihren Kunden oder führen Sie ihn, all das ist mit dem Notifications-Widget möglich.

Roster-Widget

Der Roster zeigt die früheren Chats und Interaktionen des Kunden mit Ihren Chat-KI-Agenten.

Wenn der Roster in der Home View angezeigt werden soll, aktivieren Sie die Schaltfläche.

Lassen Sie Ihre Kunden zu früheren Konversationen zurückkehren, so wie sie es beim Chatten mit einem Freund tun würden.

Such-Widget

Im Such-Widget können Ihre Kunden durch LoyJoy-KI-Agenten suchen und direkt in sie springen.

Fügen Sie einen Titel und eine Suchphrase hinzu, um Ihren Kunden zu helfen.

Web-Component-Widget

Hier können Sie eine Web Component für Ihre Kunden integrieren. "Web Components sind eine Reihe von Funktionen, die ein standardisiertes Komponentenmodell für das Web bereitstellen und die Verkapselung sowie Interoperabilität einzelner HTML-Elemente ermöglichen." Wikipedia

Beispielsweise definiert die folgende Web Component eine Web Component mit dem Tag hello-world. Um die Web Component in LoyJoy zu integrieren, (1) stellen Sie das folgende JavaScript-Snippet als Datei auf einem Web-Hosting Ihrer Wahl bereit, (2) geben Sie die URL zu dieser Datei in LoyJoy als URL der Web Component ein und (3) geben Sie hello-world als HTML-Tag der Web Component ein.

(function () {
  class HelloWorld extends HTMLElement {
    constructor () {
      super()
      this.attachShadow({ mode: 'open' })

      /*
      * sic! firefox requires methods to be defined in constructor
      */

      this.someAttribute = () => this.attributes['foo']?.value

      this.render = () => {
        this.shadowRoot.innerHTML = `
          <div class="hello-world">
            Hello world
          </div>

        const helloWorld = this.shadowRoot.querySelector('.hello-world');

        helloWorld.onclick = () => {
          this.dispatchEvent(new CustomEvent('hello', { detail: { foo: this.someAttribute } }))
        }
      }
    }

    connectedCallback() {
      if (!this._rendered) {
        this.render()
        this._rendered = true
      }
    }
  }

  if (!customElements.get('hello-world')) {
    customElements.define('hello-world', HelloWorld)
  }
})()

Großartig! Sie sind nun ein Home-View-Experte und bereit, Ihre eigene LoyJoy-Home-View für Ihre Marke zu bauen! 🎉