one.pages: Widget Builder

one.pages: Widget Builder

Widgets und HTML Scripte erstellen mit dem Widget Builder

Der Widget Builder erstellt Widgets auf Webcomponent-Basis für die Integration von one.pages Inhalten (Detailseite, Ergebnisliste, Tagesplaner, Chatwidget, etc) in Fremd-Webseiten, bzw. Drittwebseiten.

Info
Für den Widget Builder benötigt ihr entweder die one.pages PWA (ehemals destination.welcome) oder gebuchte Themenwidgets. Wendend euch bei Interesse an sales@destination.one oder eure Ansprechpartner:in.
 

Hauptfunktionen des Widget Builders

  1. Einbindung in andere Webseiten

    1. Die strukturierten Event-Datensätze aus destination.data als Veranstaltungskalender auf der Städte-Seite? Die Highlight POIs als Ergebnisliste für die Hotel Websites im Ort? Genau dafür könnt ihr euch und euren Partner:innen mit dem Widget Builder die benötigten HTML-Scripte zusammen stellen.

      Idea
      Hier ein Beispiel einer Ergebnisliste auf einer externen Seite: https://usedom.de/usedom-erleben/events/

  2. Anpassung und Konfiguration

  1. Die Farbgestaltung der Widgets richtet sich nach eurer Experience. Bei Hinzubuchung können die Farben individuell angepasst werden, um sie an das Design der jeweiligen Webseiten anzupassen.
  2. Konfigurationen können vorgenommen werden, um die Inhalte und die Anzeige der Widgets entsprechend den Bedürfnissen der Partner zu gestalten.
3. Technische Anforderungen

  1. Die Widgets generieren sich aus einem Script und dem Webcomponent Element. Für die Einbringung ist lediglich die Pflegemöglichkeit von HTML Code notwendig.
  2. Es wird auf Sicherheitsprotokolle wie HTTPS geachtet, um eine sichere Datenübertragung zu gewährleisten.

4. Einfache Bedienbarkeit
  1. Der Widget Builder bietet eine intuitive Benutzeroberfläche für die Erstellung von Widgets.
  2. Der Link kann dann auch Partner:innen direkt zur Verfügung gestellt werden.


Buchbare Themen

Für den Widget Builder können modular Themen und Module gebucht werden. Themen sind hier die verschiedenen Daten Typen (POI, Events, Touren, etc.) Auch Module, wie ein Chatbot (destination.chatbot), ein Tagesplaner (destination.dayplanner) oder weitere Module können über den Widget Builder als Scripte für Fremdseiten erzeugt werden.

Pflege

Info
Den Link zu deinem Widget Builder erhälst du nach der Beauftragung von deinem jeweiligem Ansprechpartner:in

a) Ergebnislisten

 

1. Widget erstellen und benennen:

  1. Starte im Interface des neuen Widget-Konfigurators.
  2. Gib deinem Widget einen Namen, z.B. "Veranstaltungskalender". Die Widgets können Browserbasiert gespeichert werden.
  3. Wähle im Dropdown "Ergebnisliste" aus.
  4. Belass die Auswahl für den URL-Mod so, wie sie ist.
  5. Klicke auf "Erstellen".

2. Widget konfigurieren (Schritt 1: Daten und Filter festlegen):

  • Meta-Query (Optional):
    Wenn du spezielle Filter benötigst, die nicht in den Standard-Konfigurationen enthalten sind, kannst du eine eigene Meta-Query verwenden. Meistens wirst du jedoch mit den Standard-Optionen gut abgedeckt sein.
  • Datentyp wählen:
    Wähle den gewünschten Datentyp aus, zum Beispiel "Events" für Veranstaltungen.
  • Kategorie filtern:
    Nutze die Suchfunktion, um nach Kategorien zu filtern, die in deiner Experience verfügbar sind.
  • Merkmale filtern:
    Filtere nach spezifischen Merkmalen für die Veranstaltung, z.B. um nur Veranstaltungen mit einem bestimmten Merkmal anzuzeigen.
  • Orte filtern:
    Filtere nach dem gewünschten Ort, z.B. "Bad Nennendorf".
  • Keywords filtern (Optional):
    Du kannst auch nach bestimmten Keywords filtern, falls nötig.
  • Ausgewählte Datensätze anzeigen (Optional):
    Um gezielt einzelne Datensätze anzuzeigen, gib den Datentyp (z.B. "e" für Events), gefolgt von einem Unterstrich und der Global ID des Datensatzes an. Mehrere Datensätze kannst du durch Kommas trennen.
  • Ergebnisliste sortieren:
    Lege eine feste Sortierung fest, zum Beispiel "chronologisch" für Veranstaltungen.
  • Live-Vorschau prüfen: Unten auf der Seite siehst du eine Live-Vorschau deiner Ergebnisse.
  • Klicke auf "Weiter zu Schritt 2".

3. Layout definieren (Schritt 2: Ansicht gestalten):

  • Ergebnisdarstellung wählen:
    Entscheide, ob du die Ergebnisse in "Cards Optik", "Listenansicht" oder "Kompaktansicht" darstellen möchtest. Für Events kann die Kompaktansicht sinnvoll sein, um alle Events untereinander anzuzeigen.
  • Karte initial ausblenden (Optional):
    Du kannst festlegen, dass die Karte initial ausgeblendet wird und beobachten, wie sich die Ansicht direkt ändert.
  • Filterliste ausblenden (Optional):
    Wenn die Seitenbesucher nicht zwischen verschiedenen Ansichten wählen sollen, kannst du die Filterliste ausblenden.
  • Sortierung ausblenden (Optional):
    Du kannst auch die Sortierung ausblenden. In diesem Fall bleibt sie an, um nach chronologischer Reihenfolge oder Entfernung zu sortieren.
  • Klicke auf "Weiter zu Schritt 3".

4. Skript kopieren (Schritt 3: Widget integrieren):

  • In diesem Schritt ist das fertige Skript für dich bereit.
  • Kopiere es über den "Kopieren"-Button oder markiere den gesamten Code manuell und kopiere ihn.

b) Detailansicht

Ein Widget für einen einzelnen Datensatz lässt sich ebenfalls generieren. Wählt dafür im Dropdown die Detailansicht aus.

1. Gewünschten Datentyp auswählen


2. dann muss die Global ID des Datensatzes eingetragen werden. Diese findet man in destination.data mit jeweiligem Datentyp Buchstaben vorne:


p_=POI

t_=Tour

e_=Event

usw.

zB.:  p_100238846


3. Ausgabe der weiteren Infos. Zum Schluss kann man noch definieren, welche Informationen ausgespielt werden sollen und in welcher Reihenfolge.
  • Abschnitte: Logos, Termine, Beschreibung, Anfrage-Formular, Features (Gut zu Wissen), Verwandte Ergebnisse (In der Nähe), KI-Optimiert, Empfehlung und Quell-Inhalt
  • Tags: Highlight, Termine, Kategorien, Status, Besucher

  • Breadcrumb Reihenfolge: PDF Export, Teilen, Merken



  • Feature-Reihenfolge (Gut zu wissen): Diese Infos gibt es individuell, je nach Datentyp und Schema

  • Zusätzliche Sidebar- Adresse: Adresse, Kontaktperson, Veranstalter, Autor, Organisation, Vermittler, Betreiber

c) Merkliste

Wenn auf der Dritt-/ oder Fremdseite eine Ergebnisliste oder eine Detailseite eingefügt ist, können sich Website Besucher die einzelnen Datensätze über einen Klick auf das Herz merken. Somit kann ein Gast sich eine Merkliste mit den Strukturierten Daten zusammen stellen. Um diese dann auch gesammelt anzeigen zu können, benötigt es dann eine eingebundene Merkliste.

Für die Merkliste kann man nur unter Schritt 2 die Darstellung anpassen. Die Datensätze wählt sich der Website-Besucher selbst zusammen.

Einstellbar ist, ob die Ergebnisse als Card, Liste oder Kompakt angezeigt werden, wie die Karte sich verhält und wie viele Datensätze initial angezeigt werden.

Script einbinden

Um das Script in einer Seite einzubinden braucht es in dem System lediglich die Möglichkeit HTML Code pflegen zu können. Das Script generiert sich automatisch in Schritt 3. Dort kann der Code dann kopiert werden und 1-zu-1 in einem HTML Feld eingefügt werden.



Nur das Web-Component wird benötigt, wenn auf der gleichen Seite bereits ein Script eingebunden wurde. Dann fügt man das zweite Web-Component einfach nur unterhalb an.

 


Fragen

1. Frage: Sind die Pages iFrame Einbindungen? Wenn ja, wie wird hier mit Cookies umgegangen? Warum braucht es keine Cookie-Zustimmung des Nutzers?
Antwort: Die Widgets sind Web-Components und keine IFrames. Cookies müssen von der Seite, welche diese einbindet, gemanagt werden (Cookie-Tools).
Personenbezogene Daten sind nur der Userstandort (wenn im Browser erlaubt) für die Ergebnisliste. Die Partner können dann gerne das Skript im Cookietool deklarieren und nur bei Erlaubnis vom Gästen anzeigen lassen.



 

    • Related Articles

    • one.pages: Upgrade

      Einführung in die neuen one.pages Bisherige Nutzer der destination.welcome und der destination.pages haben nun die Möglichkeit auf unsere neuen one.pages umzusteigen. Mit dem neuesten Release haben die one.pages sowohl optisch als auch technisch ein ...

    • destination.pages: Hinterlegen von neuem Inhalte für den Infoscreen im Pages Builder

      In destination.one über den Menüpunkt "Content ausspielen" gelangst Du in den Pages Builder. Bitte wähle danach den Menüpunkt "Infoscreen" im Bereich "Aktionen" aus. Dieser Bereich befindet sich auf der linken Seite, unter der Weltkugel: Jetzt kannst ...

    • one.pages: Upgrade auf der Hardware

      Wie die neuen one.pages auf die Hardware kommen Bisherige Nutzer der destination.welcome und der destination.pages haben nun die Möglichkeit auf unsere neuen one.pages umzusteigen. Mit dem neuesten Release haben die one.pages sowohl optisch als auch ...

    • one.pages: Farbeinstellung

      In den neuen one.pages kannst du eine Vielzahl von Farbschemen nutzen, ähnlich wie bei TYPO3. Jedes Farbschema setzt sich aus vier Farbwerten zusammen: Hintergrundfarbe, Schriftfarbe, Linkfarbe und Link-Hover-Farbe. Hier erfährst du, wie du diese ...

    • Hardwaremanagement in destination.data

      Anleitung zur Hardwaremanagement in destination.data Hardwareübersicht: Wenn Du in destination.data auf Tools und anschließend auf den Button Hardwareübersicht klickst, wird Dir die Hardwareliste angezeigt. Das neue Layout zeigt die einzelnen Geräte ...